UdemyでReactを学ぼうと思った時、どこから勉強を始めたら良いのでしょうか。日本内でも人気が高まっているReactは、世界でも圧倒的な導入率を誇っています。Udemyで、Reactを学習すると良い点やおすすめの講座などについて紹介します。
UdemyでReactを学習するメリットとは
Udemyは、動画で学習できるプラットフォームです。自分が勉強したいと思えるコースが見つかったら、動画を購入して学習を進めていきます。もし、自分に合わないのであれば、返金プランがあるので気になったら購入してReactを学習してみましょう。Udemyは、一度動画をダウンロードすれば、買い切りなので、いつでもどこでも学習できます。学習して、しばらくしてから疑問が沸いた時に復習できるのでおすすめです。
React経験者を求める企業が増えている傾向にあり、フロントエンドエンジニアになりたい人は、ぜひ基礎から順番にスキルアップしながら学習をしていきましょう。
Reactとは
Reactは、JavaScriptライブラリのひとつです。Webサービスにおいて、世界的に圧倒的な導入率を誇っています。コーディングコストが少なく、開発環境が大きくなっても管理しやすい点が魅力的で、これまでのフレーム・ライブラリと異なる特徴があります。
UIの部品に対して「このような表示になります」と宣言する実装が行えます。シンプルかつ理解しやすいソースコードが作成できるようになります。データをどのように配置するか定義しておくことで、データをどのように配置するか定義し、データ変更を検知する特徴があります。
Reactでは、部分ごとに構成要素を分けるのでカスタマイズしやすくなっています。変えたいところだけ変更できるので、改修や管理・再利用がしやすくなります。
「Atomic Design」というデザインシステムとReactは、相性が良いです。Atomic Designは、UIコンポーネントの粒度をカテゴリー別に分ける手法です。Atomic Designでは、デザインの統一性が図れます。定義することで、使われるデザイン、パーツを意識でき、サービスやページごとで微妙に違うパーツやマージンの取り方を使うことがなくなります。つまり、デザインを繰り返し使える設計ができます。
大規模なJavaScriptコードも保守性を高め、既存のReactコンポーネントを再利用することで、開発工数を減らせます。新しい機能を追加する場合、既存のソースコードを書き換える必要がなく、すぐに開発が行えます。どんなWebアプリもすぐに導入できる点も特徴です。
Reduxとは？
state（ViewのようなデータやUIの状態などのアプリケーションが保持している状態）を簡単に管理するためのフレームワークで、Reactと相性が良いものです。Redux単体でも利用できます。stateの管理が複雑で大規模なアプリケーションで利用すると便利です。
主に、Store、Action、Reducerといった要素があります。
- Store：アプリケーションの全てのstateを保持するオブジェクトです。
- Action：アクション（起こった出来事）と不随する情報をもつオブジェクトです。
- Reducer：Storeから受け取ったActionとStateに応じて変更されたstateを返す純粋関数です。
Store
ActionをStoreに送信する手段を提供し、stateと送信されたActionを指定したReducerに渡し、stateを変更します。
// Action
const action = {
type: 'ADD_TODO',
text: 'Go to swimming pool'
};
// Reducer
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([{ text: action.text, completed: false }]);
default:
return state;
}
}
// Store
// createStore()の第1引数に渡したReducerがActionをdispatchする度に実行される
// 今回はtodosを渡しているため
// Actionをdispatchする度にtodosが実行され、Actionに応じたstateを返す
const store = Redux.createStore(todos);
// Actionをdispatchする
// Reducerであるtodosが実行され、Storeが保持しているstateが変更される。
store.dispatch(action);
// stateを取得する
console.log(store.getState()); // => [{text: "Go to swimming pool", completed: false}]
Single source of truth（信頼できる唯一の情報源）：アプリケーションの全てのstatteを単一のStoreで保持するという第一原則があります。複数のStoreを生成してはいけません。
Action
ActionをStoreへ送信すると、StoreのstateがActionを経由して変更されます。
const action = {
type: 'ADD_TODO',
text: 'Go to swimming pool'
};
第二原則に、State in read-only（stateは読み取り専用にする）とあり、stateは必ずActionを経由して行う必要があります。どこでstateの変更が起こり、どのような変更の種類があるのかを明確にでき、どこでもできるようにすると意図しないところでstateが変更され、バグの特定が困難になります。
Reducer
ADD_TODOというタイプのアクションが送信された時に、stateを変更して同じ結果を返す動きになっています。
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([{ text: action.text, completed: false }]);
default:
return state;
}
}
第三の原則に、Changes are made with pure functions（変更はすべて純粋関数で行われる）があります。
stateがどのActionによって、どのように変更されるかをReducerで定義します。純粋関数（同じ引数を渡されたら必ず同じ結果を返す関数）でなくてはならず、引数の変更、API呼び出し、純粋関数ではない関数を呼び出すことなどは実行してはいけません。
Hooksとは？
React 16.8で追加された新機能がHook（フック）です。Reactの機能を使う時に、クラスを書かなくても大丈夫な機能になっています。何万というコンポーネントを作成、メンテナンスする中で、一見互いに関係なさそうに見える問題が解決できます。
関数コンポーネントにstateやライフサイクルなどのReact機能を接続するための関数で、クラス内では機能しません。Reactは幾つのかのビルトインのフックを提供し、異なるコンポーネント間でステートフルな振る舞いを共有するため、自分自身のフックを作成できます。
Hooksの約束
- 関数のトップレベルのみで呼び出すこと。ループや条件分岐に、ネストした関数の中でフックを呼び出さない。
- React関数コンポーネント内のみで呼び出すこと。JavaScript関数内では呼び出さないでください。（state を用いたロジックをコンポーネント間で再利用する独自フック内では可能）
Udemy おすすめ講座：入門編
- フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門
- React + Redux を使用したモダンフロントエンド開発
フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門
講義内容：実践的かつモダン的なフロントエンド開発手法の学習、CRUDが実行できる動的なRezct・Reduxアプリケーション実装方法の学習 など
講師：はむさん リーマンショックのリストラから這い上がったウェブ系ソフトウェアエンジニア
フロントエンド ユーザーインターフェース開発のため、JavaScriptのライブラリとして、多く開発者に指示されているReactを題材としたコーディング、プログラミング技術を習得するコースです。Reactとセットで用いられる状態管理のためのReduxと一緒に学習できます。「とにかく書いて動かすこと」という信念の元、実際にコードを書いて動かして体得していきます。
React + Redux を使用したモダンフロントエンド開発
講義内容：ReactとReduxを使用したシングルページアプリケーション制作、ES2015+等を使用したモダンなフロントエンド開発 など
講師：Nakanishi Yusuke
ウェブページで、動きを付けるために使用していたJavaScriptは、フロントエンドの主役としてUIを提供するための中心的な役割と変化しています。Reactなどのビューライブラリの開発について学んでいきます。モダンなフロントエンド開発の知識を身につけたい人におすすめです。
Udemy おすすめ講座：初級～中級編
- Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
- JavaScriptエンジニアのためのハンズオンで学ぶTypeScript徹底入門 2023年最新版
- 最短で学ぶReactとReduxの基礎から実践まで
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
講義内容：再レンダリング最適化の方法、様々なCSSのあてかた など
講師：じゃけぇ (Takumi Okada)
Reactスキルを全体的に上げたいReact入門者におすすめのコースです。React標準のContextの使い方やテクニック、ライブラリ「Recoil」について紹介しています。ReactとTypeScriptで開発ができるようになります。
JavaScriptエンジニアのためのハンズオンで学ぶTypeScript徹底入門 2023年最新版
講義内容：TypeScriptの開発環境の構築方法、TypeScriptの型定義の読解方法、定義の方法 など
講師：はむさん リーマンショックのリストラから這い上がったウェブ系ソフトウェアエンジニア
これからTypeScriptを学びたい方におすすめのコースです。基本的な型について学び、TypeScriptに存在する型を覚えて、関数で「型」を使う流れで、関数に対して型の概念を適用する方法を学習します。プレビュー動画もあるので気になったらプレビューしてみることをおすすめします。
最短で学ぶReactとReduxの基礎から実践まで
講義内容：React、Reduxの基礎、実践的なコードの書き方 など
講師：村田 佑介、AIトラベル 株式会社
Reactで実践的なWEBアプリケーションを制作できるようになりたい人や、jQueryでの開発に限界を感じている人におすすめのコースです。React.jsを基礎から学習し、状態管理ライブラリのReduxと共に現場で活躍できるレベルのスキルを習得できます。
Udemy おすすめ講座：React Hooks編
- Web開発ソフトウェアテスト徹底攻略 (React Hooks/Redux + Django REST API)
- React Hooks 入門 – HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得
Web開発ソフトウェアテスト徹底攻略 (React Hooks/Redux + Django REST API)
講義内容：Web開発のソフトウェアテスト、Django RESTFrameworkテスト など
講師：Kazu.T
Django REST APIのテストをしてみたい人や、React testing libraryでアプリテストをしてみたい人におすすめのコースです。フルスタックで、Webアプリのテストを自分で行えるようになります。Token認証、CRUD操作などのWebアプリに共通する機能を学習し、オリジナルアプリケーションに活用できるようになります。
React Hooks 入門 – HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得
講義内容：React Hook（useEffect、useReducer、useContext、useState等）の導入方法と利用方法例、クラスコンポーネントに依存しない状態管理・コールバックの行う方法 など
講師：はむさん リーマンショックのリストラから這い上がったウェブ系ソフトウェアエンジニア
Reduxで挫折してしまった人や複雑なセットアップにうんざりした人におすすめです。導入方法や実践的な使い方について、実際にコードを入力などしながら学習します。エディターを開き、手を動かして目で動作確認するスタイルなので、楽しみながらスキルアップができます。
まとめ：UdemyでReactを学ぼう！
Reactは、これからも注目度が高く、世界的にも導入率の高いものです。そのため、世界でも活躍できるエンジニアになるためにも、Reactやそこに関係するものなども合わせて実践的にUdemyでReactを学んでいきましょう。