【新刊紹介】『速習 React』、隙間時間でも読めるコンパクトなReact入門書

　CodeZineに寄稿いただいている執筆コミュニティ「WINGSプロジェクト」代表の山田祥寛さんのKindle本『速習 React』が8月27日に刊行されました。手軽に学べる初級者のためのReact解説書です。

　フロントエンド開発にjQueryを使ってきたが、色々と複雑になってきた。jQueryだけでは却って大変だな、ちょっと機能が足りないな、と思っている方はいませんか？ そんな方に是非お勧めしたいのが、Reactです。

　本書では、Reactの基本について、10のPartに分けてサンプルコードとともに詳しく解説しています。本書掲載のサンプルは、サポートページからダウンロード可能です。どんどん動かして試してみてください。

担当編集者からのコメント

　WINGSプロジェクト刊行のKindle電子書籍、8冊目です。

　気になる技術をサクッと短時間で学ぶ、『時間もお金も低コストに』をコンセプトとした「速習シリーズ」。これまで「速習 ECMAScript 2018」「速習 webpack」「速習 Vue.js」「速習 TypeScript」など、おかげさまで、いずれもご好評いただいており、今回はシリーズ第7弾「速習 React」です。

　内容は、Facebook開発の、現在人気のJavaScriptライブラリ「React」の解説書です。Reactを学ぶための書籍ということで、その基盤となるJavaScript言語については、基本的な理解があることを前提としています。その分、短時間でReactの基本を掴めるような構成になっています。

　「Reactって何だろう？」「ちょっと気になるなぁ」と思っている方のために、冒頭部分を少し覗いてみましょう。

　jQueryの便利さは、既にさまざまな資料で語られていますが、近年、フロントエンド開発がより複雑化するに伴い、不足な面も目立ってきました。

　たとえば、なにかしらの入力をトリガーにデータを取得し、その結果をページに反映させる、といった処理も、jQueryでは、「入力値を文書ツリーから取得し」「Ajax通信に引き渡し」「取得した結果を（たとえば）<ul>／<li>要素に加工したものをページに埋め込む」という操作が必要になります。JavaScript側では、常に入出力にあたって、文書ツリーを意識しなければならないのです。

　この交換は大概面倒なもので、レイアウトとコードの混在は、アプリ全体の見通しを悪くします。日常的に文書ツリーの操作を繰り返すSPA（Single Page Application）ともなれば、jQueryで実装するのは現実的ではないでしょう。

　そこで求められたのが、文書ツリーとオブジェクト（JavaScript）との間を取り持つようなライブラリ／フレームワークの存在です。アプリ全体を俯瞰し、文書ツリーに変化があればオブジェクトに反映させ、逆にオブジェクトが変化すればテンプレートに反映させる――そのためのしくみを提供する存在です。これによって、アプリ開発者は、各々の専門性に応じてテンプレート（HTML）、ロジック（JavaScript）の開発を分業できます。また、双方を明確に分離することでコードの見通しも改善し、アプリの開発生産性／保守性が向上します。

　…中略…

　Reactでは"learn once, write anywhere"という思想を持っています。具体的には、ReactスタイルでAndroid／iOSアプリを開発するためのツールとしてReact Nativeを提供しています。Reactひとつを学べば、ブラウザー、Android／iOSと、主なフロントエンドで動作するアプリを遍く開発できてしまうのです。学習効率という意味で、これはReactの大きなアドバンテージです。

　いかがでしょうか。ほんの一部だけですが、少し興味がわいてきたでしょうか。「もっと見てみたい」と思われた方はぜひ、続きを読んでみてください。

　隙間時間でも読めるように、なるべくコンパクトに情報をまとめ、図やサンプルコードと合わせて解説しています。本書掲載のサンプルコードは、サポートサイトからダウンロードできるので、是非、ご活用ください。

一般読者からのコメント（tchikubaさん）

　「速習」シリーズ本のうちの1つで、React.jsについて解説された本です。

　PropTypes／State／コンポーネントのライフサイクルなど、React初心者にとって概念を正確に捉えるのに比較的つまずきやすい部分が端的にわかりやすく解説されていると感じました。

　また、プログラミングにおける三大制御構造に即してReactで繰り返し処理や条件分岐する実例が紹介されていたり、各種フォーム要素をReactで取り扱う実例が網羅的に紹介されていたりします。

　総じて、React.jsをあつかう上で必須となる、基本的な概念をしっかり理解するのにちょうどよい書籍といえると感じました。手を動かしながらでなければ、通しで読み通すだけなら1日もあれば十分かと思います。その意味でReact.jsへの入門書籍としてはちょうどよい分量といえるのではないでしょうか。

　なお、書籍冒頭にも注意書きがある通りですが、最新のReact.jsをあつかう上で前提知識となるES2015以降の記述方法をベースとしています。ES2015以降の記述方法について理解が不安な方はまずそちらの学習をある程度行ってから読み進める方が理解がスムーズだと思います。

　より実践的なReact.jsアプリを開発するには、サーバーサイドAPIと連携したり、State管理のためにReduxを導入したり、JavaScriptを型セーフティにするためにTypeScriptを導入するなどの選択肢があります。入門書としてはちょうど良い分量かと思いますが、さらにReact.jsの学習を深めるための手引きのようなものが示されていると、なお良いかもしれないなと私見ですが思いました。

仕様

• 書名：『速習 React』
• 著者：山田祥寛
• 出版社：WINGSプロジェクト
• 頁数：151ページ
• 定価：454円（＋税）
• 色数：4色
• 刊行日：2018年8月27日

目次

Part 1：イントロダクション

• React登場の経緯
• 対象読者
• サンプルプログラムについて

Part 2：Reactの基本

• React開発の準備
• サンプルアプリの内容を確認する
• React要素のレンダリング
• 補足：ブラウザーだけでReactアプリを実行する

Part 3：JSXの基本

• JSXのルール
• テンプレートにJavaScript式を埋め込む - {…}
• 補足：JSXの実体

Part 4：コンポーネントの基本

• 関数コンポーネントとクラスコンポーネント
• コンポーネントへのパラメーターの引き渡し

Part 5：プロパティ型の検証（prop-types）

• prop-typesの基本
• prop-typesの特殊なデータ型
• プロパティ値の既定値を定義する
• 補足：型定義のもうひとつの記法

Part 6：条件分岐と繰り返し処理

• 繰り返し処理
• 条件分岐

Part 7：イベント処理とState

• イベント処理の基本
• bindのための他のアプローチ
• イベントハンドラーに引数を渡す
• イベントプーリング
• コンポーネントの状態を管理する - State

Part 8：フォームの実装

• テキストエリア
• 選択ボックス
• リストボックス
• ラジオボタン
• チェックボックス（単一）
• チェックボックス（複数）
• ファイル入力ボックス

Part 9：ライフサイクルメソッド

• 主なライフサイクルメソッド
• ライフサイクルメソッドの例

Part 10：ルーティング

• ルーターの基本
• さまざまなルーティングの手法

書籍情報

• 著者プロフィール
• 基本情報
• サポートサイト