こんにちは、MSKです。
僕は個人開発でReact.jsを使って、フロントサイドやデスクトップアプリを開発しています。
React.jsを学んだ、または今現在学んでいる教材でおすすめのものを紹介します。
React.jsとは
Facebook社が開発したJavaScriptのライブラリの１つです。
JavaScriptのフレームワーク・ライブラリは数多くあり、日本ではVue.jsが人気ですが、世界的に見るとReactが使われています。
採用事例としては、FacebookやInstagram、Netflix、Slackなどがあります。
Reactの特徴としては、次があります。
- 宣言的
- コンポーネントベース
- 拡張機能が豊富
宣言的
Reactは指定したデータの値が変更されたときだけ、画面を更新してレンダリングします。
そのため、シンプルで理解しやすいソースコードが作成しやすく、デバッグしやすいという利点があります。
コンポーネントベース
UIの部品をコンポーネントとして切り出して、カプセル化された状態で構築することができます。
このため複雑なUIだったとしても、コンポーネント組み合わせて簡潔に作ることができたりします。
コンポーネントとして切り出すことで、
- 不具合発生時、該当するコンポーネントの改修だけですむ
- １つ１つの部品を短く分かりやすいソースコードの状態で管理できる
- 必要な場所でコンポーネントを呼び出すだけで使えるので、再利用もやりやすい
という利点があります。
拡張機能が豊富
コンポーネントベースに少し関わりますが、他の人が作成したコンポーネントをダウンロードして組み込んで使うことができます。
実現したい機能を簡単に使うことができるようになるためメリットは大きいです。
本のおすすめ
本のおすすめは１つだけです。
React.js&Next.js超入門 第2版
さまざまなプログラミング言語やフレームワーク・ライブラリに対して分かりやすい入門書を書かれている掌田さんが書かれているReact.jsの入門書になります。
基本的な内容について動かしながら学べる本です。
第1版ではReduxについて書かれていて、Hooksについては記載がないのですが（出版当初はリリース前だと思うので仕方ないですが・・・）第2版からはReduxの記載がない代わりにHooksについて書かれています。
今から学ぶ人は第2版を学んで、いくつかアプリを作った後にReduxが必要になれば、その時にReduxについても学べばいいのではと思います。
FirebaseやNext.jsについては簡単ですが、学べるのはいいなと思います。
目次は以下のようになっています。
- Reactを準備しよう！
- JSXをマスターしよう！
- コンポーネントをマスターしよう！
- フックで状態管理しよう！
- Next.jsでReactをパワーアップ！
- FirebaseでReactをパワーアップ！
- Addendum : JavaScript超入門！
動画教材のおすすめ
Udemyの教材は基礎的な内容から実践的な内容まで講義されているので、おすすめです。
Udemyは頻繁にセールをやっていて、全体的に90%OFFなどで購入できます。
もし興味があった動画があった場合はセールまで待って購入してください。
（平均2000円以下で購入できるようになると思います。）
その中でも僕がおすすめだと思う動画教材を紹介します。
React Hooks 入門 – HooksとReduxを組み合わせて最新のフロントエンド状態管理手法を習得
実際に手を動かしながらReact Hooksを学習できる教材です。
解説が丁寧であり、また質問にも素早く回答してもらえるので安心して受講ができます。
また、Githubに最終的なソースがあるので、詰まったら見比べることができます。
ただ、JavaScriptについては知っているものとして進められるのでJavaScriptの文法が不安な人はJavaScriptの基本を学んでから受講すると良いと思います。
Firebase + React Hooks(TypeScript)によるWebアプリ開発
Twitterクローンを作りながらReact Hooksの実践的な使い方を学べる講義です。
この講義ではTypeScriptが使われるので、TypeScriptを先に学んでおくとよいと思います。
この講義の作成者が別の講義で無料でTypeScriptについて動画を出しているので、それを受講されるのもよいと思います。
[基礎編]React Hooks + Django REST Framework API でフルスタックWeb開発
PythonのサーバーサイドのフレームワークであるDjangoを使用しますが、サーバーサイドとフロントサイド両方を開発できるようになる基本的な講義になっています。
フルスタック開発に興味がある人にはおすすめの内容です。
[JIRA編]React Hooks/TypeScript + Django REST APIで作るオリジナルJIRA
こちらもDjangoを使ったフルスタック開発の教材になります。
タスク管理で有名なJIRAのクローンを作りながら、DjangoとTypeScriptを使ったReact Hooksの学習が行えます。
実際に使えるようなアプリを作成されているので、かなり実践的な内容になっています。
最後に
React.jsを学習する際におすすめの教材について紹介しました。
特にUdemyの実践的な内容を１つでもマスターできれば、すぐに業務や個人開発に使えると思います。
またおすすめの教材が出てきましたら、更新してお伝えしたいと思います。
以上、「React.js学習のおすすめの教材を紹介!」でした。
最後までご覧いただき、ありがとうございました！
