INFO:

第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 🚧 バージョン違いにご注意ください 講座内では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 Reactの特徴3つ 2:12 コンポーネントベースを図解（従来の開発） 3:12 コンポーネントベースを図解（React開発） 6:51 コンポーネントベースのメリット 9:17 コードがリアルタイムで反映されるか確認 10:09 Next.jsでの静的ページの作り方 12:35 今回やることの説明 13:11 next/headのHeadについて解説 14:33 コンポーネント化する部分の確認 15:13 Footerをコンポーネント化 18:32 Link集の部分をコンポーネント化 21:21 1箇所変更するだけで全て変更される良さ 22:31 VSCodeで変更点の差分を確認 23:40 Gitブランチに関して説明 24:57 Gitのコミットメッセージとgitmojiを紹介 26:11 ファイルを細かく分けてコミットしよう 28:06 実際にpushを行ってGitHub上で確認 28:55 コミット履歴を見てみよう 29:34 Vercelでデプロイされているか確認 👨‍💻 自己紹介 ヤフー株式会社でプログラマーとして働いていました！ 現在は起業家として新規サービスを開発中です！ 下記に興味がある方はチャンネル登録をおねがいします！ ・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