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

フロントエンドの入門書

ReactによるコンポーネントベースのWebフロントエンド開発の入門書です。簡単なサンプルを用いてReactの基本やJSXを学ぶことができます。開発に必要なツールも丁寧に解説されています。初心者向けではありますが、HTML/CSS、JavaScriptの知識は必須です。

Stoyan Stefanov (著), 牧野 聡 (翻訳)
出版社: オライリージャパン (2017/3/11)、出典:出版社HP

本書で使用するシステム名、製品名は、それぞれ各社の商標、または登録商標です。なお、本文中ではTM、R、Cマークは省略している場合もあります。

Eva、ZlatinaとNathalieに本書を捧げる

まえがき

ここカリフォルニアの夜は心地よい暖かさです。海からの微かな風が、筆者の苦い思い出を呼び覚ましました。2000年頃に起こった、ロサンゼルスでの出来事です。CSSsprites.comという小さなWebアプリケーションが完成し、サーバーにFTPでアップロードしてまさに公開しようとしていました。その直前の数日間に筆者を悩ませた問題を、思い出しているところでした。アプリケーション本体を完成させるのに20パーセントの時間しか割けず、残りの80パーセントはユーザーインタフェースとの格闘に費やさなければなりませんでした。事あるごとにgetElementById()を使う必要がなく、アプリケーションの状態(アップロードが完了したか、エラーが発生したか、ダイアログがまだ表示されているか、など)を気にかける必要がなかったなら、空いた時間でツールを何個も作れたことでしょう。どうしてUI開発には、これほどの時間がかかるのでしょうか。ブラウザごとの違いにも気を使わなければなりません。苦い思い出は、苦しい叫びに変わろうとしていました。

時計の針を2015年3月に進めます。FacebookのF8カンファレンスが開催されています。筆者が参加しているチームは、完全に書き直された2つのWebアプリケーションを発表しようとしていました。1つは第三者からのコメントを受け付けるしくみで、もう1つはこれと組み合わせて使う進行役ツールです。筆者の小さなCSSsprites.comと比べるまでもありませんが、これらは完全なWebアプリケーションでした。ものすごく大量の機能を持ち、はるかに強力で、信じられないほどのトラフィックに対応できました。しかも、開発は楽しく行えました。これらのアプリケーションを知らなかった人も、JavaScriptやCSSを知らなかった人でさえも、そこかしこで改善や新機能の追加が可能でした。開発は速度を増し、しかも容易でした。チームのメンバーの1人は「なるほど、全部わかったぞ」と言ったものです。これらを可能にしてくれたのは、Reactです。
Reactとは、UIを組み立てるためのライブラリです。UIを一度定義するだけで、これをずっと使ってゆけるようになります。アプリケーションの状態が変化すると、この変化に応答してUIが再構築されます。余分なコードはまったく必要ありません。文字どおり、UIを定義するだけでよいのです。定義というよりは宣言かもしれません。小さく管理が容易なコンポーネントを使って、大きく強力なアプリケーションを作成できます。関数のコードのうち半分以上を費やして、DOM』回る必要もありません。必要なのは、(通常のJavaScriptのオブジェクトを使って)アプリケーションの状態を管理することだけです。あとは特に難しいことはありません。
Reactは簡単に習得できます。1つのライブラリについて学ぶだけで、以下のすべてを作れます。

・ Webアプリケーション
・ iOSやAndroidのネイティブアプリケーション
・ HTMLのCanvasアプリケーション
・ TVアプリケーション
・ ネイティブなデスクトップアプリケーション

同じコンポーネントやUIの考え方を使って、パフォーマンスや利用されるコントロール(ネイティブのように見えるだけの偽物ではなく、本当にネイティブなコントロールです)の面でも完全にネイティブなアプリケーションを作れます。まだ誰も成功させたことのない write once, run evern(一度書いたらどこでも動く)ではなく、learn once, use everywhere (一度学べばどこでも使える)が目標とされています。

まとめます。Reactを使うと、開発にかかる時間のうち80パーセントを開発者の手に取り戻すことができ、アプリケーションにとって本当に大切なこと(これがアプリケーションの存在理由のはずです)の実現に注力できるようになります。

本書の構成

