【2020年版】react.js入門者必見!オススメのreact.js参考書・本・書籍まとめ。超初心者から上級者まで

この記事では、「react.js」を勉強するための参考書をご紹介します。

「react.js 参考書」で検索時の上位10位の意見も取り入れながら、最終的にたどり着いた参考書をご紹介します。

react.jsとは?需要は?

react.jsは、JavaScript数あるのフレームワークのなかで、最も人気のフレームワークです。
人気の理由は、

  • SPA(シングルページアプリケーション)が作りやすいこと
  • JSファイルの設計がわかりやすい
  • 単価が高い(月80万くらい)

です。詳しくは、こちら
単価が高く、需要もあるので、学ばない理由がありません。
今回は、そんなReactのオススメの参考書をご紹介していきたいと思います。

前提知識は?

react.jsを学ぶ上で必要な前提知識は、JavaScript、HTML、CSSです。
JavaScriptって何という方は、JavaScriptから勉強した方が良いですね。↓

JavaScriptのオススメの参考書

【2020年版】JavaScript入門者必見!オススメのJavaScript参考書・本・書籍まとめ。超初心者から上級者まで

自分に合った参考書までスキップ

 入門者
 中級者
 上級者

入門者にオススメのreact.jsの参考書ランキング

そもそもreact.jsの参考書自体少ないのでかなり限られてきますが、ランキング形式で、3つご紹介したいと思います。

react.js入門者は、こちらの参考書一択!

React.js&
Next.js
超入門

React.js&Next.js超入門


この参考書について

どんな参考書?

react.js入門者は、正直こちらの参考書一択ですね。
本書は、Reactの基本をしっかりと解説されており、reactを使う上でのテクニックまで書かれている参考書です。こちらの参考書を一通り行えば、誰でも簡単なWebアプリは作れるようになると思います。これからかなり主流になってくるであろう、Firebaseのデータベースとの連携の仕方も書いているので、これからReactを学ぼうとしている方には本当に最適な参考書です。

どんな人におすすめ?

  • React入門の方
  • Reactの基本を学びたい方
  • 簡単なWebアプリを作ってみたい方

何を学べる?

Reactの基本をしっかりと学べ、1人でアプリを作れるようになります。

評価

難易度
(2.0)
わかりやすさ
(5.0)
オススメ度
(5.0)
Amazon評価
(4.0)

目次

1 Reactを準備しよう!
2 JSXをマスターしよう!
3 コンポーネントをマスターしよう!
4 Reduxで値を管理しよう!
5 Next.jsでReactをパワーアップしよう!
6 Firebaseでデータベースを使おう!
Addendum JavaScriptオブジェクト超入門

詳細を見る

Amazonで安く買う方法

 

とにかく手を動かして学びたいなら

作りながら学ぶ
React入門

作りながら学ぶReact入門


この参考書について

どんな参考書?

先ほど紹介した、「React.js&Next.js超入門」を読んでから、2冊目に取り掛かるならこちらの参考書をオススメします。
本書は、一つのページを作成しながら基本を学んでいく参考書です。テストコードの作成もあるので、独学者が疎かにしがちなテストコードもしっかりと学べます。

どんな人におすすめ?

  • とにかく手を動かして学びたい方
  • 基本をしっかりと抑えたい方
  • React.js&Next.js超入門を読んだばかりの方

何を学べる?

手を動かしながらしっかりと基本を学べます。

評価

難易度
(3.0)
わかりやすさ
(5.0)
オススメ度
(5.0)
Amazon評価
(3.5)

目次

