
しまぶーのIT大学
チャンネル登録者数 12.1万人
1.1万 回視聴 ・ 177いいね ・ 2022/12/25
【Next.jsで学ぶReact講座 #17】useMemoの使い方、useRouterの使い方
参考: qiita.com/suin/items/a44825d253d023e31e4d
第1回: • 【Next jsで学ぶReact講座 #1】Reactを学ぶにはNext....
第2回: • 【Next jsで学ぶReact講座 #2】コンポーネントの作り方と、Ne...
第3回: • 【Next jsで学ぶReact講座 #3】Propsを使ってコンポーネン...
第4回: • 【Next jsで学ぶReact講座 #4】Propsに色んなデータを渡し...
第5回: • 【Next.jsで学ぶReact講座 #5】CSS Modulesを使うと...
第6回: • 【Next.jsで学ぶReact講座 #6】Linkコンポーネントを使って...
第7回: • 【Next.jsで学ぶReact講座 #7】コンポーネントを繰り返すときは...
第8回: • 【Next.jsで学ぶReact講座 #8】jsとjsxどっち?ディレクト...
第9回: • 【Next.jsで学ぶReact講座 #9】クリックイベント(onClic...
第10回: • 【Next.jsで学ぶReact講座 #10】useEffectとライフサ...
第11回: • 【Next.jsで学ぶReact講座 #11】useStateの状態管理に...
第12回: • 【Next.jsで学ぶReact講座 #12】useEffectやuseC...
第13回: • 【Next.jsで学ぶReact講座 #13】useStateで文字列(s...
第14回: • 【Next.jsで学ぶReact講座 #14】イミュータブルや破壊的メソッ...
第15回: • 【Next.jsで学ぶReact講座 #15】Custom Hooks(カ...
第16回: • 【Next.jsで学ぶReact講座 #16】Stateのリフトアップでペ...
第17回: • 【Next.jsで学ぶReact講座 #17】useMemoの使い方、us...
🚧 バージョン違いにご注意ください
講座内ではReactはv17.0.1、Next.jsはv10.0.8を使用しております。現行より古いバージョンですが動画内のコードはほとんど問題なく動作しますし、お伝えしている内容は現在でも使う知識ばかりなので学習には支障ありません。もし動かない場合は、公式ドキュメントを参考に各自で修正してください。よかったら修正方法をコメント欄で教えていただけると嬉しいです。
またNext.jsドキュメントやVercelなどの各種サービスもUIが一部変更になっていたりします。ただ実現できること自体は変わりませんので、各自で新しい方に置き換えて進めていただけますと幸いです(これも良い学びになります👍)。
🐙 コード
オンラインサロン限定となっております。
オンラインサロン → it-kingdom.com/
・React, TypeScript, テストなど100本以上の講座(今も更新中)
・月に最低2回以上のライブコーディング講座
・月に最低1回以上のオンラインイベント
・毎日開催されるもくもく勉強会
・毎日のニュースシェア会(ITラジオのパワーアップ版)
・私にいつでも質問・相談できる環境
・チーム開発など他にもたくさんのコンテンツ
・2日に1回、新規の方向けの説明会もあります
エンジニアを目指す方や一緒に勉強する仲間を作りたい方にオススメです!
みなさんと一緒にスキルアップできるのを楽しみにしています!😊✨
📙 もくじ
0:00 今日やること
0:53 countをただ2倍してみる
1:51 doubleCountでただ2倍してみる
4:03 useMemoで実現してみる
6:12 useMemoやuseCallbackの使いどころ
8:09 useMemoでの変更点をコミット
9:05 useRouterでのやり方を説明
10:05 routerの値をlogで見てみる
10:57 三項演算子を使って実現
13:25 useMemoを使ってもおもしろい
14:56 switch文で書いてみてもおもしろい
16:31 useRouterでの変更点をコミット
17:49 リファクタリング開始
18:14 関数宣言とアロー関数について
19:29 私がアロー関数を好んでいる理由
20:46 私がpropsをそのまま使う理由
23:21 正解は自分で考えて探すべき
24:16 リファクタリング続き
24:44 someからincludesに書き換え
26:35 リファクタリング続き
30:00 GitHubにpush & Vercelにデプロイ
👨💻 自己紹介
ヤフー株式会社でプログラマーとして働いていました!
現在は起業家として新規サービスを開発中です!
下記に興味がある方はチャンネル登録をおねがいします!
・IT業界、Web系、プログラミング講座
・リモートワーク、在宅勤務、副業
・スタートアップ、ベンチャー、経営者、社長
🌏 SNS
Twitter: twitter.com/shimabu_it
Instagram: www.instagram.com/shimabu_it
Voicy: voicy.jp/channel/1886
しまぶーのスプラ大学: youtube.com/@spla
🏷️ タグ
#React #React入門 #NextJS
コメントを取得中...