js関数型プログラミングの入り口です。js関数型プログラミングの入り口です。reduceについて使い方をさらっと学ぶよ!という記事です。reduceに出会いました。私のように、さらっと触れておきたいという方向けの記事です。簡単に試せる(ChromeとかFirefoxならF12のコンソールに打てば結果が見れます)ので、使ったことが無い人は試してみて下さい。mapとfilterとreduceで実践っぽい処理を書いてみるmapmapを適用した配列の各要素に対して、callbackで与えた関数の処理を行った結果の配列を返却します。return句で返却した値が、結果配列の1要素の値となります。下記のような感じです。arr))[/javascript]mapの使い方mapの引数のcallback部分には、function(){}のように関数を与えます。アロー関数も使用できます。2][/javascript]もっと実践っぽく、九九表を作ってみるこちら(Sitest.jp)で、面白そうな題材を見つけました。九九表をmapを使用して書こう!ということです。上記ページとは異なりますが、mapを使用して下記のように書くことができます。(ちなみに、関数指向かどうかは置いておきます。mapの使い方だけの話で)[javascript][1,2,3,4,5,6,7,8,9].map((m,i,arr)=>arr.map(n=>m*n))[/javascript]なんというか、便利です。filterfilterを適用した配列の中から、callbackで与えた関数のreturn値がtrueとなる要素のみを抽出した新たな配列を返却します。下記のような感じです。[3][/javascript]filterは分かりやすい部類ですね。引数として与えた関数の中で、結果がtrueになる要素のみを抽出するだけですね。reducereduceを適用した配列に対して、隣り合う2つの要素を引数として受け取り、関数を適用、単一の値を返却します...上手く説明できません!!習うより慣れましょう。下記のような書式です。initValue)[/javascript]実際に使ってみて雰囲気を掴んで欲しいです。reduceの使い方まずはよくある数を足しこんでいくパターンを。c(currentValue)を受け取ります。初期値(initValue)を与えていない場合、1処理目では1要素目の値がpにセットされて始まります。初期値を与えている場合は、1処理目で初期値がpにセットされて始まります。reduceを使って書いてみました。「Goole検索で、”Google”と検索した時の結果一覧ページから、h3タグで囲まれている見出し部分のみ(関連するキーワードみたいのは除外する)抽出して、ちょっと整形して表示する」です。2017/04/27現在、Googleと検索すると、下記のような検索結果になりました。この検索結果は純粋な見出しでないもの(トップニュースの部分とか、関連するキーワードとか)も含まれているので、(filterを使うために)除外することにしました。(filterしなくてもquerySelectorとかで絞り込めるじゃん、なんてツッコミは受け付けません。はてなダイアリー】"[/javascript]なんだか、便利っぽい雰囲気が伝わったでしょうか...簡単に説明を書いておきますと、1行目で、h3タグの取得結果を配列化しています。え?getElementsByTagNameの戻り値って配列じゃ...?と思いますよね。実は違くて、HTMLCollectionらしいです...ので、今回使用したいmapメソッドなどがありません。仕方がないので、配列化するためにおまじないを書いています。(詳しくは本家MDNへ⇒Array.prototype.slice())2行目からが本番です。filterメソッドでh3要素のうち、classNameがrのものだけを抽出します。Googleの検索結果を見ると、クラス名rが通常の検索結果見出しのようだったので。3行目は、フィルタ結果の純粋な見出しにあたる要素配列に対して、mapメソッドを使用してテキスト部分のみを取得して新たな配列としています。4行目は、mapで作られたstringの配列をいい感じの見た目に編集しています。