hapter 1 はじめに
1.1 本書について
1.2 Reactとは
Chapter 2 モダンJS開発環境の構築
2.1 ターミナル、コマンドプロンプト
2.2 テキストエディター
2.3 Google Chrome
2.4 Node.jsのインストール
2.5 npmコマンドのインストール
2.6 インストール用プロジェクトの作成
2.7 npmパッケージのインストール
2.8 インストール結果の確認用Reactコードの作成
2.9 インストール結果の確認
Chapter 3 モダンJS開発環境の解説
3.1 Node.js
3.2 npm
3.3 Babel
3.4 ESLint
3.5 css-loader, style-loader
3.6 webpack
3.7 Gitでのプロジェクト管理
3.8 IDE
Chapter 4 ES6
4.1 ES6とは
4.2 ES6での主な変更点
4.3 いろいろな補足
Chapter 5 JSX
5.1 JSXとは
5.2 JSXの基本
5.3 補足
Chapter 6 コンポーネント
6.1 新しいプロジェクトを作成
6.2 最初のコード
6.3 コンポーネントの作り方
6.4 PropsとState
6.5 ライフサイクル・メソッド
6.6 イベントの扱い
6.7 フォーム
6.8 詳細なライフサイクル・メソッド
Chapter 7 コンポーネントの応用
7.1 既存のReactコンポーネントの利用
7.2 ルーティング
7.3 サーバーとの通信
Chapter 8 テスティング
8.1 ソフトウェアテスト入門
8.2 ユニットテスト(Unit test)
8.3 E2Eテスト(End to End test)
Chapter 9 さらに学ぶなら
9.1 Redux
9.2 Flowtype
9.3 React Native
9.4 Electron
9.5 Reactの情報源

詳細を見る

Amazonで安く買う方法

 

勉強が得意な方が学ぶなら

React
ビギナーズガイド
コンポーネントベースのフロントエンド開発入門

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門


この参考書について

どんな参考書?

第3位は、オライリーの参考書です。オライリーの参考書は、専門用語がたくさん出てくるので少し読むのが難しいです。本書は入門書ですが、ちらほら専門用語が出てくるので、読むときは、Googleで単語を調べながら読む必要があります。
しかし、内容はかなり理解しやすいようになっています。React.jsの概要がしっかりと抑えられ、基本から実践まで幅広く抑えられている参考書です。

どんな人におすすめ?

  • JavaScript中級者
  • 勉強好きの方
  • しっかりとReact.jsを抑えたい方

何を学べる?

JavaScript中級者が、基本から実践までしっかりとReact.jsを学ぶことができます。

評価

難易度
(4.0)
わかりやすさ
(4.0)
オススメ度
(3.0)
Amazon評価
(3.5)

目次

1章 Hello world
1.1 セットアップ
1.2 ハロー、Reactワールド
1.3 内部で起こっている処理
1.4 React.DOM.*
1.5 特別なDOMの属性
1.6 ブラウザの拡張機能(ReactDeveloperTools)
1.7 予告:カスタムコンポーネント
2章 コンポーネントのライフサイクル
2.1 最低限の構成
2.2 プロパティ
2.3 propTypes
2.4 ステート
2.5 ステートを持ったテキストエリアのコンポーネント
2.6 DOMのイベント
2.7 プロパティとステート
2.8 初期状態をプロパティとして渡す(アンチパターン)
2.9 外部からコンポーネントへのアクセス
2.10 プロパティの事後変更
2.11 ライフサイクルのメソッド
2.12 ライフサイクルの例:すべてをログに記録する
2.13 ライフサイクルの例:ミックスイン
2.14 ライフサイクルの例:子コンポーネントの使用
2.15 パフォーマンスの向上:コンポーネントの更新を阻止する
2.16 PureRenderMixin
3章 Excel:高機能な表コンポーネント
3.1 まずはデータから
3.2 表のヘッダーを描画するループ
3.3 コンソールに表示された警告への対応
3.4 tdのコンテンツの追加
3.5 並べ替え
3.6 並べ替えの矢印
3.7 データの編集
3.8 検索
3.9 操作手順の再実行
3.10 表データのダウンロード
4章 JSX
4.1 ハロー、JSX
4.2 JSXのトランスパイル
4.3 Babel
4.4 クライアント側でのトランスパイル
4.5 JSXでのトランスパイル
4.6 JSXでのJavaScript
4.7 JSXでの空白
4.8 JSXでのコメント
4.9 JSXでのHTMLエンティティ
4.10 スプレッド演算子
4.11 複数のノードの生成
4.12 JSXとHTMLの違い
4.13 JSXとフォーム
4.14 JSX版のExcelコンポーネント
第II部 実践
5章 開発環境のセットアップ
5.1 アプリケーションのひな型
5.2 必要なソフトウェアのインストール
5.3 ビルドの実行
5.4 デプロイ
5.5 これからの作業
6章 アプリケーションのビルド
6.1 Whinepadバージョン0.0.1
6.2 コンポーネント
6.3 アプリケーションの設定
6.4 Excelコンポーネント(改良版)
6.5 Whinepad
6.6 全体をまとめる
7章 品質チェック、型チェック、テスト、そして繰り返し
7.1 package.json
7.2 ESLint
7.3 Flow
7.4 テスト
8章 Flux
8.1 考え方の要点
8.2 Whinepadの見直し
8.3 Store
8.4 Action
8.5 Fluxのまとめ
8.6 イミュータブル

