React学習ログ【React学習ログ2】Keyについて調べまくって役割を言語化してみた2023年4月4日Reactを勉強し始めた方にとってはデータをリストで表示させる時には「key」を持たせる必要があるということは知っていると思います。本記事ではなぜkeyが必要なのか、keyがなければどのような挙動になるのかを動画などを用いて解説します😌では早速解説を始めていきます。結論:keyを使うことで情報更新の必要な箇所を絞らせ効率的に更新できるようになるこれ以降は結論に至るまでの検証内容となります。Reactでコンポーネントを使い、リストでデータを表示させるとき”何もしなければ”下記のようなエラーが出ます。Reactはデータをリストで表示させるという観点では、特別なコンセプト持っています。それは「Reactがリスト内のデータの更新や表示をバグやWebパフォーマンスを落とすことなく効率的にできるようにすることを明確にする必要がある」です。上記のエラーはこのコンセプトに反しているために起きたエラーです。具体的に今の状態ではどんな問題があるかをみてみましょう。先に今回のサンプルコードをお見せします。ReactDev;実装内容はざっくりと下記の内容です。1DUMMY_DATAをリスト表示させる2フォームにテキスト入力3テキスト内容をリストの一番上に表示させるこんな感じです↓ここからが重要なのですが、実際に動かしてこの挙動をChromeの検証ツールで確認してみます。下のリストタグに注目してください。リストタグが一番下に一瞬点滅して追加されました。Chromeの検証モードでは情報が追加もしくは更新された時に点滅するようになっています。新しく追加したテキスト情報はリストの一番上にきています。?この現象は検証ツールでリストタグを広げた状態で見ると理解しやすくなります。先ほどと同様に一番下にリストタグが点滅しながら追加されたのと、さらに各リストタグの子要素である全てのh2タグが点滅し情報が更新されました。現在のソースコードでリスト内のデータを更新しようとすると、次の2つのステップが発生します。STEP1:リストの一番下にリストタグを新しく追加するSTEP2:新しいリストをもとに各h2タグの中身を上から順番にデータを書き換えるこの方法でデータを読み取るのは効率的ではありませんが、仕方ありません。配列データが一つ増えただけとはいえ、”何もしなければ”、Reactは新たな配列とみなし頭からデータを読みとりにいき変更点の更新を行います。Reactには情報更新の必要な箇所を絞らせ効率的に更新する方法があります。それが「key」です。keyを使うことで、Reactにどこに新しいデータが追加されるかを教えることができ、各データを個別で把握させることができるのです。注意点としてそれぞれのkeyにはユニークな値を入れなければなりません。keyを記述した新しいコードはこちらです。ReactDev;変更点はこちらです。各データのkeyをユニークにしているのはこの部分です。実際にkeyを入れることでどのように変わるかみてみましょう。今回は一番上のリストタグの上に新たなリストタグが点滅して追加され、それ以外の要素は点滅しなくなりました。これはつまり新たなリストタグだけが追加されたということです。最初にできてたエラー文はなくなりました。keyを使っていない時との比較はこちらです。更新を必要な箇所に絞ることによって無駄な変更をなくしサイトのパフォーマンスを最適化できます。今回はデータ量が少ない例で行いましたが、大規模なアプリではデータ量も多くなるためkeyを使わなければアプリのパフォーマンスにも影響が出てしまいます。そもそもデータをリストで表示させるときにkeyなしではエラーで出てしまうので、ぜひ使っていきましょう。今回の記事が少しでも皆さんの理解につながっていると幸いです。最後に一般のエンジニアがどのように言語(今回はフレームワークになりますが)を学習し、つまずき、乗り越えていっているのかを垣間見えるようにしていこうと思います。これからプログラミングを学ぼうと考えている方の為になる発信をできれば思いますので、温かい目で見てもらえると嬉しいです。今回学習のメイン教材として使うのは、Udemyのコースになります。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。Toolkitについて実装を交えながら解説します。React学習ログ【React学習ログ4】Reduxをどう理解したかを解説|図解あり私がReduxをどう理解したかを解説します。Hooksの一つのuseContext()について詳細に解説いたします。Hooks基礎】useRefを理解するフロントエンドエンジニアYamato(やまと)7年目のフロントエンドです。サンフランシスコ留学の際にITの素晴らしさに触れエンジニアになると決心。独学で未経験からアルバイトで採用され入社。経験し2022年8月に独立しました。HTML/CSS・JS・WordPress・Shopifyを触っています。YAMATOdevlog。