本書では、Web開発の観点からReactについて学びます。1章から3章では、空のHTMLファイルを元にしてアプリケーションを作ってゆきます。新しい構文や補助的なツールに頼らずに、Reactだけを学びます。
4章ではJSXを紹介します。必須ではありませんが、Reactとともに利用されるのが一般的です。以降の章は、実際のアプリケーション開発に必要なものや、開発を助けてくれるツールについての解説です。例えばJavaScriptのパッケージングツール (Browserify)やユニットテスト(Jest)構文チェック (ESLint)、型チェック (Flow)、データフローの最適化 (Flux)、イミュータブルなデータ(immutableライブラリ)などを取り上げます。本書の主題はReactであり、これらの補助的なテクノロジーの解説は最小限にとどめられています。これらのツールについて知り、どれを使うべきか適切に選べるようになることが目標です。
Reactの習得をめざす旅が、スムーズで実り多いことを祈ります。

サンプルコードの使用について
原書のサンプルコードはhttps://github.com/stoyan/reactbookで公開されています。これを一部日本語化したものはhttp://www.oreilly.co.jp/books/9784873117881で公開されています。

サンプルコードについて
・CSSやJS、PNGなど、本文中で紹介されていないファイルも含まれています。
・ファイルが多数のため、日本語化されていないままの部分もあります。ご了承ください。
・サンプルコードに含まれている各ディレクトリと本文との対応は以下のとおりです。
1章~4章 chapters /
5章 reactbook-boiler /
6章 whinepad v0.0.1/、whinepad/
7章 whinepad2/
8章 whinepad3/
・chapters以外のディレクトリでは、各章の最後まで作業を進めた時点でのファイル
(および、追加で使われるファイル)が置かれています。
・chapters以外のディレクトリでは、Reactをはじめとする外部ライブラリは含まれて
いません。「5.2.4 Reactなど」などを参考にして、アプリケーションごとにライブラリ をインストールしてください。
・本書のサンプルは macOS Sierra 10.12.2上の Google Chrome 55.0でReact 15.4.1 と
Node.js v6.9.4を使って動作確認しました (Windows OSでは利用できないツールがあ ります)。

本書の目的は、読者の仕事を助けることです。一般に、本書に掲載しているコードは読者のプログラムやドキュメントに使用してかまいません。コードの大部分を転載する場合を除き、我々に許可を求める必要はありません。例えば、本書のコードの一部を使用するプログラムを作成するために、許可を求める必要はありません。なお、オライリー・ジャパンから出版されている書籍のサンプルコードをCD-ROMとして販売したり配布したりする場合には、そのための許可が必要です。本書や本書のサンプルコードを引用して質問などに答える場合、許可を求める必要はありません。ただし、本書のサンプルコードのかなりの部分を製品マニュアルに転載するような場合には、そのための許可が必要です。出典を明記する必要はありませんが、そうしていただければ感謝します。
Stoyan Stefanov著

『React ビギナーズガイド』(オライリー・ジャパン発行)のように、タイトル、著者、出版社、ISBNなどを記載してください。
サンプルコードの使用について、公正な使用の範囲を超えると思われる場合、または上記で許可している範囲を超えると感じる場合は、permissions@oreilly.comまで(英語で)ご連絡ください。

意見と質問
本書(日本語翻訳版)の内容については、最大限の努力をもって検証、確認していますが、 誤りや不正確な点、誤解や混乱を招くような表現、単純な誤植などに気がつかれることもあるかもしれません。そうした場合、今後の版で改善できるようお知らせいただければ幸いです。将来の改訂に関する提案なども歓迎いたします。連絡先は次のとおりです。
株式会社 オライリー・ジャパン
電子メール japan@oreilly.co.jp

本書のウェブページには次のアドレスでアクセスできます。
http://www.oreilly.co.jp/books/9784873117881
http://shop.oreilly.com/product/0636920042266.do (英語) https://github.com/stoyan/reactbook (著者)
オライリーに関するそのほかの情報については、次のオライリーのウェブサイトを参照してください。
http://www.oreilly.co.jp/
http://www.oreilly.com/ (英語)

表記上のルール
本書では、次に示す表記上のルールに従います。

太字 (Bold)
新しい用語、強調やキーワード、キーフレーズを表します。