詳細を見る

Amazonで安く買う方法

 

中級者にオススメのreact.jsの参考書2選

実務で使えるレベルになりたいなら

入門 React
コンポーネントベースのWebフロントエンド開発

入門 React ―コンポーネントベースのWebフロントエンド開発


この参考書について

どんな参考書?

こちらもオライリーの参考書です。
本書は、中級者向けというよりかは、基本的な知識を学んだ方向けの参考書です。
この参考書で基本的な知識を学んだ方が、実務で使えるレベルまで学べます。

どんな人におすすめ?

  • 基本を一通り学んだ方
  • 実務的なReactを学びたい方
  • React中級者の方

何を学べる?

基本的な知識を学んだ方が、実務で使えるレベルまで学べます。

評価

難易度
(3.0)
わかりやすさ
(3.0)
オススメ度
(4.0)
Amazon評価
(4.0)

目次

目次
まえがき
第I部 基礎
1章 イントロダクション
 1.1 背景
 1.2 本書の構成
2章 JSX
 2.1 JSXとは?
 2.2 JSXの利点
 2.3 コンポーネント合成
 2.4 JSXと HTMLの違い
 2.5 JSXなしで Reactを使用したい場合
 2.6 参考文献
3章 コンポーネントのライフサイクル
 3.1 ライフサイクルメソッド
 3.2 コンポーネント作成時に呼ばれるメソッド
 3.3 コンポーネント作成後に呼ばれるメソッド
 3.4 コンポーネント破棄時に呼ばれるメソッド
 3.5 アンチパターン:加工された値を stateに保存する
 3.6 まとめ
4章 データフロー
 4.1 props
 4.2 state
 4.3 stateと propsの使い分け
 4.4 まとめ
5章 イベント処理
 5.1 イベントハンドラの登録
 5.2 イベントと state
 5.3 イベントオブジェクト
 5.4 まとめ
6章 コンポーネントの合成
 6.1 HTMLの拡張
 6.2 合成の例
 6.3 親子間の関係
 6.4 まとめ
7章 Mixin
 7.1 Mixinとは
 7.2 まとめ
第II部 応用
8章 DOM操作
 8.1 DOMノードへのアクセス
 8.2 Reactフレンドリーでないライブラリの使用
 8.3 行儀の悪いライブラリ
 8.4 まとめ
9章 フォーム
 9.1 管理されていないコンポーネント
 9.2 管理されたコンポーネント
 9.3 フォームのイベント
 9.4 ラベル
 9.5 textareaと select
ほか
10章 アニメーション
 10.1 CSSを用いたアニメーション
 10.2 タイマーを用いたアニメーション
 10.3 まとめ
11章 パフォーマンスチューニング
12章 サーバーサイドレンダリング
13章 Reactファミリー
第III部 ツール
14章 ビルドとデバッグ
15章 テスト
第IV部 実践
16章 アーキテクチャパターン
17章 その他のユースケース
付録 A 開発環境の構築について
付録 B APIリファレンス
索引

詳細を見る

Amazonで安く買う方法

 

ライブラリ、ツールの使い方を知りたいなら

いまどきのJSプログラマーのための
Node.jsと
React
アプリケーション
開発テクニック


この参考書について

どんな参考書?

Reactを使った開発をとても網羅的に解説されている参考書です。
内容は、浅く広くいろいろなライブラリやツールの使い方を解説されています。中級者には、絶対に読んでおいて欲しい参考書です。

どんな人におすすめ?

  • Reactの使い方をもっと知りたい方
  • ライブラリ、ツールの使い方を知りたい方
  • 中級者の方

何を学べる?

Reactを使いこなすための、ライブラリやツールを学べます。

評価

難易度
(4.0)
わかりやすさ
(4.0)
オススメ度
(4.0)
Amazon評価
(3.0)

目次

