Reactを最低限理解するまでの過程
はじめに
フィヨルドブートキャンプ Part 1 Advent Calendar 2023 - Adventar
の22日目の記事です。
フィヨルドブートキャンプ Part 2 Advent Calendar 2023 - Adventar もあります。
素晴らしい記事盛りだくさんなので、みなさん是非、フィヨルドブートキャンプのアドベントカレンダーをクリックしてみて下さい！
Reactを学習する必要性
はじめまして。
FJORD BOOT CAMP（フィヨルドブートキャンプ）を昨年卒業したclio209です。
フィヨルドブートキャンプの卒業課題を、主にRubyonRailsでバックもフロントも作りました。が、訳あって、そのアプリを拡張することになり、バックはRails APIモード、フロントをNEXT.js、データのやり取りはGraphQLを使用することとなりました。
それで、急遽、React周りの知識をキャッチアップする必要に迫られたのですが、フィヨルドブートキャンプで学んだのはJava Scriptの基本とVue.jsの基本のみ。どうやって学習しようか悩み、悩んで色々と試行錯誤してしまいました。
なので、未来の自分への記録の意味も込めて、実際の学習変遷と、こうしとけばよかったバージョンを記載したいと思います。（現在、フィヨルドブートキャンプのカリキュラムにReactがあるとのことなので、そちらを行うのがベストチョイスです！）
自分が行った学習変遷
自分は当時いろんな情報に当たりながら以下の順番で学習しました。
- モダンJavaScriptの基本から始める React実践の教科書 を読む、コード書く
- りあクト！1〜2を読む、読みながら適時コード書く
- Reactの公式チュートリアルを読む
- ドットインストールでReact入門を見て、動かしてみるがイマイチしっくりこない
- JavaScriptの理解がイマイチだからでは？と感じたので、 を再読する（GPT-4を家庭教師として丁寧に）
- フィヨルドブートキャンプのJavascript課題を復習する
- 実際にアプリに、テストでReactのコンポーネントを作って動かしてみる
- Full stack open を順番にこなしていく（GPT-4を家庭教師として丁寧に）
（フィヨルドブートキャンプのJavascript課題は、JavaScriptでメモアプリを作成したり、その他様々なアプリケーションを作るものでした。ここでは、メモアプリを作る、ということと言い換えても大丈夫です。）
今、fullstackopenの途中なのですが、ようやく自分の中で徐々に理解できるようになってきました。が、この過程は全くもって効率的である、とは言えないものでした。。今なら、以下の順番で学習します。
こうしとけばよかったバージョン
- フィヨルドブートキャンプのJavascript課題を復習する
- 合わせて、 をGPT-4でわからないところを丁寧に補完しながら、再読する
- Reactの公式チュートリアルを読む
- fullstackopen2023を順番にこなしていく（GPT-4を家庭教師として丁寧に）
Reactを学習する前には、何はともあれJava Scriptが読めないと始まりません。自分はこの理解が対してないままReactに突入し、なんか分かったようでコードが読めない痛い期間を長く過ごしました。。これは非常に効率が悪いので、絶対避けるべきです！逆に、Java Scriptに関しては結構大丈夫です、という方は、1、2は飛ばしていただいていいかと思います。
そして、ここで、とにかく個人的にオススメしたいのは、
Full stack open です。
かなりボリューミーなのですが、DeepLとGPT-4が生まれた現在、これらを駆使してこの講座を行うことができます。これはやらない手はないです！！特に課題演習が素晴らしく、フィヨルド生のバイブル、チェリー本（プロを目指す人のためのRuby入門[改訂2版]）に匹敵するわかりやすさ、そして課題が良問揃い！
最後に
あくまで個人的な提案なので、本内容は参考程度に留めて下さい。
が、あまりにもFull stack open が自分に刺さったので、これからReactを学ぶ方にFull stack open をオススメしたく、こんな記事を書いた次第です。
最後まで読んでいただいて、本当にありがとうございました！
