【初心者〜上級者まで】React学習におすすめの本・レベル別5選

【初心者〜上級者まで】React学習におすすめの本・レベル別3選

初級（JavaScript初級・中級者向け）

React.js&Next.js超入門

【Book Info】 本体：3,000円＋税, 発売：2019/03/09, B5変・456ページ, モノクロ

”超”と付くだけあって、JavaScript初級・中級レベルで React.js を始めるにはぴったりの本。 最初は CDN を使った React のサンプルから始まり、１つのHTMLファイルに基本的なJavaScript処理をReactで実行。 そして JavaScript や React に慣れてくる3章から、 npm を使って React を実行。

サンプルアプリはメモアプリと計算アプリ、アドレス帳とシンプルですが、 React の基礎を学ぶにはぴったり。 React 特有のファイル構成や処理フローに慣れることができるでしょう。

Reactサンプルアプリ、単なる ToDoアプリではなく、検索機能付き！

後半の 6章では Firebase のデータベースを使い、本格的なアプリケーション開発も紹介されています。

ただサンプルコードは、5500行にも及ぶ １つのテキストファイルにあって、その中から適時コードをコピペして、自分のプロジェクトで実行する必要が。急いで飛ばし読みしていると、ディレクトリの作成やファイルの作成手順が抜けて、「あれ、うまくいかない」というストレスの要因になるので注意しましょう。

サンプル通りに行えばエラーもなく、安心して読める、試せる参考書でした。さすが購入困難な本、と思いましたね。 また他の参考書では、React で扱うデータをローカルストレージの領域に保存できる、とまではよく紹介されていますが、「どこに？どうやって確認？」というところまでは触れられていません。しかし、こちらの本は細かくここをクリックして、ここを開いて、と学習者のニーズを察知し、満たしてくれます。こういった点は、技術系ライターの著者ならではの気遣いで「ありがたいな」と思いました。 尚、 React の醍醐味である Material-UI などのコンポーネントは紹介されていません。

作りながら学ぶReact入門

【Book Info】 本体：2,000円＋税, 発売：2017/09/16, B5変・220ページ, モノクロ

女性エンジニア兼プログラミング教室経営者の吉田氏が2016年に、自身の React 開発経験を経て執筆した本。記述内容はプログラミング初心者向けではないものの、 React については順を追って分かりやすく情報整理してくれています。JavaScriptの配列や JSON あたりを抵抗なく処理できるスキルがあれば楽しめる本でしょう。

内容としては、JavaScript や ブラウザなど関連要素の歴史から、Node.js のインストール、 React のインストール、Hello World、 Material-UI などのコンポーネントを利用する例まで。 220ページの中に必要な情報を詰め込んでくれていて、私は集中して読み終えることができました。

サンプルアプリは、ジャンケンゲームとシンプルなものですが、順を追ってそのジャンケンゲームをグレードアップしていきますので、自分でコードをコピペしていて「面白い」と思いましたね。

Reactコンポーネントの Material-UI を使ったジャンケンゲームの例

ただコード自体は、 GitHub に上がっているのですが、ディレクトリやファイルは自分で作る場面があるので、単純に git clone だけでは ❌、きちんと読み進める必要があります。 また実務を想定するようなサーバーやデータベース、非同期処理、アーキテクチャ（Reduxなど）の紹介はないので、あくまで React 自体を学習する本と言えるでしょう。

React のアプリケーションの作成も、他の本が create-react-app my-app と雛形を一気に作るコマンドを紹介しているのに対して、こちらの本は webpack や babel など一つ一つかみしめるように作成（30P）。この React の基本的な作成方法を紹介しているのは、この本だけでした。

中級（JavaScript上級者向け）

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

【Book Info】 本体：2,980円＋税, 発売：2018/02/19, B5変・312ページ, モノクロ

Yahoo系エンジニアによって 2018年にリリースされた本著。先ほど紹介した２冊に比べると難易度は上がり、コードは断片的な紹介。実際に読んで試した感じとしては、まずはサンプルプログラムを用意して、本と照らし合わせながら進めたが良さそうなこと。

サンプルプログラムはフォルダ毎にまとめて用意されていますので、とりあえず該当ディレクトリに移動して npm install & npm start すれば概ねのサンプルを実行でき、 React を体験できます。実際に動かしてから、コードを見て、React の中身に迫っていく形でもいいと思いました。

サンプルの内容としては、ToDoアプリに Yahoo!API を利用した商品リストのアプリ、それから Firebase を活用したデータベースの扱い方など。中盤を過ぎると実戦モードで「面白そうだな」と思うサンプルがありますが、残念ながらそのままのコードで実行してもエラーで ❌ です。

10章のYahoo!APIを使うサンプルがうまくいきませんでした...