第1章 Node.jsと環境の設定
1-1 モダンなJavaScriptとは?
1- サーバーサイド処理の定番Node.js
1-3 パッケージマネージャーnpm
1-4 開発に使われるエディター
1-5 コーディング規約JS Standard Style
1-6 Node.jsで簡単なWebアプリを作ってみる
1-7 Node.jsと非同期処理
1-8 Babelで最新JSを使ってみよう
1-9 モジュール機構を理解しよう
第2章 React 入門
2-1 Reactの基本的な使い方
2-2 ReactとJSXの関係
2-3 React人気の秘密はVirtual DOM?
2-4 Reactでコンポーネントを作成する
2-5 本格的なコンポーネントを作る
2-6 イベントの仕組みと実装
2-7 Reactのツールで自動ビルド
2-8 Webpackでリソースファイルを変換する
第3章 React コンポーネントの作成
3-1 コンポーネントの生成から破棄まで
3-2 Reactの入力フォーム
3-3 コンポーネント同士の連携について
3-4 コンポーネント三大要素の使い分け
3-5 入力フィルタと値のバリデーション
3-6 DOMに直接アクセスする
3-7 ReactコンポーネントでAjax通信を使う
3-8 Reactにおけるフォーム部品の扱い方
第4章 フロントエンド開発 -ElectronとReact Native
4-1 Reactでフロントエンド開発
4-2 Electronを使ってみよう
4-3 マストドンのクライアントを作ってみよう
4-4 React Nativeでスマホアプリを作ってみよう(Android編)
4-5 React Nativeでスマホアプリを作ってみよう(iOS編)
4-6 スマホ用マストドンクライアントを作ってみよう
第5章 SPAのためのフレームワーク
5-1 SPA——WebサーバーとReactの役割分担
5-2 Webアプリ用フレームワークExpress
5-3 Fluxの仕組みを理解しよう
5-4 少し複雑なアプリを作るにはReact Router
5-5 React+Expressで掲示板を作ろう
5-6 リアルタイムチャットを作ろう
第6章 実践アプリ開発!
6-1 Wikiシステムを作ってみよう
6-2 じぶんのSNSを作ろう
6-3 機械学習で手書き文字を学習しよう

詳細を見る

Amazonで安く買う方法

 

上級者にオススメのreact.jsの参考書1選

現場でReactを使うなら

React開発
現場の教科書

React開発 現場の教科書


この参考書について

どんな参考書?

タイトル通り、現場で使えるようなReact.jsのノウハウが詰まった参考書です。400ページ越えとかなりのボリュームです。
内容は、ユーザーインターフェースの設計手法であるアトミックデザインや、ビルド方法、CSSやロジックの実装、そして、品質管理の方法など、幅広い現場での使い方のヒントが書かれています。

どんな人におすすめ?

  • 現場でReactを使う方
  • もっとReactに入り込みたい方

何を学べる?

現場で使われている貴重なノウハウがこの一冊で学べます。

評価

難易度
(4.0)
わかりやすさ
(5.0)
オススメ度
(5.0)
Amazon評価
(4.0)

目次

Chapter 1 Web開発の動向
Chapter 2 Reactの基本
Chapter 3 Atomic Design
Chapter 4 ソースコードのビルド89
Chapter 5 コンポーネントの実装
Chapter 6 CSSの実装
Chapter 7 ロジックの実装
Chapter 8 プロダクトの品質

詳細を見る

Amazonで安く買う方法

 

Amazonでお得に買う方法

Amazonの賢い買い方をご紹介します。

Amazonのギフト券で買うと商品を安く買えます。現金でチャージした金額 x 最大2.5%分のポイントがもらえます。

一回のチャージ額 通常会員 プライム会員
5000〜19,999円 0.5% 1.0%
20,000円〜39,999円 1.0% 1.5%
40,000円〜89,999円 1.5% 2.0%
90,000円〜 2.0% 2.5%

Amazonプライム会員の方だったら、使わなきゃ損ですね。

Amazonプライムなら、kindleで無料で読める参考書も結構あります!

今なら、Amazonチャージ初回購入で1000ポイントもらえるキャンペーンもあります。

 

簡単登録!

Amazonチャージ初回購入で、1000ポイントキャンペーンはこちら

 

まとめ

入門者の方にオススメの参考書

中級者の方にオススメの参考書

上級者の方にオススメの参考書

コメントを残す