PROGRAMMING

Listとkeyについて【React.js】

今回はmap() 関数を用いて、配列を受け取る際にKeyをなぜいれる必要があるのかという部分に疑問をもったので、メモ的な感じでやっていこうと思います。

今回やることは下記にまとめてあります。

この記事でわかること
・配列について
・mapメソッドとは
・Keyがなぜ必要なのか
・Keyにindexをいれてはいけない場合について

こんな感じでmapメソッド配列(List)Keyについてやっていきます。

参考文献

配列について

まずは軽く配列についてやっていきます。

配列はリストのようなオブジェクトであり、そのプロトタイプは配列に対して横断的な操作や変更を行うメソッドを持っています。 JavaScript の配列は、要素数も要素の型も固定されていません。配列の長さは常に可変であり、データを連続しない位置に格納できるため、 JavaScript の配列は密であることが保証されていません。これはプログラマーの使い方次第です。一般に、これらは便利な特性です。しかし、もし特定の用途で望ましくないのであれば、型付き配列を使用したほうが良いかもしれません。

配列は (連想配列のように) 要素の添字に文字列を使うことはできず、整数を使う必要があります。整数以外によってブラケット構文 (またはドット構文) を使用して設定やアクセスを行うと、配列のリスト自身の要素を設定したり取得したりすることはできませんが、その配列のオブジェクトプロパティ集合に関連付けられた変数に設定またはアクセスすることになります。配列のオブジェクトプロパティと配列リストの要素は異なり、配列の走査や変更の操作を名前付きプロパティに適用することはできません。

 難しく書いてありますが、要するにリストにして他のメソッドなどに渡しやすくするためのものと僕は考えています。

今回ウェブサイトの作成で使った配列は下記です。

export const menuData = [
  {title: "About", link: "/about"},
  {title: "Trips", link: "/trips"},
  {title: "Careers", link: "/careers"},
  {title: "Contact", link: "/contact"},
]

こんな感じでリンクしたいページを配列にして、他のファイルに渡します。

mapメソッド

配列ができたので、次は配列を呼び出すときに今回はmapメソッドを使います。

mapメソッドとは、、

mapは、与えられたcallback関数を配列の順番通りに、各要素に対して一度ずつ呼び出し、その結果から新しい配列を生成します。callbackは、値が代入されている配列の要素に対してのみ呼び出されます (undefinedが代入されているものも含みます)。

要するにmapメソッドを使うことで、配列を呼び出し、渡された配列lから違う新しい配列を作ることができるということですね。

先ほど作成した配列をmapメソッドを使って、下記のように呼び出します。

          {menuData.map((items, index) => (
            <NavLink to={items.link} key={index}>
              {items.title}
       </NavLink>

menuDataの値をmapメソッドの引数のitemsに渡します。

そのため、items.linkとすればmenuDatalinkの値を出力することができ、items.titleではmenuDatatitleを出力することができます。

そこで、なぜmapメソッドの中にindexがあり、keyに渡されているのか。なぜkeyが必要なのか。

この疑問についてやっていきます。

なぜKeyが必要なのか

Key は、どの要素が変更、追加もしくは削除されたのかを React が識別するのに役立ちます。配列内の項目に安定した識別性を与えるため、それぞれの項目に key を与えるべきです。

Keyがあることでその値が変化したのかどうかをわかりやすくするという役割があるということですね。

まだ少しわかりづらいので、下記のページも参考にします。

上記のコードでは2014Connecticutだけが新しく変化したものだとわかりますが、もしkeyがなければDukeVillanovaが同一のものか新しいものかどうかがわかりにくくなってしまいます。

つまり、keyがあることでいろいろな要素を識別することが簡単になるということです。

主にkeyにはidが入るとのことですが、もしない場合はどうすればいいのか。

もしkeyがない場合は、最終手段としてindexをkeyとして渡すことができるとのことです。

{menuData.map((items, index) => ( 

          {menuData.map((items, index) => (
            <NavLink to={items.link} key={index}>
              {items.title}
       </NavLink>

引数にindexをいれて、keyindexを渡すことで値の識別を効率的にできるということですね。

それでは、なんでもかんでもindexをいれてしまえばいいのかという疑問が出てきます。

Keyにindexをいれてはいけないケースを最後にやっていきましょう。

Keyにindexをいれてはいけない場合について

下記の3つの条件が揃っている場合、keyにindexを渡しても大丈夫とのことです。

  1. the list and items are static–they are not computed and do not change;
  2. the items in the list have no ids;
  3. the list is never reordered or filtered.

上記のを日本語訳にすると、

  1. 配列とitemが静的で、計算されず、変化がされないとき
  2. 配列の中のitemsがidを持っていないとき
  3. 配列の順番が入れ替わったり、フィルタリングされないとき

以上のことが満たされていれば、indexをkeyに安全に渡すことができるとのことです。

まとめ

今日はkeyについてやっていきました。

バックエンドの時は基本的にidがあるので、keyについて気にしたことはありませんが、今回のテーマについてはフロントエンド独特の問題なのかなと思いました。(違うかもしれないですけど)

今回のように疑問に思ったことを調べることってとても重要だなと思います。

特に、ブログでアウトプットもしているので、確実に身につきます。

同じような疑問や問題にぶち当たった方のためになれたら嬉しいですね。

最後まで読んで頂きありがとうございました。

-PROGRAMMING

Copyright © Iseblog ,@2020 All Rights Reserved.