魔法JS☆あれい 最終話「flatの、最高のflatMap」

登場人物

丹生（にゅう）あれい
魔法少女「魔法（マジカル）JS（女子小学生）☆あれい」として活動中。

イテレー太
正体不明の魔法生物。

第1部「ミューテーター・メソッド編」
* 第1話「popでpushした、ような……」
* 第2話「shiftはとってもunshiftって」
* 第3話「もうsortもreverseも怖くない」
* 第4話「fillも、spliceも、copyWithinもあるんだよ」

第2部「アクセサ・メソッド編」
* 第5話「joinなんて、concatなわけない」
* 第6話「indexOfなの絶対lastIndexOf」
* 第7話「includesのsliceと向き合えますか？」

第3部「イテレーション・メソッド編」
* 第8話「filterって、ほんとfindとfindIndex」
* 第9話「someなの、everyが許さない」
* 第10話「もうmapにもforEachにも頼らない」
* 第11話「最後に残ったreduceとreduceRight」

flat()

イテレー太「早いもので、今回でついに最終話だよ……」
あれい「短い付き合いだったな駄犬」
イ「だけど、戦いはまだ続いてるよ！　召喚したデータは第8話を参照してね！」
あ「おう」
イ「そして、最後の敵の弱点は、『記事で使われているすべてのタグ（tags）の一覧』だよ！　さあ、タグの一覧をreturnして敵を倒してよ！」
あ「最後まで面倒くせえなあ……」

return items.map(item => item.tags).flat();

あ「これでいいのか」
イ「さすがあれい、最後まで頑なに盛り上がりポイントを作らなかったね！　そして解説をお願い！」
あ「面倒くせえなあ……map() メソッドですべての記事にアクセスして、tagsの値を取得している。ただし、そのままだと……」

[
  [
    { name: 'JavaScript', versions: [] },
  ],
  [
    { name: 'JavaScript', versions: [] },
  ],
  ...
]

あ「このように階層化（ネスト）された配列が出来上がるので、flat() メソッドで配列をフラットにしているわけだ。その結果……」

[
  { name: 'JavaScript', versions: [] },
  { name: 'JavaScript', versions: [] },
  ...
]

あ「こういう配列が完成する」
イ「！！！　最終話にして、あれいが積極的に解説してるよ！　僕は感涙を禁じ得ないよ！」
あ「やかましい」

解説

flat() メソッドは、すべてのサブ配列の要素を指定した深さで再帰的に結合した新しい配列を生成します。

（MDNより）

flat()メソッドは、階層化（ネスト）された配列をフラット化するメソッドです。
なお、「フラット化する階層の深さ」を引数に指定することができます。既定値は1です。

flatMap()

あ「ちなみに、さっきのはflatMap()を使うとさらに簡単に記述できるぞ」

return items.flatMap(item => item.tags);

イ「あ、あれいの様子が今までと違うよ！　僕の知らないうちに世界が再構築されたんだろうか！？」
あ「うるせえしばくぞ」

解説

flatMap() メソッドは、最初にマッピング関数を使用してそれぞれの要素をマップした後、結果を新しい配列内にフラット化します。これは深さ 1 の flat が続く map と同じですが、flatMap はしばしば有用であり、2 つのメソッドを 1 つにマージするよりもやや効果的です。

（MDNより）

まさに名前の通りflat()＋map()なメソッドです。配列内のすべての要素にmap()メソッドと同様にコールバック関数を実行し、その結果をフラット化した配列にして返します。

エピローグ

……というわけで、魔法（マジカル）JS（女子小学生）☆あれいの物語はこれで完結です（すべてのメソッドを網羅できたわけではないですが）。JavaScriptで配列を操るメソッドの面白さと奥深さ、少しでも伝われば幸いです。お付き合いありがとうございました。