学習記録2024.11.16
Posted date at 2024-11-16
開発チーム向けに、直近の学習内容を共有します。また、デプロイしたものはアプリも載せています。
なお、動画はすべてハンズオンし、気になった点は自分で調べたり、手を加えたりしています。また、お礼とコメントをするように心がけています。
🚀Next.js
🐡NextjsとSupabaseによる高性能Web開発
Next.jsとSupabase(PostgreSQL）のアプリケーション開発を通して、ISR、SSR、SSGの挙動を詳しく学びました。Next.js12で現在のAppRouterとは異なりますが、オリジンサーバ、エッジサーバでの実行の仕組みやレスポンスの違いなどを詳しく学べました。Vercelの場合SSRがAWSのラムダで実行されているのが印象的でした。また、SupabaseもFirebaseと同じように、レコードのアクセス権をコンソール上で定義できるとこが分かりました。Webhookによる通知も送ることができ、Firebaseの代替として導入できそうだと考えています。
〇ハンズオンで制作したアプリ（ユーザ認証付きのTodoアプリ）
〇ハンズオンで制作したアプリ（ユーザ認証付きのNoteアプリ）
🚀フロントエンド
🐡Zustand（状態管理ライブラリ）
これまで状態管理ライブラリは、useContext、Recoil、Reduxと学習し、プロジェクトではRecoilとReduxを使用してきました。しかしながら、それらよりも軽量で、パフォーマンスも良い（しかも日本人が開発した）ライブラリであるZustandを学びました。
日本人の動画はなかったため、初の海外エンジニアの動画で学ばせていただきました。Zustandは次回のプロジェクトから使用します。
🐡Zustand React State Management Course (Simple Redux Alternative)
ReactにおけるZustandの使い方を学びました。看板ボード（DNDで移動するやつ）を制作しました。
〇ハンズオンで制作したアプリ（看板ボード）
🐡Global State Management in NextJs 14 Using Zustand
上記の動画にインスパイアされた方の動画でNext.js+TypeScriptによるZustandの使い方を学びました。この動画を機に次のプロジェクトでの使用を決定しました。
〇ハンズオンで制作したアプリ（看板ボード）
🐡React
以下の動画でオーディオの取り扱い方やuseRefについて理解を深めました。Swiperでも切り替えれるようにカスタマイズしてみました。
🐡60分Reactでお洒落なミュージックプレイヤーを作ろう！
〇ハンズオンで制作したアプリ（ミュージックプレイヤー）
🐡CSS
CSSについて、以下の動画で学びました。CSSは奥が深く、数が多い印象です。いつも使用しているけど、理解の解像度が低いもの、初めて知るものが多くあります。今回はフレックスボックスについて、知識の補完を狙いました。
🐡コーディングが楽になる知っておくと便利なCSS10選
🐡**【CSS/コーディング解説】Flexbox（フレックスボックス）を徹底解説 vol.1**
🐡Global State Management in NextJs 14 Using Zustand
🚀まとめ
こちらの学習法のインターリービングを意識しながら、学んでいます。どこかでRDBとSQLをしっかりと学びなおしたいと考えています。
CSSはアプリの顔・スタイルなので意識的に学んでいます。
←ホームに戻る