スマレジのテックファーム（SES 部門）で Web 系エンジニアとして働いている やまて（@r_yamate） と申します。
2023 年 4 月からは、スマレジの関連アプリの開発業務を担当しています。触ったことのなかった Flutter での開発を担当（そして React も…）することになり、日々奮闘中です。開発しているアプリはモニター利用も始まり、開発の醍醐味を味わえていて楽しいです。
はじめに
業務で必要になったため、React に入門します。
フロントエンドの実務経験は無いので、効率的にキャッチアップして、いち早く実務でタスクをこなせるよう、React 学習ロードマップを作ります。
目次
- はじめに
- 学習ロードマップの対象者
- ロードマップの目的地
- 学習方針
- 私のための React 学習ロードマップ
- step1. React の全体をハンズオンで把握する
- step2. React で簡単なアプリを作成する
- step3. React で TODO アプリを作成する
- step4. React で簡単な個人開発を行う
- おわりに
学習ロードマップの対象者
私です。（笑）
自分用の学習ロードマップですが似たような状況の方がいらっしゃれば、こうやってる人もいるんだなー、という参考程度で読んでいただけますと幸いです。
ちなみに現状の私
React での機能実装のための調査や簡単なバグ改修は先週からぼちぼち始めており、「全然わからん！…」「JavaScript 自体も基本文法すらわからなさすぎてヤバい！…」というのがこの文字を打ち込んでいる今（2023/10/28 12:11）の状態です。
ロードマップの目的地
React に入門して、私が目指している状態は、 現在参加している React のプロダクトで必要な実装をできるようになっている状態 です。
学習方針
プログラミング学習時は基本的には、
理解する → 手を動かしてみる → 作ってみる
という流れを念頭に置いて取り組んできました。今回もその流れで取り組みます。
実務では 理解する ステップをすっ飛ばして、作ってみる ステップに入っているので、具体的な実装をする際に基本的なことまで調べながら進めている状態です。
その状態は非効率だと感じているため、プライベート時間は 理解する ための基礎学習を中心にすることにします。
基礎学習でも実践は意識して、受動的な学習ではなく、手を動かしてみる → 作ってみる ステップを多めにして能動的な学習につなげます。
とはいえ、実務ではすでに担当するチケットがあり、それ自体は最高の 作ってみる ステップがある（実務に勝る学習は無し！）とプラスに考えて、なるべく実務とシンクロするような学習ができたら理想です。
私のための React 学習ロードマップ
step0. 学習ロードマップの記事を読む
まずは、先人の知恵を借りるため、ロードマップに関連する記事を探して読みます。
学習ロードマップの参考記事
記事を読んだ中で、この記事のロードマップそのままでいいかな、と思いました。
記事の中では、以下の 4 ステップが推奨されています。
1. React の全体をハンズオンで把握する
2. React で簡単なアプリを作成する
3. React で TODO アプリを作成する
4. React で簡単な個人開発を行う
この 4 ステップをベースにさせていただこうと思います。
3 ステップまでが必須で、4 ステップ目は実務での実装に変更する感じになるかもしれません。
教材選びの参考記事
以下の記事を教材選びのベースにしました。
step1. React の全体をハンズオンで把握する
記事でも大体の方が紹介されていた以下のおすすめハンズオン教材に取り組みます。
Udemy がちょうどセール中なので、とりあえずポチります。
（前から評判は聞いている教材だったので他教材との比較等の吟味なしで行きます）
補足、というか脱線ですが、 Udemy でポチる時には「モッピー」というポイ活アプリで、購入額の 10 %前後ポイント還元されるのでいつもこちらを経由しています。
今回は 8 %還元だったので、購入額 3,200 円の 8 % である 256 円分のポイントが貯まります。
貯めたポイントはいろんなポイントなどに交換できます。
話は戻して、
この2つを合計2日でやりきるのが良いと思います。
と「0からReactを勉強するならこのロードマップに従え！」の Qiita 記事にもあるので、とりあえず 2 日でやりきります。と言いたいところですが、一つの教材で 5 〜 10 時間はかかりそうなので、自分が捻出できる可処分時間の中で時間を確保して、焦らず進めます。
あと、なるべく早く「作ってみる」段階に以降した方がいいので、青い方だけやって、step2に進んで、黄色い方はとりあえず移動中の試聴に回します。
ついでに公式ドキュメントのチュートリアルも軽く読んでみたけど、良さげ。step1は最小限にするため、一旦パス。
参考にした記事で紹介されていた以下の 3 つの YouTube 動画を、補足として移動中などに 2 週間の間で全部試聴します。
【React Hooks入門】完全初心者OK！8種類のHooksを学んでReactの理解を深めよう https://t.co/eNNHFJvGq5 @YouTubeより
— やまて｜Web系エンジニア2年目 (@r_yamate) 2023年10月31日
通勤中に視聴。めっちゃわかりやすかった☺️
いくつか見たけどめっちゃわかりやすいです。
step2. React で簡単なアプリを作成する
この記事で紹介されていた以下のアプリか、それに近いレベルのものを作ってみようと思います。
作成するもの : 画像ランダム表示サイト
https://source.unsplash.com/random
にアクセスするとランダムで
Unsplashから画像を取得できるので画像を表示するここでボタンをクリックすると画像が切り替わる
たったこれだけのアプリを作成します。
最初に大きなアプリケーションを作ろうとすると、知識不足経験不足でつくりきるのは大変なので、アプリ自体の作成難易度を極端に落としたものを作ります。
ちなみにこのお題 1 つ躓きポイントがあるのでぜひ頑張ってみてください！
ここでのアプリは若干実用性には欠けますが
- ランダムの画像にボケて共有するSNS
- ランダムな画像を毎日プロフィールの写真に設定してくれる
などのすこし面白そうなアプリに学んだことを応用することは可能かと思います。
step3. React で TODO アプリを作成する
step2 と同じく、記事で紹介されていた以下のアプリか、それに近いレベルのものを作ってみようと思います。
作成するもの : 勉強記録アプリ
ユーザーは以下の項目をアプリに記録できます。
- 勉強したこと/もの (タイトル)
- 勉強した内容 (詳細)
- 勉強した日付
動画で作成したものにちょっと手を加えるだけですが、手を動かして勉強するならすこし難易度があがりよいかと思います。
step4. React で簡単な個人開発を行う
step2, 3 と同じく、記事で紹介されていた以下の条件でアプリを作ってみようと思います。
ここまできたらやっと実力試しの簡単な個人開発を 1 つ行います。
テーマは自由ですが以下のルールを 絶対守ってください
1. 1週間以内にできる規模のものを作る
2. そのアプリをちょっと実用性のあるものにする (何か課題を解決してくれる)
3. 極力いままで学んだことを生かして作る (新しい技術を使う試みは控える)
1は作りきるというのが最速に学ぶ上で大切だと思っているから
2は技術を学ぶ楽しさ→モノをつくる楽しさに移行してほしいから
3は作りきるために新しいことでつまづいてほしくないから
このような理由です。
またこのフェーズになったら実装の壁打ちを ChatGPT と行ったり、Github Copilotを活用したりしてよいかなと思っています。コードの意味を理解したうえで活用していきましょう
以下は私がステップ4で作成した例になるので、作るものが浮かばない方は同じものを作ってみてください
(一部バックエンドもありますが、そこは静的にデータをReactでもってみてください)
おわりに
React に入門したため、効率的にキャッチアップして、いち早くタスクをこなせるよう、学習ロードマップを作りました。
なお、個人のスキルのことだけを考えたら Flutter を集中して学習していこうと考えていましたが、実務で React のコードを書けるなら全然 OK です。フロントエンドに突き進まないとしても React を頑張っておくのは無駄にはならないと思っています。
React の基礎を身につけるための猶予は 2 週間として、ガッツリ React と向き合います。今回作った学習ロードマップに沿って進めて、次回以降のブログ記事で、結果（もしくは進捗）について、書こうと思います。
ありがとうございました。
参考リンク
こちらの@Udemyコースはいかがでしょうか: 【世界で70万人が受講】Web Developer Bootcamp 2023（日本語版） https://t.co/d5q0FT7PrC
— やまて｜Web系エンジニア2年目 (@r_yamate) 2023年11月1日
ボリュームすご。今すぐやるつもりはないのにポチってしまった☺️
ちなみにこの教材もめっちゃ気になってポチった。
