この記事の対象者
・map関数「何それ?地図?」というくらいに、map関数と初対面の方
・なんか先輩に、「とりあえずmap回しとばいけるから回しといて〜」と言われるも、何のことかわからず目が回って困っている方
・for文やwhile文など使わずに、すっきりかつ少ないコードで繰り返し処理を実装したい方
Reactの開発やPJで、
「何がしかの配列や、APIで取得した配列情報を、展開してね」
というよくある課題。（逆に使わないことの方が多いくらい？）
JavaScriptやReactのPJ経験のある方には当たり前のうちの当たり前です。
しかし、
「JavaScript何にもわからんけど、React始めたよ。」
系の人にとっては、未知との遭遇案件ですよね。
なので、めちゃくちゃシンプルバージョンでここに残しておきますね。
僕自身、jQueryやVue、Reactから触り始めたたちなので、初めてJavaScriptのmap関数を扱った時に、ただひたすらに鼻水なのか涙なのかを垂らしながら、取り組んでいた記憶がありますので。
なんか、展開とかいう感じ二文字で表現されると、なんだか初心者には難しく、夢にまで出てくるほど恐ろしいものかと思いますよね。
けれども、ヒジョーにシンプルなので、今一度型の力を「ふぅ〜」と抜いて、読んでもらえたらと思います。
あ、ちょっと半笑いくらいでやるのがちょうどいいと思います。（一人の時に限る）
☆合わせて読みたい
結論 （map関数のかんたんな使い方 〜かるーく展開とやらをお披露目〜）
React。
というかJavaScriptのmap関数というものがあり、配列を一つずつ取り出して表示などができる便利な関数を使います。（より詳細は公式へ）
map関数の仕組みが理解しやすいようになるったけ、シンプル配列を展開すると以下のような感じになりますね。
※keyの箇所については、1個1個展開されるものがユニーク（唯一）である必要があります
const testArrayNumbers = [1, 2, 3, 4, 5];
const testNumber = testArrayNumbers.map((number, index) => (
<p key={index}>{number}</p>
));
export default function App() {
return <div className="App">{testNumber}</div>;
}
ブラウザで見た感じは、以下で確認できます。
上記のような感じで、配列のtestArrayNumbersにmap((number, index))をして、returnで返してあげるだけ。
すると、、なんということでしょう、配列の中身を一つ一つ取り出すことが、かんたんに実現できました。
（ここでbeforeafterのイメージソングが流れる）
map((number, index))の中身についても、一つずつ見ていきますね。
numberは何者？
const testArrayNumbers = [1, 2, 3, 4, 5]; の中身1つ1つ。
indexは何者？
配列のindex番号（0から始まる配列の番号 今回のケースだと0,1,2,3,4）
あれですね、配列の中身を見たり、取り出したりする時に、testArrayNumbers[0]みたいにする時のアレ、ですね。
これをreturnしている
<p key={index}>{number}</p>
//実務では、indexではなく、mapで回す要素のidを使うことが多いですね
のkeyの中身に当てることで、重複しない要素ですよー、っていうのを認識してもらいます。
keyを設定しないと、TypeScriptだと確実に、ガン詰めされてしまいますし、JavaScriptでもコンソールに警告が出る気がします。
こちらについても、ご自身の画面で、あえて間違いのパターンも試してみて、どんな感じになるのかをみて見るものも勉強になるかと思います。
今回は一例としてやっていますが、実際の所はindexじゃない方が良いと思います。
なぜなら、indexは配列の中身が削除されたり、変更されたりすると、対応する値が変化する可能性があるから。この記事では深堀はしませんが、需要があれば、かんたんに、別記事でまとめようと思います。
以上、めちゃくちゃカンタンに、map関数を説明させていただきました。
おそらく頭の中では、なんとなく理解していただけましたかね？
最後にお伝えしておきたいのは、とにもかくにも手を動かしてみて、ご自身でもmapを体感されてみてください。
頭でわかっていても、いきなり実務でやれ！と言われた際に対応が難しいと思うので、自分のペースでゆっくりとあーだこーだ考えたり、感動したりしておくと、自分の身になり、いざとなった時に、比較的に楽に対応できるかと思いますので。
ここまで読んでいただき、ありがとうございました！
あなたと私のJSライフに幸あれ。