この記事の対象者
- プログラミングをある程度できてReactを勉強してみたい人
- React の最新の書き方を知りたい人
- React の学習を何でするべきか悩んでいる人
React の新しい書き方とは？
主にReact Hooksのことを指しています。
反対に古い書き方はクラスコンポーネント、componentWillMountなどのコンポーネントのライフサイクルを使用しているものです。Hooksは2019年2月に追加されたのでもうすでに１年以上経過していますし、基本的にはHooksを使用することを公式が推奨しています。
React 公式サイトにも載っていますが、クラスコンポーネントではステートフルなロジックの再利用が難しく、記述も関数コンポーネントに比べて長くなりがちで可読性が低いです。
そのため、これからReactを学ぼうと考えている人は絶対に、React Hooksを学んでおきましょう！
どうやって勉強するの？
ずばり、Youtubeで学びましょう。
Youtubeのメリット
- ハンズオン形式で学べる。
- プログラミングの言語知識だけでなく役立つサイト・裏技も学べる。（ショートカット、API、命名規則など）
- Udemyと比べても大差ないレベル感のものが多い。
- 英語も一緒に勉強できる。（後々ドキュメントを読むときに役立つ）
- ほとんど最新のバージョンを使って、最新の記法で書いてくれている。
Youtubeのデメリット
- 基本的に英語圏しかない。
- 再生時間が長くなりがちで、短時間での勉強には向いていない。
- 自分が知りたい情報にたどり着くのに時間がかかる。
一応、メリット、デメリットを挙げてみましたけど、書籍などはどうしても公式チュートリアルをなぞったような堅い書き方が多いですし、Udemyはお金がかかるし、Progateなどは実務とはかけ離れすぎているし、基本的には「Youtubeを使わない手はない！」と思っています。
Youtubeでのプログラミング勉強法
これはReact以外の言語においても使える方法なので、ぜひ時間のある方は試してほしいです！今回はReactで説明していきます。
STEP1 言語名 + Tutorial で検索する
まず、自分が勉強したい、言語・フレームワーク・ライブラリを打ってその後にTutorialと入れて検索してみましょう。
「React Tutorial」で検索してみましょう。
チュートリアル動画は、基本的な構成としては、言語の簡単な解説、環境構築、Hello World、各機能の解説、簡単なアプリの作成、というものが多いです。再生時間としては3時間以上が基本ですかね。
STEP2「１年以内 + 公式 or 再生数が多い 」動画を探す
一番重要なのはいつ公開されたかです。
自分がおススメしているのはYoutubeの並べ替えでアップロード順にして、再生数が1000回以上の動画もしくは、公式マークがついているチャンネルの動画、再生時間が2,3時間以上の動画をチェックする方法です。
再生回数が多い、公式マークがついているチャンネル、再生時間が3時間以上の動画は、基本的に内容も充実しており、スライドを使って説明していたり、機能を一つ一つコメントアウトして説明してくれたりしていて良質なものが多いです。
あとは、少しやってみて自分の肌に合うものを確かめて、どんどん進めていきましょう！
ちなみに現在おすすめの「React Tutorial」動画としては以下になります。
Coding Addict
公開日：2020/9/29
再生時間：10時間
説明：ソースコードが公開されており、Hooksの機能も丁寧に解説している。
Bitfumes
公開日：2020/9/21
再生時間：10時間
説明：画像検索サービスを作りながら、Reactの基礎を学べてNetlifyでデプロイも行う。
codedamn
公開日：2020/8/27
再生時間：9時間
説明：連絡先登録と検索ができるサービスを作れる。
STEP3 クローンアプリを作る
Udemyなんかでもよくありますが、Youtube、Instagram、Amazon、Twitter、Netflixのクローンアプリを作りましょう。クローンアプリなんて作って意味あるの？って思う人もいるかもしれませんが、実際のサービスを作るために、どういう風に実装しているのかそのためにどういうサービスを使っているのかなどを学ぶことができ、大変参考になります。
セキュリティに関してもパスワードやセッションの保存方法、ユーザーのデータモデルの設計など自分一人で一から考えていると、それだけで１週間以上かかってしまうこともあります。そのため、デフォルトスタンダードとまではいかないにしても、基本的なサービスの作り方を学んでいくと自分でこんな機能を実装したい！と思ったときに、あのサービスのこの機能とこの機能を組み合わせれば作れるじゃないか？という風に自走力が身につきます。
STEP4 オリジナルアプリを作る
クローンアプリにオリジナル機能を一つ追加するだけでも良いです！
思いついたら即行動の精神で作ってみてください！
さいごに
Reactを勉強する上で、Next.jsとかGatsbyとかに手を出したくなる気持ちはすごくわかるんですが、結局、素のReactすらも使いこなせていないのにそれらを使おうとしても、最大限の機能を使うことはできないと思います。なので、地道にコツコツ頑張りましょう。