Reactでリストを作成する前に、JavaScript でリストを変換する方法についておさらいしましょう。 以下のコードでは、map() 関数を用い、numbers という配列を受け取って中身の値を 2 倍にしています。map() 関数が返す新しい配列を変数 doubled に格納し、ログに出力します: このコードはコンソールに [2, 4, 6, 8, 10] と出力します。 React で配列を要素のリストに変換する方法は上記に似ています。 複数のコンポーネントをレンダーする 要素の集合を作成し中括弧 {} で囲むことで JSX に含めることができます。 以下では、JavaScript の map() 関数を利用して、numbers という配列に対して反復処理を行っています。それぞれの整数に対して <li> 要素を返しています。最後に、結果として得られる要素の配列を listItems に格納しています: そして、listItems という配列全体を <ul> 要素の内側に含めます: このコードは、1 から 5 までの数字の箇条書きのリストを表示します。 基本的なリストコンポーネント 通常、リストは何らかのコンポーネントの内部でレンダーすることをが実用的です。 前の例をリファクタリングして、numbers という配列を受け取って要素のリストを出力するコンポーネントを作ることができます。 このコードを実行すると、「リスト項目には key を与えるべきだ」という警告が表示されます。“key” とは特別な文字列の属性であり、要素のリストを作成する際に含めておく必要があるものです。なぜ key が重要なのかは後に説明します。 numbers.map() 内のリスト項目に key を割り当てて、key が見つからないという問題を修正しましょう。 Key Key は、どの要素が変更、追加もしくは削除されたのかを React が識別するのに必要になります。配列内の項目に安定した識別性を与えるため、それぞれの項目に key を与えるべきです。 Keyはリレーショナルデータベースでいうプライマリーキーと同じイメージになります。いわば、ユニークなIDのことです。これで同じデータ(例:”田中さん”、”田中さん”)が複数あってもどのデータを指しているのかを判断できるようになりますね。 データ間でその項目を一意に特定できるような文字列を key として選ぶのが最良の方法です。多くの場合、のデータ内にある ID を key として使うことになるでしょう: レンダーされる要素に安定した ID がない場合、最終手段として項目のインデックス(順番)を使うことができます: 要素の並び順が変更される可能性がある場合、インデックスを key として使用することはお勧めしません。パフォーマンスに悪い影響を与え、コンポーネントの状態に問題を起こす可能性があるからです。もし明示的に key … Read more