React学習開始から一カ月の振り返り

Uncategorized
Reactの学習を始めて一か月が経ちました。
自分の学習を見直すためにも振り返ってみます。
ちなみに、Reactの勉強を始める前の私の戦闘力はこんな感じでした。

・JavaScriptの知識はある。読んだ本は「JavaScript本格入門」、「パーフェクトJavaScript」は読んでみたものの理解できず断念。
実践はドットインストールで学んだのと、簡単な自作アプリを一個作った程度。
・Reactの知識はゼロ。

それではReact学習を時系列で追ってみます。かなり長くなります。
11/28-12/5
Javascriptの実戦経験を積もうと思い、自作のクイズアプリの開発、ドットインストールのスロットマシーンと数字タッチゲームを受講しました。
クラスやオブジェクト使った開発は初めての経験で何度もエラーに遭遇しましたが、なんとか理解しながらコードを模写することができました。thisの挙動でつまづくことが多かったです。
12/6
JavaScriptの学習を続けようと色々な動画学習サイトを回ってみたものの実践向けの良い教材が見つからず、その中で多くの講座の概要欄に「Reactを使った」という文字を目にして、もしかしたらJavaScriptだけではアプリ開発は難しいのかもしれないと漠然と思い、Reactを学ぶことに決めました。
そして、以下の講座を受講しました。

「モダンJavaSciptの基礎から始める挫折しないためのReact入門」

こちらの講座をReactの最初の学習に決めたのは、ビデオ時間が3時間弱で短かったのと、JavaScriptの知識はあるが、アロー関数など最近のJavaScriptの知識が怪しい自分にはちょうど良いレベルだと思ったからです。
実際受けた講座は、JavaScriptで書いたコードをReact Hooksを使ったコードに書き換えてReact Hooksの有用性を理解しようという趣旨で、最初に取り掛かるには良い教材でした。とりあえずReactを使って何ができるのか手短に知りたい人にはおすすめです。

12/7-11
とりあえずReactのコードには触れたので、次はReactの全体像をつかもうと思いReact.js & Next.js超入門を通読しました。
ReduxやFirebaseなどを扱った書籍で400ページ超あるので読みごたえがありました。
機能ごとにファイルを分けるのがReactの使い方らしく、データがファイル間を行ったり来たりするのでコードを理解するのにはかなり骨が折れました。特にReduxは難しかったです。
この書籍でReactを深く理解するというよりはざっと通読していろいろなツールの存在を知るのが正しい読み方かもしれません。
12/13-15
Reactのコードを理解するには挙動を追ったほうが近道かと思い、再び実践しにこちらの講座を受講しました

最短・最速で作る Youtube クローンアプリ React・React Hooks編

Youtube APIを使ったりReact Routerを使ったり、見よう見まねでコードを書きました。
ずっと手を動かしていて理解は追いついていませんでしたが、自分の書いているコードを理解するためにも全体の設計を知ることは大事なことかもしれないと漠然と思いました。

12/16-17
この段階で次にReactの何を学べばよいのか迷走したのでググって以下のサイトを参考にしました。

Reactの学習、今からやるならこうする

Reactの勉強方法|初心者が試行錯誤して見えてきた学習ロードマップ

上記二つのサイトで共通して紹介されていたのが以下の二つ。

りあクト!

React/ReduxでGoogleカレンダー風アプリケーションを作ろう

Reactの理解を深めたかったので、りあクト! TypeScriptで始めるつらくないReact開発 第3版【Ⅰ. 言語・環境編】を通読しました。
Reactの歴史や思想など深いところから書かれていて、充実した内容なんですが、自分には難しくて理解できませんでした。ある程度経験ある人が読むとReactの真価を知るのに読む本なのかなと思います。

12/18
やはりReactを使った経験を積もうと思い
Techpitの「React/ReduxでGoogleカレンダー風アプリケーションを作ろう」を受講しました。しかし環境の構築でつまづき、一度保留にしました。
12/19-31
Reactを理解しようにも知識を入れようとすれば経験値が少なく身につかず、実践しようとすれば何をしているのか知識がないのでわからずの袋小路に入ったので、知識とスキルの両方を同時に伸ばす必要性を感じました。そこで基本的なことから実用まで幅広く教えてくれる長時間の講座を受講することにしました。
それで選んだのがこちらの講座↓

The Complete React Developer Course (w/ Hooks and Redux)

ビデオ時間が約40時間で、自分でコードを書きながら進むのでガッツリ取り組めました。
エラーに何度も遭遇したり理解ができないところもありましたが、Q&Aを見て問題を解決しつつ、それでもダメなときはリソースをダウンロードしながらなんとか修了できました。

講座の内容はJestやFirebase、Herokuなど幅広く扱っています。
各レッスン(10分程度)ごとに簡単な小問題が出されるので自分の理解度を確認しながら進めるのが良かったです。

この講座を受講して思ったのは、Reactの理解が進まなかった原因はReact自体の難しさというよりは使えるツールが多くて学ぶことが多くあるのと、ファイルの分割の仕方つまり設計の思想の部分に慣れてないことが多いんじゃないかということです。
書くコードはほかの行からコピペして、変数の部分だけ変えるみたいなことが多かったので。

1/2-3
改めてReactの思想の部分を深く知りたいと思い、二週間ぶりに「りあクト!」のⅠ(言語環境編)Ⅱ(基礎編)を通読しました。
以前よりは理解できましたがそれでも難しく断念。代わりにReact開発現場の教科書を通読しました。

Atomic DesignなどReactで開発する上で参考になる考えに触れました。この考えはある程度の規模のアプリ開発で
活きてくる考えなので、再び実践経験の必要性を実感しました。

1/4-7
アプリ開発の経験を積もうと思いこちらの講座を受講しました。

[COVID 19アプリ編] Reactで作るコロナウイルス Live ダッシュボード

HooksとReduxToolkitを学べるという趣旨でしたが、自分にとって一番の収穫はMaterial-uiをつかったグリッドデザインを体験したことです。
取れる選択肢が多くて悩むことがあるレイアウトの世界にひな型があるのは助かります。
アプリ自体の規模や難易度はやさしいので、理解しながら進めることができました。
Reactを使ってアプリを開発したい人向けの実践重視の講座に感じます。

1/8-9
今まで学習したことを定着させるためにReactの基礎を学び直しました。
その中でReduxの理解が自分に足りていないことに気づきました、
mapStateToPropsあたりの理解ををなあなあにしていたので補強しました。
その時に参考にしたのがこちらのサイトです。

「react-redux」についてconnectの実装パターンを試す

それとWebpackのことを勉強したことなかったのでこちらの講座も受講しました。

Webpackでウェブサイト制作のHTML/CSS/JSコーディングを一気に効率化する実践講座 (Mac / Win)

今までWebpackの部分はただ講師のコードをそのまま模写していただけだったので、この講座がかなりためになりました。
コンソールや出力されたコードを丁寧に追ってくれるので、初めてWebpackを学ぶ人も理解しやすい内容でした。

今後
振り返ると実践と知識の定着を繰り返しているのが見てとれますね。学習方法も含めて試行錯誤しつつ学んでいきます。
りあクト!は理解したい内容なのでいつかまた挑戦したいと思います。

コメント

タイトルとURLをコピーしました