おすすめの学習教材 – React 編

おすすめのプログラミング学習教材を紹介します！企画の第一弾React編です。

Reactのおすすめ学習教材を紹介！

WebアプリをSPAで作成したいと考えた筆者が
業務では触れたことのないReactを学ぶために利用したプログラミング学習教材を
厳選して紹介します。

コース選びのご参考になれば幸いです〜

React is なに？

ユーザインターフェース構築のための JavaScript ライブラリ

React公式ページ

これ以上の説明は省略します笑

なぜなら、これから紹介する教材で学べるから
ここで私の拙い説明などを聞く意味がないのです。

Stack Overflow Developer Survey 2021 で、
ついに最も利用されているWebフレームワークの1位に輝きました。

学習する価値は大いにある、むしろ学習する価値しかないと思います。

Reactを学ぶ上での個人的な見解

Reactは、正しい学習順序で学ぶ必要があると思っています。

HTML、CSSを勉強して簡単なDOM操作をJavaScriptで実装しました！ 次は…
モダンと言われているから、世界で人気だから、まわりが良いと言っているからという理由で
軽い気持ちでReactに入門すると、初学者は爆死します。

もう一度言います、爆死します。

だからこそ、背伸びせず、正しい学習順序で学びましょう！

何事も基礎が大事です！

---

それでは、学習教材を紹介していきます。

【厳選】Reactの学習教材

React 公式チュートリアル

必ず言われるであろう「チュートリアルが一番大事」

最近のプログラミング言語やライブラリには、
素晴らしいチュートリアルが存在します。

まずはチュートリアルからやる！
公式ドキュメントを読み込む！という意識は非常に重要です。

仮にチュートリアルやドキュメントを読んで
いけそうな気がすると思った方は自分でアプリを設計して作ってみると良いでしょう。

もし、問題なければそれでOKですし、
躓くようなら教材で学習するでも遅くはないはずです。

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

私自身、業務でJavaScriptを使った開発をしていたので
JavaScriptの基本的な知識はありました。

ただ、変数の定義にはvarが登場し、アロー関数なんて存在しないソースコードで、
いわゆるモダンな書き方はしていませんでした。

そういう事情もあって、このコースの次のような謳い文句に惹かれました。

モダンJavaScriptの動作の仕組みや概念、機能から解説します。

Udemyから抜粋

Reactはあくまで、JavaScriptライブラリ。

JavaScriptが曖昧な理解のままでは分かるわけがないのです。

JavaScriptもさっと復習しておくのも良い機会と思い、こちらのコースを受講！

違いを知ることができる！

Udemyでの評価も高く、
Reactの入門には最適な教材のひとつです！

Reactの学習を進める上で登場するモダンな書き方、
例えばアロー関数、スプレッド構文、mapやfilterを学習できます。

個人的には
プレーンなJavaScriptのみでアプリケーションを開発する
というセクションが面白いなと感じました。

違いを知るというのは、とても重要なことです。

違いを知り、Reactの素晴らしさに気づくことができれば
Reactが好きになる、だから学習の継続に繋がると私は思います。

「JavaScript 完全に理解した」人の場合

この教材の注意点は、
JavaScriptの学習から始まることとTypeScriptで実装していないことです。

JavaScriptは理解しているからReactを勉強したいという方は対象外かと思います。

復習になるので無駄とは思いませんが、
純粋にReactを勉強したい人には物足りないと思います。

また、TypeScriptではなくJavaScriptでの実装である点も注意されたし。

りあクト！ TypeScriptで始めるつらくないReact開発

これから新規でアプリを作るとなると
JavaScriptで実装するのはどうなんでしょうと思うこともあり、

また、ReactはTypeScriptとの相性が良いと聞くし興味がある。

そこで手を出したのが、
りあクト！ TypeScriptで始めるつらくないReact開発です。

こちらは第３部まである技術系同人誌です。

Ⅰ. 言語・環境編

技術書典：技術書オンリーイベント

りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】：くるみ割り書房 🔔「紙+電子セット」は BOOTH にて販売中！ https://oukayuka.booth.pm/items/2368045 📅 2021年 9 月に第 3 刷発行。内容を最新にアップデートしました。 ―― 実践的な React…

第一部は Create React App の使い方に始まり、JavaScript、関数型プログラミング、TypeScript までをカバー。 「フロントエンドの開発になぜ Node.js が必要なの？」「webpack は何をしてくれてるの？」「import はどうやってファイルを読み込んでるの？」のような読者の根本的な疑問にまで踏み込んで説明しています。

技術書典マーケット

Ⅱ.React基礎編

技術書典：技術書オンリーイベント

りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ.React基礎編】：くるみ割り書房 🔔「紙+電子セット」は BOOTH にて販売中！ https://oukayuka.booth.pm/items/2368019 📅 2021年 9月に第 3 刷発行。内容を最新にアップデートしました。 ―― 実践的な React …

第二部では JSX の解説からコンポーネントの基礎知識、そして Hooks の使い方までを扱います。本書では単にそれらの概要や用法だけの紹介にとどまらず、フロントエンドの歴史をさかのぼってなぜ React がそれらの技術を採用し今のような形になったのかを解き明かしていきます。

技術書典マーケット

Ⅲ.React応用編

技術書典：技術書オンリーイベント

りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅲ.React応用編】：くるみ割り書房 🔔「紙+電子セット」は BOOTH にて販売中！ https://oukayuka.booth.pm/items/2367992 📅 2021年 10月に第 3 刷を発行。内容を最新にアップデートしました。 ―― 実践的な Rea…

第三部ではまずルーティングを紹介した後、React の難関である副作用処理について本格的に学んでいきます。Redux とその公式スタイルガイド、Effect Hook と組み合わせた非同期処理の書き方、Redux の代替技術、さらに最新の Suspense までを紹介。

技術書典マーケット

とにかく説明が分かりやすい！

会話形式で書かれているからなのか、
説明が分かりやすい！

Reactを学びたいのであれば、この一冊でOKかなと！

個人的にはReactの歴史を説明してくれる点が良いなと思いました。

これがあるよ、こうすれば良いよと教えられるより
こういう歴史があって、これが誕生したなど「なぜ？」という部分の話を聞くと
記憶に残りやすいと思います。

技術系同人誌って？ 信用できるの？

結論から言えば、信用できます。

正直なところ、私も少し抵抗がありました…

なんとなく出版社から出版された書籍のほうが…と思う気持ちも分かります。

ですが、りあクト！に関して言えば、
まったく問題ないでしょう。

ふざけた内容であれば、ここまで売れないです笑

まぁ、 技術系同人誌については、
こんなんでお金とるの？みたいな内容のものもあるという話も聞きますし、
上手に見極めて活用していきたいですね。

まとめ

紹介した学習教材で十分に基礎から応用まで学べると思います。

基礎を疎かにしては上達は望めません。
JavaScript・TypeScriptの基礎固めをした上でReactを学習することをおすすめします！

一通り学習を終えたら、自分で設計したアプリを作りましょう！
言われた通りに実装しているばかりでは身に付かないのがプログラミングです。

間違っても周回なんてしてはいけません！