第1回: https://youtu.be/15WLMqnkPsE
第2回: https://youtu.be/l9BY-uyZpGM
第3回: https://youtu.be/Ai9rMk5QbOo
第4回: https://youtu.be/XScsi491Yuc
第5回: https://youtu.be/5bI7nnrK8Q4
第6回: https://youtu.be/qrF3AbAx_9c
第7回: https://youtu.be/h4981N9af18
第8回: https://youtu.be/-W62SGQaOSI
第9回: https://youtu.be/-0OkztyAgaU
第10回: https://youtu.be/QWDTz8nhK28
第11回: https://youtu.be/aJTyIP4GVC4
第12回: https://youtu.be/yNIVF0Uw5aY
第13回: https://youtu.be/8u75d-qSzPY
今日は今までで1番難しいので気合を入れていきましょう。まずはmapの理解が必要なので、map構文の挙動などを完璧にしてください。その次にkey propsについて理解する必要があります。一意となるようにkeyを指定する必要があります。アプリケーション開発だとよく id（見られても良いもの）などを割り振ったりしますね。最後にHTMLエンティティについて。Reactのエスケープ（文字変換）処理はセキュリティのために行われますが、そのせいで動的なHTML Entitiesが使えない場面が出てきます。そのときの回避方法を今回で学びましょう！
🚧 バージョン違いにご注意ください
講座内ではReactはv17.0.1、Next.jsはv10.0.8を使用しております。現行より古いバージョンですが動画内のコードはほとんど問題なく動作しますし、お伝えしている内容は現在でも使う知識ばかりなので学習には支障ありません。もし動かない場合は、公式ドキュメントを参考に各自で修正してください。よかったら修正方法をコメント欄で教えていただけると嬉しいです。
またNext.jsドキュメントやVercelなどの各種サービスもUIが一部変更になっていたりします。ただ実現できること自体は変わりませんので、各自で新しい方に置き換えて進めていただけますと幸いです（これも良い学びになります👍）。
🐙 コード
オンラインサロン限定となっております。
オンラインサロン → https://it-kingdom.com
・React, TypeScript, テストなど100本以上の講座（今も更新中）
・月に最低2回以上のライブコーディング講座
・月に最低1回以上のオンラインイベント
・毎日開催されるもくもく勉強会
・毎日のニュースシェア会（ITラジオのパワーアップ版）
・私にいつでも質問・相談できる環境
・チーム開発など他にもたくさんのコンテンツ
・2日に1回、新規の方向けの説明会もあります
エンジニアを目指す方や一緒に勉強する仲間を作りたい方にオススメです！
みなさんと一緒にスキルアップできるのを楽しみにしています！😊✨
📙 もくじ
0:00 今日学ぶこと
1:08 アイテムを配列に格納
3:58 mapを使ってコンポーネントを繰り返す
6:19 mapのロジックを説明
8:27 mapで繰り返すメリット
9:34 データと処理を分けるのはリファクタリングの基本
10:57 key propsの必要性について
12:09 ReactのアップグレードでChromeのwarningを削除
13:27 key propsには一意のkeyを指定してね
13:48 HTML EntitiesとReactについて
15:50 動的なHTML Entitiesを書けないときの対策方法
17:51 GitHubにpush & Vercelにdeploy
👨💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました！
現在は起業家として新規サービスを開発中です！
下記に興味がある方はチャンネル登録をおねがいします！
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長
🌏 SNS
Twitter: https://twitter.com/shimabu_it
Instagram: https://www.instagram.com/shimabu_it
Voicy: https://voicy.jp/channel/1886
スプラトゥーンチャンネル: https://youtube.com/@spla
🏷️ タグ
#React #React入門 #NextJS