Reactの魔法のループ

こんにちは。今回は、ReactでデータをUIに変える、魔法のループとも言える.mapメソッドについて見ていきます。 これはReact開発の基本中の基本ですが、非常にパワフルなテクニックです。一緒にその仕組みを解き明かしていきましょう。 今回は、このような流れで進めていきます。まず、料理でいう材料、つまりデータ配列から始めます。 そして、それを変身させる変換マシンである.mapを紹介します。 その後、このマシンをさらにパワーアップさせるための重要なアップグレードについて学び、実際に工場がどう動くのかを見ていきます。 最後に、このマシンを完璧に使いこなすためのコツを伝授します。 ウェブサイトでよく見る、友達のリストや商品のリスト、ニュース記事のフィードなど。ああいう動的なリストは、実は全て、シンプルなデータの集まりであるJavaScriptの配列から始まっています。 例えば、APIから取得したユーザーリストを想像してみてください。太郎、花子、次郎と名前が並んでいるだけの、ごくごく単純な配列です。 私たちのゴールは、このデータを使って画面にユーザーのリストを表示させることです。 さて、ここが問題です。この配列に入っているデータが、3つでも100個に増えても、自動で画面にリストとして表示させたいのです。 1つ1つ手作業でコードを書くのは現実的ではありません。では、どうすれば良いのでしょうか？ さて、この課題を鮮やかに解決してくれるのが、今回の主役、変換マシンです。これは実はJavaScriptに元々備わっている、ものすごくパワフルなメソッドなのです。 その名は.mapメソッド！これが私たちの魔法の杖です。 何をするかというと、配列の中身を1つずつ取り出してきて、私たちが指示した通りに加工してくれます。そして、それを全く新しい配列として返してくれます。便利ですよね。 まさにこのイラストが.mapの働きそのものを表しています。左から生のデータが入った箱がベルトコンベアに乗って流れてきます。 真ん中にある.mapというマシンがそれを1つずつ処理し、右側からは画面に表示できるUIコンポーネントという完成品になって出てくる。見事な自動化工場だと思いませんか？ よし。ではこのコードを動かしてみよう、と思いますよね。しかし、そうするとReactの工場長のような人から「ちょっと待った」と声がかかるのです。 実は、ものすごく大事なルールが1つ欠けているのです。開発者コンソールを開くと、おそらくこの警告メッセージに遭遇するはずです。「リストの各要素はユニークなキーを持つべきです」と。 これはエラーではありませんが、Reactが「もっと効率よく仕事したいから、少し手伝ってくれないか？」と私たちにサインを送ってくれているのです。 では、なぜこのキーが必要なのでしょうか。Reactは、画面を更新する時に、どこが変更されたのかを素早く見つけなければなりません。 このキーは、例えるなら商品についているバーコードのようなものです。これがあれば、どの項目が追加されたのか、削除されたのか、順番が変わったのかが一瞬で分かります。だからパフォーマンスがすごく良くなるのです。 ここでの鉄則は、もうこれだけです。キーには、データベースのIDのように、絶対に他のものと重複せず、変わることのない安定した値を使いましょう。 配列のインデックス、つまり順番をキーにするのは、ついやりがちですが、後でリストの並び替えなどをした時に、予期せぬバグの原因になるため、本当に最後の手段だと思ってください。 さて、理論はここまでにしましょう。ここからは、実際のアプリ開発でよくあるケース、つまりAPIからデータを取得して、この工場を本格的に動かしてみましょう。 実際のデータの流れは、大体この4ステップです。まず、UFXという仕組みを使ってAPIからデータを取得します。 次に、取得したデータをuseStateという、データをしまっておく箱に保管します。 そして、いよいよ私たちの.mapの出番、画面に描画します。最後に、パフォーマンスの鍵となるユニークなキーを割り当てます。 この流れを覚えておけば、もう完璧です。最終的なコードは、このような形になります。 すごくエレガントですよね。動的に取得したデータソースを、こんなにすっきりした形でUIコンポーネントのリストに変えられるのです。 posts.mapという形で、取得したデータをマッピングしていくと。さあ、最後に、この変換マシンを完全にマスターし、常に最高のパフォーマンスを引き出すためのベストプラクティスと、よくある落とし穴について確認しておきましょう。 これを抑えれば、あなたもリスト描画の達人です。この中心的なルールは、もう心に刻んでください。キーはユニークで、かつ安定していること。これは絶対です。 そして、キーを設定する場所は、.mapの中で作られる要素の一番外側のタグです。この2つを守るだけで、本当に多くの問題を防げます。 あと、これらのよくある落とし穴にも気をつけてください。特に、リストの順番が変わる可能性があるのに、インデックスをキーに使ってしまうのは、本当によくある間違いです。 それからもう1つ。複数の要素をグループ化するフラグメントにキーをつけたい時、空の<></>という省略形にはキーをつけられないので、 <React.Fragment key={item.id}>とちゃんと書く必要があること。これも忘れがちなので注意してください。 これで.mapを使ったリスト描画の基本はばっちりマスターしましたね。しかし、考えてみてください。もしこのリストの項目が10個や20個ではなく、1万件になったらどうしますか？ その時こそパフォーマンスチューニングの出番です。ページネーションや仮想スクロールなど、さらに高度なテクニックがあなたの次の挑戦を待っています。 今回の解説は以上です。ありがとうございました。