Reactの公式ドキュメントでGetting Startedを読むと、このような文章があります。
We recommend going through this JavaScript overview to check your knowledge level. It will take you between 30 minutes and an hour but you will feel more confident learning React.
意訳をすると「Reactを習得したかったら、JavaScriptも並行して学習してね！」と言ったところでしょうか？そういうわけなのでReactの学習を意識しつつ、JavaScriptの学習も進めていきましょう。今回は配列についてご紹介します。
配列について
配列を一言で説明すると、グループ化されたデータのことを指します。
[php]var score = [60, 80, 90];[/php]
例えば、テストの点数を管理したいときにはこのように管理します。”[]（大括弧）”は配列リテラルと呼び、それぞれの点数は要素と呼びます。
[php]
var scores = [60, 80, 90];
var score = scores[1];
console.log(score); // 80
[/php]
もし2番目の要素である80点を取り出したいときは、このように記述します。配列の要素番号は0から始まるため、2番目に位置する80点は、要素番号は”1″となります。
配列オブジェクト
上述したテストの点数では、自分で配列を作りました。PHPなど他のプログラミング言語でも同じような感じで自分で配列を作ることができます。ただしJavaScriptの場合、配列自体がオブジェクトになっているため、Arrayオブジェクトのさまざまなメソッドを使うことができます。
例えばmapメソッドは、配列内のすべての要素に対して与えられた関数を呼び出し、その結果を格納した新しい配列を生成します。
[php]
var scores = [60, 80, 90];
const double = scores.map((s) => s * 2);
console.log(double); // [ 120, 160, 180 ]
[/php]
上記の例ではArrayオブジェクトであらかじめ用意されているmapメソッドで、配列に格納されている各要素の数値を2倍にしています。mapメソッドの他にも、Arrayオブジェクトで使えるメソッドが用意されています。詳細については、公式ドキュメントを参考にしてください。
Reactで配列を扱う
[php]
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById(‘root’)
);
[/php]
コードはReactの公式ドキュメントから引用しました。
コードを実行すると上記の画像が表示されます。先述したJavaScriptのmapメソッドの使い方と同じです。mapメソッドの引数は、配列の数値についてそれぞれ<li>タグをつけて表示するように記述されています。ちなみに”<li>{number}</li>”はJSXの記法で、JavaScriptの式を波括弧に埋め込むことができます。