なんとかこの問題をクリアしようと頑張りましたが、結局 1時間奮闘しても私の力では npm ベースで動かすことができませんでした。 こうしたエラーハンドリングを通じて、React 特有のコンポーネント間の関係やバージョン管理の性質を体験。実はこの問題、同じようにエラーで悩んでいる方もいらっしゃり、その方は npm ではなく yarn ベースでエラーをクリアされていました。

Yahoo!API を使った React のサンプルプログラム: GitHub/baki504

10章以降はそのままの npm install & npm start ではうまくいかないので、 React の基礎をしっかり押さえた上で挑戦していく必要があると思いました。 12章では Firebase への接続、13章ではサーバレンダリングと React でのアプリ開発に欠かせない要素が紹介されていますので、頑張ってサンプルアプリ、実行してきたいですね。

翌日参考書の Node は v.8.9.4、 私の Node は v.14.9.0 とバージョンが違うことに気付き、バージョンを落として npm install , npm start するとサンプル実行できました。

Learning React（英語）

【Book Info】 本体：3,050円(Kindle), 発売：2017/05/18, 350ページ, モノクロ・一部カラー

ちょっと日本語の React に関する本がなかったので、こちらの英語の本に挑戦してみました。英語にやや抵抗はありましたが、日本語の本にはない React の処理も行っており、余裕があれば一読をお勧めします。

前半は JavaScript の歴史や基本的な文法、クラスなどを紹介し、中程に React の基本的な操作、後半に 複数ページにまたがるサイトの構築方法や TypeScript を使った React、それからサーバーでの処理について紹介されています。 概ね「著書：作りながら学ぶReact入門」と同じような内容ですが、ブラウザ上に出力するテキストをJSONファイルで扱ったりする例（5章）もあり、API処理などを想定するとこうした処理方法は参考になりました。

また今回ペーパーベースが売り切れだったので Kindle の電子書籍で購入したのですが、エレメントや JSX などの解説図が日本語の本にはないぐらい分かりやすく、読み疲れない、印象。

Learning Reactより一部抜粋

サンプルコードはセクション毎にフォルダに分けられていますが、6章、7章、8章、9章あたりはカラで、自分で作業する必要があります。コード自体は GitHub で管理されていますので、とりあえず git clone して、 npm install & npm start するだけでも React を楽しめると思いました。

テキストは英語になりますが、 JavaScript 自体英語のようなものでプログラムを順番に読んでいき、分からないところを調べればいけるな、と思いましたね。

TypeScript に慣れていない方は、 11章、12章のサンプル実行が難しいと思います。 peer という npm が、 node 3以降個別対応になり、30分ほど挑戦しましたが、私は 11章のエラーを回避できませんでした。

上級（JavaScript上級者向け）

React開発　現場の教科書

【Book Info】 本体：3,839円, 発売：2018/03/23, 336ページ, モノクロ・一部カラー

DMMのフロントエンジニア 石橋氏が執筆した React本で、これまでの React を楽しもう、という調子ではなく、React の設計手法からチームでの開発方法、リリース後のメンテナンスなど実務目線で書かれた本。

そのためサンプルコードも JavaScript上級者、 React 中級者レベルの書き方で、サンプルコードも断片的なプログラムのみ。仕事で React を扱わないといけない方にとっては、非常に参考になる本と思いました。

単に React 使おうね、というメソッドではなく、 Atomic Design というデザイン手法に合わせた React の使い方を指南。React への CSS 作法も一つの方法だけでなく、分離した方法の紹介などいくつかの開発パターンを想定して紹介。今回ご紹介した本の中で一番 React と CSS について詳しく書かれた本でした。

プログラムの検証方法についても、 一般的な TestUtils だけでなく「enzyme」や「Lint」「flow」など様々な方法を紹介。 比較的読んでコードを実行というよりは、「読み物」的な内容なので、電車などの移動時間によさそうです。

まとめ

今回 React の代表的な本を紹介させて頂きましたが、合わせて React の公式ドキュメントや 関連する YouTube、 Reactエンジニアのブログやサンプルコードなども見るとより理解が深まると思いました。

また React の学習に合わせて、Chrome の React 拡張機能もセットしておくと、「おっ、このサイトも React 使っているのか」 とまるで HTML や CSS を学習し始めたときのようにたくさんの React 情報を発見することができます。

「あ〜 Reactできた方がいいだろうけど、 JavaScript 自体が難しいんだよな...」「僕には JavaScript 無理だな...」 と立ち止まっている方。本当に JavaScript が難しいか、一度 CodeCamp の無料体験で JavaScript 動かしてみませんか？ 一人では不安で動かせなかった自分の手も、サポートがあると案外楽しいですよ。無料体験については、CodeCamp 公式ページよりチェックしてみてください。