等幅 (Constant Width)
プログラムのコード、コマンド、配列、要素、文、オプション、スイッチ、変数、属性、キー、関数、型、クラス、名前空間、メソッド、モジュール、プロパティ、パラメーター、値、オブジェクト、イベント、イベントハンドラ、XMLタグ、HTMLタグ、マクロ、ファイルの内容、コマンドからの出力を表します。その断片(変数、関数、キーワードなど)を本文中から参照する場合にも使われます。

等幅太字 (Constant Width Bold)
ユーザーが入力するコマンドやテキストを表します。コードを強調する場合にも使われます。

等幅イタリック(Constant Width Italic)
ユーザーの環境などに応じて置き換えなければならない文字列を表します。

謝辞
本書の草稿を査読し、フィードバックや訂正の指摘をくださった皆様 (Andreea Manole、Iliyan Peychev、Kostadin Ilov、Mark Duppenthaler、Stephan Alber、Asen Bozhilov)に感謝します。
Reactを開発あるいは利用し、朝から晩まで続く筆者の質問に答えてくださったFacebookの皆様にも感謝します。すばらしいツールやライブラリ、記事、利用法のパターンなどを生み出し続ける、 広義のReactコミュニティーの皆様にも感謝します。
Jordan Walkeに特別な感謝を贈ります。
Meg Foley、Kim Cofer、Nicole ShelbyをはじめとするO’Reilly Mediaの多くの皆様が、本書を現実にしてくれました。
最後に、サンプルアプリケーションのUI (http://www.whinepad.com/で公開されています)をデザインしてくれたYayor Vatchkovに感謝します。

Stoyan Stefanov (著), 牧野 聡 (翻訳)
出版社: オライリージャパン (2017/3/11)、出典:出版社HP

目次

まえがき

第I部 基礎

1章 Hello world
1.1 セットアップ
1.2 ハロー、Reactワールド
1.3 内部で起こっている処理
1.4 React.DOM
1.5 特別なDOMの属性
1.6 ブラウザの拡張機能 (React Developer Tools)
1.7予告:カスタムコンポーネント

2章 コンポーネントのライフサイクル
2.1 最低限の構成
2.2 プロパティ
2.3 propTypes
2.3.1 プロパティのデフォルト値
2.4 ステート
2.5ステートを持ったテキストエリアのコンポーネント
2.6 DOMのイベント
2.6.1 従来のイベント処理
2.6.2 Reactでのイベント処理
2.7 プロパティとステート
2.8 初期状態をプロパティとして渡す(アンチパターン)
2.9 外部からコンポーネントへのアクセス
2.10 プロパティの事後変更
2.11 ライフサイクルのメソッド
2.12 ライフサイクルの例:すべてをログに記録する
2.13 ライフサイクルの例:ミックスイン
2.14 ライフサイクルの例:子コンポーネントの使用
2.15 パフォーマンスの向上:コンポーネントの更新を阻止する
2.16 PureRenderMixin

3章 :高機能な表コンポーネント
3.1 まずはデータから
3.2 表のヘッダーを描画するループ
3.3 コンソールに表示された警告への対応
3.4

のコンテンツの追加
3.4.1 コンポーネントへの機能追加
3.5 並べ替え
3.5.1 コンポーネントへの機能追加
3.6 並べ替えの矢印
3.7 データの編集
3.7.1 編集可能なセル
3.7.2 入力フィールドのセル
3.7.3 データの保存
3.7.4 まとめと仮想DOMの差分
3.8 検索
3.8.1 ステートとUI
3.8.2 コンテンツのフィルタリング
3.8.3 検索への機能追加
3.9 操作手順の再実行
3.9.1 再生への機能追加
3.9.2 別の実装方法
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.9.1 XSS対策
4.10 スプレッド演算子
4.10.1 親から渡された属性とスプレッド演算子
4.11 複数のノードの生成
4.12 JSXとHTMLの違い
4.12.1 classとforは指定できない
4.12.2 styleにはオブジェクトを指定する
4.12.3 閉じタグは必須
4.12.4 キャメルケースの属性名
4.13 JSXとフォーム
4.13.1 onChange ハンドラ
4.13.2 value { defaultValue
4.13.3