はじめに
今回はこんな悩みに答えていきます。
本記事の内容
■ 初心者向けReact・Redux・Hooks学習方法やUdemy等の教材を公開
ボク自身、案件でReactの追加開発をすることになり、学習を開始したのですが、コードをみてもさっぱり分からずかなり苦戦しました。
特にReduxについてはさっぱりでした。。。
そんな中、いろいろな教材をあさり、手探りで勉強し、現在ではReactの案件で困らない程度のスキルを身につけることができました。
今回、そんなボクが実際にやった学習方法や教材をご紹介いたします。
また、教材についてはReact初心者向けでもっとも分かりやすく、現場で使える実践的な内容が盛り込まれているものに厳選しました。
それでは解説していきます。
Contents
JavaScript(ES2015(ES6))を学習する
React勉強したけど、挫折してしまったという方の多くは、JavaScriptが理解不足であることが多いです。
ReactではJavaScriptへの理解、特にES2015(ES6)という新しいJavaScript記法の理解は必須。
Reactの開発現場ではES2015(ES6)をふんだんに使用し、コーディングされております。
また、サンプルコードやReact教材についてもES2015(ES6)を用いて解説されているため、ES2015(ES6)の文法や機能を知らないと挫折してしまいます。
ボク自身はUdemyのES6からES9まで-JavaScriptアップデート講座で復習しました。
JavaScriptにあまり自信がなく、基礎から勉強してより理解を深めたい方は、以下の記事を参考にしていただければと思います。
Reactの基礎を学習する
JavaScriptの復習が完了したら、いよいよReactについて学んでいきましょう！
ただ、いきなり実践的なReactを学んでも挫折してしまうので、基本的なところから学習していくことをおすすめします。
以下にボクが実際にやった教材をご紹介します。
【一部無料】Progate：Reactコース
Reactの重要な機能である「JSX」、「state」や「コンポーネント」、「props」について環境構築不要でハンズオン形式で学べる。
お馴染みのプログラミング入門サイトであるProgateですが、しれっとReact入門コースリリースしてます。
Reactの重要な機能である「JSX」、「state」や「コンポーネント」、「props」について分かりやすく解説されており、最初にReactを勉強する教材としておすすめです。
Udemy：モダンJavaSciptの基礎から始める挫折しないためのReact入門
Reactの基本的な機能だけでなく、Reactの動作の仕組みや概念についても初心者向けに解説されている。
Reactで開発するにあたって、モダンJavaScriptの理解は必須です。
モダンJavaScriptとは、いろいろ定義はあると思いますが、ざっくりいうと以下のような技術が使用されている近代のJavaScriptのことです。
■ ES2015(ES6)
■ 仮想DOM
■ npm/yarn等のパッケージマネージャー
■ WebPack等のモジュールバンドラー
■ Babel等のトランスパイラ
これらの用語を聞いて、何のことかサッパリという方は本講座で学習することをおすすめします。
モダンJavaSciptの基礎から始める挫折しないためのReact入門では、上記で解説した機能について初心者向けにわかりやすく解説されております。
また、プレーンなJavaScriptを使用したアプリ作成と最新のReact(Hooks)を使用したアプリ作成をハンズオン形式で学習することができ、Reactを使用することによるメリットを体感できる教材となっております。
Reduxについて学習する
Reduxとは、複数のコンポーネント間で、React.jsで使用するアプリケーションの状態(state)を管理するフレームワークです。
小規模なアプリケーションだと不要なのですが、実際の開発現場で遭遇するような大規模なアプリケーションではReduxは必ず使用されます。
以下にボクがReduxを学習する際にやった教材をご紹介します。
Udemy:フロントエンドエンジニアのためのReact・Reduxアプリケーション開発入門
日本語のRedux解説講座の中ではこれが一番わかりやすく、実践的。
ReactとReduxを使用したモダンな開発手法がハンズオン形式で学べる。
日本語の講座は他にもいくつかありますが、これが一番わかりやすかったです。
このコースでは以下のことを学べます。
■ 実践的かつモダンなフロントエンド開発手法
■ 外部のRESTful APIと連携するReactアプリケーションの開発手順
■ ES2015を利用した可読性の高いコードの書き方
■ CRUDが実行できる動的なReact・Reduxアプリケーションの実装方法
■ Material-UIを使用したUI実装
このようにフロントエンドエンジニアのためのReact・Reduxアプリケーション開発入門では、Reduxだけでなく、Reactについても実践的でモダンな開発手法が解説されており、非常におすすめです。
Udemy:Modern React with Redux
英語に抵抗がないのであれば、これ一択。
ReactやReduxの概念や機能、実際の開発手法について非常に丁寧に解説されており、圧倒的に質が高く内容が濃い。
英語の講座ですが、Reduxだけでなく、Reactの重要な機能についても省略することなく丁寧に解説されております。
さらに定期的にアップデートされていて、後述するReactの新機能（React Hooks）についても解説してくれています。
このコースでは、以下のようなことが学べます。
■ JSX, state, propsなどのReactの基本的な機能の解説
■ 再利用可能なコンポーネントの作り方
■ Reduxの概念、実装方法
■ RESTful APIを使用した非同期処理の実装方法
■ ビルド・デプロイ方法
■ コンポーネントの構成とUIを構築する手法の解説
■ React Routerの概念、実装方法
■ React Hooksの概念、実装方法
このようにReact開発に必要なことはほぼすべて網羅されており、詳しく解説されている。
英語に抵抗がない方はModern React with Reduxのみでもいいかもしれません。
講座内容が英語なので躊躇する方もおられると思いますが、スライドやコードを見ながらだと英語力がそんなに高くなくても意外と理解できるものなので、挑戦してみてください。
React Hooksについて学習する
React Hooksは、近年(2019/2〜)追加されたReactの新しい機能です。
簡単に解説すると、これまでのReactではクラスコンポーネントでしかstateを保持したりライフサイクルの機能を使用することができなかったのですが、React Hooksによりファンクションコンポーネントでもこれらを使用できるようになりました。
なんだか難しそうですよね。。。
でも、これから紹介する教材で学習すればReact Hooksについてしっかりと理解できると思います^^
React HooksはReactユーザーからの評価が高く、Reactが再び注目されるようになりました。
今後開発現場でも使用される可能性が高いため、ぜひ学習しておきましょう。
以下にボクがHooksを学習する際にやった教材をご紹介します。
Udemy:React Hooks入門
日本語のReact Hooksを解説講座の中ではこれが一番わかりやすく、実践的。
React Hooksの導入方法はもちろん、実践的な使い方について、手を動かしながら学習できる。
React Hooks入門では、Hooksの導入方法はもちろん、機能、実践的な使い方についてHooks初心者にも分かりやすいよう解説されております。
このコースでは、以下のようなことが学べます。
■ React Hooks (useEffect、useReducer、useContext、useState等)の導入方法と利用例
■ クラスコンポーネントに依存せず、ファンクションコンポーネント内で状態管理やコールバックを行う方法
■ React Hooksとの今後の付き合い方
■ ReactにTwitter Bootstrapを適用する方法
■ メンテナンス性の高いコードの書き方
まとめ
初心者向けReact・Redux・Hooks学習方法や教材まとめ
■ JavaScript(ES2015(ES6))の復習 → React基礎 → Redux → Hooksの順で学習を進める
■ JavaScript(ES2015(ES6))の復習は、ES6からES9まで-JavaScriptアップデート講座がおすすめ
■ React基礎学習は、モダンJavaSciptの基礎から始める挫折しないためのReact入門がおすすめ
■ Redux基礎学習は、フロントエンドエンジニアのためのReact・Reduxアプリケーション開発入門もしくはModern React with Reduxがおすすめ
■ Hooks基礎学習は、React Hooks入門がおすすめ
さいごまで読んでいただき、ありがとうございました。
知り合いから
「フリーランスエンジニアになれば、年収800万円以上の高報酬でかつ、自由な働き方をチョイスできる」
というのを聞いて、フリーランスエンジニアに興味を持ったのですが、
当時SIer企業でエンジニアをやっていたボクはなかなか一歩踏みだせませんでした。
というもの以下のような不安があったからです。
■フリーランスエンジニアってかなりの技術力がないとなれないのではないのか？
■フリーランスエンジニアって不安定なのではないのか？
■フリーランスエンジニアって人脈やコネ、営業力が必要なのではないのか？
しかし、実際にフリーランスエンジニアになってみて気づきました。
これらはすべて間違いです。
過去のボクのようにフリーランスエンジニアに興味あるけど一歩踏み出せないという方向けに
『フリーランスエンジニア転職完全ロードマップ』
という記事を書きました。
この記事読めば、どうすればフリーランスになれるのかが分かりますので、ぜひ一読ください。
