はじめに
エンジニアのみなさま、日々の学習本当にお疲れ様です！
また本記事まで足を運んでいただき本当に感謝です。
約5分で読めるため、最後まで読んでもらえると幸いです。
案件でReactを使っています。現在はマネジメント業務を担当しているためコードを書くことはありませんが、少しでも開発メンバーの気持ちに寄り添える様に業務外の時間を使って学習をしてます。今までRubyやRuby on Railsなどのバックエンドの学習がメインだったため、フロンエンドの学習はほぼ皆無でした...
試行錯誤しながら学習を続けていき、個人的にしっくりきた学習方法をつらつら書いていきたいと思います。
インプット
朝の通勤時間、満員電車に苦しみながら初めのインプットとしてはReactの公式ドキュメントを読みました。
Reactの公式ドキュメントはサンプルコードがふんだんに使われています。また、チュートリアルとして「三目並べ」も掲載されており、ハンズオンで対応できる内容になっています。個人的には読みやすくて好きな公式ドキュメントです。
全体像をざっくり理解した後は、以下の順番でUdemyの以下講座の動画視聴にシフトしました。基本的にはハンズオンで対応できるものばかりですが、ここでは動画視聴のみとしてます。
Reactで「ポケモン図鑑アプリ」「ブログアプリ」「ノートアプリ」を実装する動画になります。認証機能やAPIフェッチング手法などを丁寧に解説してます。Reactの公式ドキュメントと同様、実装における全体像を把握するためにまずはこの動画を視聴しました。
JavaScriptとReactでそれぞれTodoアプリを実装してます。JavaScriptと比較して、Reactがどれだけ簡素に記述できるかが理解できる動画になります。加えて、JavaScriptの基礎の理解も深まるため、個人的にオススメです。
React実装における応用編。再レンダリングの最適化の方法やReact Routerを使った実践的な画面遷移の方法などが学べます。
アウトプット
インプットばかりしても知識が定着しないため、仕事から帰ってきたら手を動かしてアウトプットする習慣をつけました。
『困った時はToDoアプリだ！』
という事で、MDNで紹介されている以下サイトでまずはコードの写経をしてCRUDの基本的な考え方を理解しました。以下サイトで紹介している内容はReactのバージョンが古いです。今回は新しいバージョンで実装して、わざとエラーを出しながら古いバージョンとの書き方の違いやデバッグ手法も理解しました。
このサイトで作成できるToDoアプリの詳細は以下の記事でまとめてます。
時間があれば合わせて読んでみてください。
写経が終わったら、次は自力で実装していきます。
ChatGPTを活用して、コンポーネント実装の問題集を作成しました。以下添付の通り「初級10問」「中級20問」「上級20問」の合計50問を作成してもらい、現在1問ずつ対応してます。開発環境はCodeSandboxを活用してます。
弊社ではSlackを使っているため、個人チャンネルで実装結果の動画を添付してます。1つの問題が完了したらCodeSandboxのコードを削除して、次の問題のコードを1から実装していきます。コンポーネント実装は手軽に対応できて、且つ、コードを書く反復練習になるため、ゲーム感覚で楽しみながら進めている段階です。
50問をコンプリートした後は、クローンアプリを実装する予定です。
実装する上で、自分に足りていない部分を認識しながら、インプットで利用しているコンテンツを逆引き辞書的な使い方で活用していきたいなと考えています。あとはコードレビューをAIが実施してくれるCodeRabbit なるものも登場しています。コードレビューの観点でどの様な書き方があるかを理解しておく必要もあるため、こちらも活用していきたいなと考えてます。
さいごに
いかがだったでしょうか？
個人的には新しい言語をキャッチアップするときに、「公式ドキュメントを読む」 → 「実装の全体像が分かる動画を見る」 → 「実際に手を動かして理解を深める」→ 「不明点は公式ドキュメントを見直す」のループで学習を続ければ、必要最低限の理解ができると考えています。しかしながら、学習方法が完全に我流のため、他に良い学習方法があれば教えていただけると非常に嬉しいです...！
おまけ
弊社のご紹介もさせてください！
「日本で一番エンジニアが成長できる会社を創る」
エンジニアリングの募集
PM・Webディレクションの募集
セールス・事業開発の募集
コーポレート系の募集
コンサルティングの募集
弊社メンバーは日々学習した内容をアウトプットしております！
少しでもご興味を持たれた方は求人を見てみてください！
ご応募もお待ちしております！