【最新】Reactを学ぶおすすめ本 – 基礎入門から応用まで

Reactを学ぼう

Reactはユーザインタフェース構築のためのJavaScriptライブラリとして、昨今いろいろなところで紹介されていて、目につくようになりました。React.jsまたはReactJSの名称でも知られています。メリットとして、静的なものの傾向ならjQueryの方が簡単ですが
アプリのような動的なページを作るならばReactがすぐれています。今回はreactを初めて学ぶ場合でも1から理解できるものから応用まで開発環境で使える書籍を紹介します。

ランキングも確認する
出典:出版社HP

 

React.js&Next.js超入門

React導入書

Reactの入門書として最適な1冊です。JavaScript未経験でもイメージが掴めるように、基本的な内容から丁寧な説明がされています。JSX、コンポーネント、Redux、Next.js、Firebaseなどが扱われています。

 

掌田 津耶乃 (著)
出版社: 秀和システム (2019/3/8)、出典:出版社HP

 

はじめに

ようこそ、リアクティブ・プログラミングの世界へ!

WebサイトをJavaScriptで操作する。ある程度、本格的なWeb開発をしようと思ったら、これは必ず必要になる技術です。最先端をゆくWebサイトを見ると、まるで普通のアプリケーションのように自在に画面が変化します。「これ、本当にHTMLとJavaScriptでできてるのか?」と疑いたくなるようなものもたくさんあります。それらを見るにつけ、思うのです。「こんなもの、自分にはとても作れない。無理だ!」って。
そうした人は、勘違いをしています。こうした最先端のWebサイトも、JavaScriptで1つ1つの処理をすべて書いて作っているんだ、と。実をいえば、こうした高度な表現を可歳にしているWebサイトでは、秘密兵器を使っているんです。「フレームワーク」という秘密兵器を。

「React」は、最近使われるようになってきているJavaScriptフレームワークの中でも、もっとも注目されているものの一つです。これは「リアクティブ」と呼ばれる機能を実現するプログラムで、データの更新に応じて自動的に画面表示が更新されるような仕組みを提供してくれます。
このReactは、これまでの「JavaScriptでHTMLのエレメントを操作して表示を行う」といったスタンダードなやり方とはまるで違っています。これまでのやり方は、全く役に立ちません。React特有のやり方をマスターしないといけないのです。本書では、Reactの基本に加え、Reactを強化するRedux、Next.jsといったプログラムについてもその基本的な使い方を説明します。またFirebaseというデータベースサービスをReactから利用する手法などについても扱います。
本書で取り上げる機能は、React全体のおそらく2~3割でしょう。ですから、これでReactを完全マスターできるわけではありません。が、少なくとも「Reactを使ったWebアプリ」の基本ぐらいは自分で作れるようになるはずです。
Reactで、リアクティブ/プログラミングという「まったく新しいJavaScriptプログラミング」を体験して下さい。今までのJavaScriptのイメージが大きく変わること、間違いありませんよ。

2019年2月 掌田津耶乃

目次

Chapter1 Reactを準備しよう!
1-1 Reactを動かそう
Webアプリの「2つのサイド」
複雑な画面表示を支える技術
JavaScriptの開発って?
Reactってなに?
何が必要なの?
HTMLファイル1つでReactアプリ!
Reactでメッセージを表示しよう
表示を更新しよう

1-2 プロジェクト開発をしよう
Node.jsを用意しよう
Create React Appを使おう
プロジェクト操作のコマンドについて
プロジェクトを実行してみる
プロジェクトの中身をチェック!
プロジェクトをビルドしよう
React Developer Toolsを使おう
スタンドアロン版について
スタンドアロン版を動かす
開発ツールの準備について
Visual Studio Codeを使おう
この章のまとめ

Chapter2 JSXをマスターしよう!
2-1 React利用の基本をおさらい!
HTMLファイルの内容をチェック!
DOMの仕組みを理解しよう
表示作成の基本スクリプト
スクリプトを分離しよう
複雑な表示を作るには?

2-2 JSXを使おう!
JSXを準備しよう
JSXを書いてみよう!
JSXに値を埋め込む
属性の値を設定する
スタイルの設定
関数でJSXを作る

2-3 JSXの構文的な使い方
条件で表示する
真偽値による表示の切り替え
配列によるリストの表示
mapを使った表示の繰り返し
アロー関数を使う

2-4 表示の更新とイベント
表示を更新する
更新が動かない!
クリックして更新する
フォームの値を利用する
この章のまとめ
Reactらしさは「コンポーネント」から

Chapter3 コンポーネントをマスターしよう!
3-1 関数コンポーネントを作ろう
コンポーネントってなに?
シンプルな「関数」コンポーネント
コンポーネントを表示しよう
「属性」を利用しよう
計算するコンポーネント
関数からクラスへ!
コンポーネントのクラス
簡単なコンポーネントを作ってみよう
属性を利用する

3-2 プロジェクトでコンポーネント開発!
プロジェクト、再び!
プロジェクトの表示用ファイルについて
Index.htmlについて
index.jsについて
Appコンポーネントについて
Appコンポーネントを書き換えよう
属性を利用する
コンポーネントを組み合わせる
Rectコンポーネントを別ファイルに!

3-3 ステートを使いこなそう
ステートを利用しよう
ステートを用意する
ステートの更新
イベントをバインドしよう
ステートで表示を切り替える
プロパティとステートの連携
リスト表示コンポーネント

3-4 コンポーネントのさまざまな機能
子エレメントを活用するには?
フォームの利用
値のチェックを行うには?
コンポーネントのイベント作成
onCheckイベントを持ったコンポーネント!
コンテキストについて
コンテキストを使おう
Providerでコンテキストを変更する
コンテキストでテーマを作る
この章のまとめ

Chapter4 Reduxで値を管理しよう!
4-1 Reduxを使ってみよう
値の総合管理は重要!
Reduxをインストールしよう
Reduxの仕組みを考えよう
ストアとレデューサー
レデューサーの作成
ストアを作成してみよう
レデューサーの作成
プロデューサーと表示作成
コンポーネントからストアを利用する
コネクトについて
Massageにストアをコネクトする
ディスパッチとアクション
全体の流れを理解しよう!

4-2 簡易メモを作る!
より複雑なアプリでのRedux
Index.jsとApp.jsを作成する
Store.jsを作成する
Memoコンポーネントを作る
Itemコンポーネントを作る
AddFormコンポーネントを作る
DelFormコンポーネントを作る
Findformコンポーネントを作る
ポイントはアクションクリエーターとディスパッチ

4.3 Redux Persistによるデータの永続化
「永続化」ってなに?
Redux Persistのインストール
Redux Persist利用の手順
パーシストゲートの利用
使用オブジェクトのインポートについて
カウンターを永続化しよう
App.jsの作成
ストレージの内容を確認しよう
メモアプリを永続化しよう!
動作エラー発生!
永続化の対応をしよう
不要なデータも保存される?
保管するデータを整理しよう
永続化の停止と再開
この意のまとめ

Chapter5 Next.jsでReactをパワーアップしよう!

5-1 Next.jsを使おう
クライアントサイド・レンダリング?
Next.jsプロジェクトを作ろう
ページを作ろう!
Next.jsは「pages」でページを用意する
エクスポートしてみよう
出力されるHTMLファイルをチェック!
スタイルを適用する
ビルトインCSSを使おう!
CSSファイルは使えない?

5-2 複数ファイルを活用しよう
複数のページを作ろう
外部スタイルシートの利用
コンポーネントの利用
レイアウトを考えよう
レイアウト用コンポーネントの作成
ページでレイアウトを利用する
の設定静的ファイルの利用Imageコンポーネントを表示する

5-3 Reduxでデータを共有する
Reduxを使う準備
AppWithReduxコンポーネントの作成
修正Appコンポーネントを作る
ストアを用意しよう
ストア作成の内容をチェック!
Counterコンポーネントを作る
Counterを利用しよう

5-4 足し算専用電卓を作る!
メモ書きから足し算する電卓!
ストアを修正する
Calcコンポーネントを作ろう
calc.jsを作ろう
Style.jsにスタイルを追加
この章のまとめ

Chapter6 Firebaseでデータベースを使おう!
6-1 Firebaseを使ってみよう
データベースを使おう!
Firebaseってどういうもの?
Firebaseプロジェクトを作る
オーバービューをチェック!
データベースを作ろう
データを構築しよう
Authenticationを表示する
コピーされる設定情報について
ReactでFirebaseを使おう!
index.jsを修正する
App.jsの修正
Sampledataコンポーネント
Firebaseアクセスをチェック!

6-2 Firebaseデータベースの基本操作を覚える
Next.jsプロジェクトにFirebaseを組み込む!
ストアでFrebaseを初期化する
fireページの作成
特定IDのデータを表示する
fire_findページを作ろう
Firefindコンポーネントを作る
データの追加
fire_addページを作ろう
Fireaddコンポーネントを作る
データの削除
Firedeleteコンポーネントを作ろう

6-3 メッセージ機能付アドレスブックを作る
メッセージが送れるアドレス帳!
アプリの設計をしよう
store.jsを修正しよう
Accountコンポーネントを作る
addressページを作る
Addressコンポーネントを作成する
address_addページを作る
AddressAddコンポーネントの作成
address_showページを作る
AddressShowコンポーネントの作成
ライブラリファイルの作成
スタイルの用意
Firebaseのデータベースアクセスを設定
ユーザー認証の設定

6-4 スクリプトのポイントをチェック!
ポイントを押さえて読む!
データの構造を確認
ソーシャルログインの設定
Firebaseのキーについて
アドレスデータの取得
データの作成
登録したアカウントのデータを表示する
メッセージの表示
メッセージの送信
今後の改良点は?
これから先はどうするの?

Addendum JavaScriptオブジェクト超入門
A-1 JavaScriptの基本を超簡単おさらい!
この章の目的は?
この章で説明すること
値と変数について
制御構文について
配列について
「関数」について
アロー関数について

A-2 オプジェクトをマスターしよう
オブジェクトについて
オブジェクトを使う
メソッドについて
クラスを使おう!
extendsで機能を継承!
スクリプトファイルの読み込み
モジュールについて
モジュールを利用する
export defaultについて
Reactのために必要な知識とは?.

索引

掌田 津耶乃 (著)
出版社: 秀和システム (2019/3/8)、出典:出版社HP

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

Reactの基本がイチからわかる入門書

UI構築のためのJavaScriptライブラリであるReact。そんなReactを用いたWebアプリプログラミングの入門書です。Reactの基本概念から始まり、最終的にはtodoアプリを作成できるようになります。入門書ではありますが、HTML/CSS、JavaScriptに関しての基礎がある方向けです。

■サンプルコードのダウンロード/正誤表のWebページ
本書のサンプルコードは以下のURLのページからダウンロードできます。
また、正誤表を掲載した場合はこのページに表示されます。
http://book.impress.co.jp/books/1116101040

○本文中に登場する会社名、製品名、サービス名は、各社の登録商標または商標です。
○本書の内容は本書執筆時点のものです。本書で紹介した製品/サービスなどの名前や内容は変更される可能性があります。
○本書の内容に基づく実施・運用において発生したいかなる損害も、著者ならびに株式会社インプレスは一切の責任を負いません。
○本文中ではR、TM、Cマークは明記しておりません。

はじめに

その対象がどんなものであれ、プログラミングは楽しいものです。楽しくなければ学ぶ意欲も起こらず、長く続けることもできませ ん。プログラミングが楽しいものであるためには、自分の行為についてよく理解していることが必要です。また、プログラムが自分の思った通りに動き、その結果として何らかの成果が、願わくば目覚ましい効果が実感できるものでなければなりません。

この本は、Reactを利用したWebアプリのプログラミング入門書です。それに関する基礎的な知識、経験、そして狙った成果を得るための技術を習得することを目指しています。つまり、その分野のプログラミングが楽しいと感じられるようになりたい人のための本です。

この本を書くにあたっては、読者としてある程度のレベルの人を想定しています。簡単に言えば、HTML、CSS、JavaScriptに関して基礎的な知識を持っている人です。それらを使ったシンプルなWebページを、テキストエディタだけを使って書いたことがある人なら申し分ないでしょう。もちろん、それほど高度な知識や経験を想定しているわけではありません。本書の中では、HTMLやJavaScriptそのものについては特に解説していませんが、入門レベルを超えると思われる事項については、折に触れて説明を加えています。そして、Reactの真髄を学ぶ上で、基礎知識の不足が障害にならないように心がけています。

この本を使ってReactのプログラミングについて学ぶためには、Webブラウザが1本あれば十分です。自前のサーバーを立てたりする必要もありません。バージョンさえ新しければ、タブレット上のものでも大丈夫でしょう。装備や環境の整備に気を散らすことなく、本題に集中してプログラミングを楽しんでください。

2016年11月 柴田文彦

CONTENTS

Chapter 1 Reactとは?

1-1 Reactの概要と特長
Reactは一種のJavaScriptライブラリ?
Declarative
Component-Based
Learn Once, Write Anywhere

1-2 Reactを使うために必要な準備
さまざまな動作環境

1-3 Reactを動かしてみよう
JSFiddle上での試運転

1-4 Reactを理解する5つのキーワード
構成要素で考えるReact
コンポーネント、
ステート
プロパティ
JSX
仮想DOM

Chapter 2 Reactのコンポーネント

2-1 コンポーネント定義の基本
HTML要素をコンポーネント化する
要素の属性を指定する
カスタムコンポーネントを作る

2-2 内容が変化するコンポーネント
文字列を受け取って表示するコンポーネント
与えた式を計算するコンポーネント

2-3 ユーザーからの入力を受け付けるコンポーネント
1つのコンポーネント内に複数の要素を配置する
文字列を入力するinput要素を配置する
ユーザー入力に反応する仕組みを実現する

2-4 コンポーネントのライフサイクル
ライフサイクルメソッド
典型的なライフサイクルシーケンス
ライフサイクルの変遷を観察する

Chapter 3 JSXの基本

3-1 JSXの概要とメリット
JSXを使うには
JSXEBabel
JSXとHTMLとの違い

3-2 JSXの中で使うJavaScript
JSXでカスタムコンポーネントを記述する
JSXで複数の要素を配置する
JSXでステート付きのコンポーネントを作成する
条件(三項)演算を使う
真偽値の属性を指定する
JSXの中のコメントの書き方

3-3 スプレッド属性を利用する。
スプレッド属性とは
スプレッド属性でスタイルを設定する
カスタムコンポーネントでスプレッド属性を利用する
デフォルトの属性をスプレッド属性で設定する
デフォルトの属性をオーバーライドする

3-4 JSXトランスパイラの使い方
Webサイト上のトランスパイラを利用する
ブラウザ用のトランスパイラを利用する
JSXを別のファイルに保存して動かす

Chapter 4 Reactを使いこなす

4.1 Reactで使うフォーム
HTMLとの比較
コントロールドコンポーネント
type属性とchecked属性でラジオボタンを実現
type属性で複数選択可能なチェックボックスを実現
プロパティによって選択状態の初期値を設定する
value属性でセレクトボックスを選択可能にする
TextAreaコンポーネントではvalue属性で値を設定

4-2 フォームのサブミットとバリデーション
formタグとon Submitの属性
ステート値のバリデーション –

4-3 動的に作成するコンポーネント
HTMLとReactのtableタグの違い
配列要素を自動的に展開して表示するmapメソッド

4-4 コンポーネント間の機能の共有
マルチコンポーネント化
ネームスペースドコンポーネント
Mixinの利用

Chapter 5 Reactの一歩進んだ使い方

5-1 アドオンによる機能拡張
Reactのアドオンについて
公式なアドオン
Reactアドオンを使う準備
アドオンの使用例|

5-2 アニメーションの基本テクニック
Reactアニメーションの種類
CSSアニメーションを確認する
Reactアドオンによる出し入れのアニメーション
Reactアドオンによる初期マウントのアニメーション
トランスフォームを使ったアニメーション
Reactアニメーションを使ったToDoリスト

5-3 Reactの開発ツール
React純正のブラウザ拡張機能
React Developer Toolsの簡単な使い方

5-4 Reactの周辺技術
次に何を学ぶべきか?
Flux
React Native
いくつかのUIライブラリー

索引
著者プロフィール

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

モダンWebアプリ開発の全体像がわかる!

Reactの基本から応用を学ぶことができ、Reactの概念をしっかりおさえることができます。インストール手順も丁寧に説明されており、サンプルコードも豊富なので、初心者の方にもおすすめです。Reactを用いたWebアプリケーションの開発から公開に至るまで、ボリューム満点の1冊です。

穴井 宏幸 (著), 石井 直矢 (著), 柴田 和祈 (著), 三宮 肇 (著)
翔泳社 (2018/2/19)、出典:出版社HP

本書内容に関するお問い合わせについて

このたびは翔泳社の書籍をお買い上げいただき、誠にありがとうございます。
弊社では、読者の皆様からのお問い合わせに適切に対応させていただくため、以下のガイドラインへのご協力をお願い致しております。下記項目をお読みいただき、手順に従ってお問い合わせください。

●ご質問される前に、
弊社Webサイトの「正誤表」をご参照ください。これまでに判明した正誤や追加情報を掲載しています。
正誤表 http://www.shoeisha.co.jp/book/errata/

●ご質問方法
弊社Webサイトの「刊行物Q&A」をご利用ください。
刊行物Q&A http://www.shoeisha.co.jp/book/qa/
インターネットをご利用でない場合は、FAXまたは郵便にて、下記“翔泳社 愛読者サービスセンター”までお問い合わせください。
電話でのご質問は、お受けしておりません。

●回答について
回答は、ご質問いただいた手段によってご返事申し上げます。ご質問の内容によって回答に数日内侍それ以上の期間を要する場合があります。

●ご質問に際してのご注意
本書の対象を越えるもの、記述個所を特定されないもの、また読者固有の環境に起因するご質問等にはお答えできませんので、あらかじめご了承ください。

●郵便物送付先およびFAX番号
送付先住所 〒160-0006 東京都新宿区舟町5
FAX番号 03-5362-3818
宛先 (株)翔泳社 愛読者サービスセンター

※本書に記載されたURL等は予告なく変更される場合があります。
※本書の出版にあたっては正確な記述につとめましたが、著者や出版社などのいずれも、本書の内容に対してなんらかの保証をするものではなく、内容やサンプルに基づくいかなる運用結果に関してもいっさいの責任を負いません。
※本書に掲載されているサンプルプログラムやスクリプト、および実行結果を記した画面イメージなどは、特定の設定に基づいた環境にて再現される一例です。
※本書に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。

前書き

この度は本書をお買い上げいただき、誠にありがとうございます。
Webフロントエンドは、流行り廃りが他の界隈と比較して早く、「また新しいライブラリを使っているのか」と揶揄されがちです。ですが、その流行り廃りの中にはタスクランナやモジュールバンドラなどの開発ツール、SassやPostCSSなどのCSS拡張言語など、さまざまな要素が含まれており、React Angular、Vue.jsなどのView(見た目の部分)を構築するライブラリ・フレームワークに限ってみるとここ3年くらいはトレンドに大きな変化はありません。Reactは筆者が注目し始めた3年前から、内部の実装は変われど、外から利用するAPIに大きな変更はほとんどありません(Reactが後方互換性をなるべく維持して開発しているということもありますが)。

また、Reactが普及に大きく貢献した仮想DOMやコンポーネント指向の開発スタイルは、他のフレームワーク・ライブラリにも取り入れられており、Webアプリケーション開発において今や欠かせないものになっています。開発ツールに関しては、「Less Configuration」という考え方が広まっており、インストールしたデフォルトの状態である程度利用でき、学習コストが低いツールがよいとされています。本書はcreate-react-appを利用しており、モジュールバンドラやトランスパイラの複雑な設定に気をとらわれることなく、ReactやReduxの学習に集中できるように意識して執筆しました。

「流行り廃りが早い」ことは悪いことだけではなく、そこに身をおいているエンジニアとしては毎日ワクワクする楽しい環境です。ライブラリ・フレームワークだけではなく、最近ではブラウザのAPIや言語自体の機能も私がエンジニアになった2009年と比べると考えられないスピードで進化を遂げています。iOSやAndroidのネイティブアプリの方が機能的には制限がありませんが、アイデアを形にするプラットフォームとしてWebの価値はこれからも変わらないと思います。本書をきっかけにWebやWebフロントエンドに魅力を感じてくれる方が増えると幸いです。

最後に、個人的な話になりますが、学生時代にバイト前の空いた時間に本屋で技術書を眺めるのが好きで、技術書がたくさん並んだ本棚を見ながら「いつかここに名前が並ぶようなエンジニアになりたいな〜」とぼんやりと思っていました。今回、その大きな目標が叶い、感慨深いものがあります。このような素晴らしい機会をご提供いただいた翔泳社様、筆の遅い執筆者陣の怒涛の追い上げに親切にご対応いただいた緑川さんにこの場を借りてお礼申し上げます。

穴井 宏幸 (著), 石井 直矢 (著), 柴田 和祈 (著), 三宮 肇 (著)
翔泳社 (2018/2/19)、出典:出版社HP

目次

はじめに

1章 React・Reduxとは?

1.1 React とは?
React の特徴
その他のライブラリ・フレームワークとの比較

1.2 Flux とは?
Fluxの特徴
Fluxの構成要素

1.3 Reduxとは?
Reduxの特徴
Reduxの構成要素

2章 create-react-appで開発をはじめよう

2.1 create-react-appとは?
開発環境を整える
インストール
create-react-appのインストール

2.2 アプリケーションの作成
プロジェクトの構成…..
アプリケーションを起動
Hello, World! …..

3章 JSX

3.1 JSXとは?
JavaScriptを拡張した言語
JSX はなぜ必要なのか?
JSXの文法

3.2 Babelを使ってJSXをJavaScriptに変換する
トランスパイラとは? Babelとは?
CLI
webpackとは

4章 Reactコンポーネント

4.1 Reactコンポーネントとは?
コンポーネント開発の準備
Functional Componentと Class Component
コンポーネントの再利用
Reactエレメント
データの受け渡し(props)

4.2 stateとイベントハンドリング
コンポーネントの準備
イベントハンドリング
Stateのまとめ

4.3 ライフサイクル
マウントに関するライフサイクルメソッド
データのアップデートに関するライフサイクルメソッド

5章 Redux でアプリケーションの状態を管理しよう

5.1 Reduxでアプリケーションの状態を管理する
ReduxのみでTodoアプリケーションを実装
Reduxの構成
ActionCreatorを定義する
Storeを生成する
React.jsと組み合わせよう
ファイルを機能ごとに分割する

5.2 react-redux
react-reduxのインストール
Container ComponentとPresentational Component.
react-reduxが行なっていること.
Todoアプリにreact-reduxを導入する

6章 ルーティングを実装しよう

6.1 ルーティングとは
ルーティングの実装パターン
ルーティングのライブラリ紹介

7章 Redux Middleware

7.1 Redux Middlewareとは?
Redux Middlewareの基礎

7.2 Actionのログを表示するRedux Middlewareを作る
ミドルウェアの仕組み
ログミドルウェアの実装

7.3 ミドルウェアのサンプル
thunkミドルウェア
localStorage

8章 Reduxの非同期処理

8.1 非同期処理の基礎
非同期処理とは?
redux-thunkによる非同期処理

8.2 thunkミドルウェアの便利な使い方
複数のアクションをまとめる
getState関数

9章 UI をきれいにしよう

9.1 UIライブラリ
Reactコンポーネントのスタイリング
UIライブラリとは
Material-UI
Material-UIを使ってみる

9.2 アニメーションを実装する

10章 より実践的なアプリケーションを作ろう

10.1 アプリケーション作成の準備
作成するアプリケーション
事前準備
Yahoo!ショッピングのカテゴリランキング APIの仕様

10.2 アプリケーションを作ろう
アプリケーションの雛形を作成
ファイル・ディレクトリ構成
Reduxの導入
ページルーティングの導入
ページルーティングを実装
非同期処理の実装
Reducerの実装
Material-UIの導入

11章 アプリケーションのテストを書こう

11.1 テストライブラリ(テストフレームワーク)
Jest

11.2 React・Redux アプリケーションのテスト
ActionCreatorのテスト
非同期Action Creatorのテスト
Reducerのテスト
Reactコンポーネントのユニットテスト
Reactコンポーネントのスナップショットテスト

12章 作ったアプリケーションを公開しよう

12.1 アプリケーションを公開する
GitHub Pages
GitHub Pagesのメリット・デメリット

12.2 Firebaseについて
Firebaseとは?

13章 サーバサイドレンダリング

13.1 サーバサイドレンダリングとは?
サーバサイドレンダリングは必須ではない
Reactにおけるサーバサイドレンダリングの流れ
React v15以前のサーバサイドレンダリング

13.2 React v16以降のサーバサイドレンダリング
React v16でのサーバサイドレンダリングの変更点
Reduxでのサーバサイドレンダリング

索引

穴井 宏幸 (著), 石井 直矢 (著), 柴田 和祈 (著), 三宮 肇 (著)
翔泳社 (2018/2/19)、出典:出版社HP

作りながら学ぶReact入門

React初心者向け

開発環境から丁寧に解説されています。実際に手を動かしながら、演習を通してReactを学ぶことができます。過度な説明はなく、簡潔にまとまっています。JavaScriptの基礎をある程度固めてから、本書を使うことをおすすめします。

吉田裕美 (著)
出版社: 秀和システム (2017/9/16):出版社HP

■注意
1. 本書は、著者が独自に調査した結果を出版したものです。
2. 本書の内容については万全を期して制作しましたが、万一、ご不審な点や誤り、記入漏れなどお気づきの点がありましたら、出版元まで書面にてご連絡下さい。
3. 本書の内容に関して運用した結果の影響については、上記2項にかかわらず責任を負いかねますのでご了承下さい。
4. 本書の全部あるいは一部について、出版元から文書による許諾を得ずに複製することは法律で禁じられていますのでご了承下さい。

■商標等
・本書に登場するプログラム名、システム名、CPU名などは一般に各メーカーの各国における登録商標または商標です。
・本書では、R・Cの表示を省略していますがご了承下さい。
・本書では、登録商標などに一般に使われている通称を用いている場合がありますがご了承下さい。

目次

Contents

Chapter.1 はじめに
1.1 本書について
1-1-1 本書サポートページ
1-1-2 前提知識
1.2 Reactとは
1-2-1 従来のJSライブラリーとの違い
1-2-2 コンポーネント指向
1-2-3 SPA(Single Page Application)

Chapter 2 モダンJS開発環境の構築
2.1 ターミナル、コマンドプロンプト
2.2 テキストエディター
2.3 Google Chrome
2.4 Node.jsのインストール
2-4-1 Macでのインストール
2-4-2 Windowsでのインストール
2.5 npmコマンドのインストール
2.6 インストール用プロジェクトの作成
2.7 npmパッケージのインストール
2.8 インストール結果の確認用Reactコードの作成
2-8-1 ディレクトリーの作成
2-8-2 設定ファイルの作成
2.9インストール結果の確認
2-9-1 エラーが発生した場合

Chaper 3 モダンJS開発環境の解説
3.1 Node.js.
3.2 npm
3-2-1 npmとは
3-2-2 npmコマンド
3-2-3 npm install コマンド
3-2-4 npm list コマンド
3-2-5 npm run, npm startコマンド
3.3 Babel
3-3-1 コマンドライン
3.4 ESLint
3-4-1 エラーメッセージの読み方
3-4-2 設定ファイル
3-4-3 コマンドライン
3.5 css-loader, style-loader
3-5-1 設定ファイル
3-5-2 webpack-dev-server
3.6 webpack
3-6-1 node_modules
3-6-2 public
3.7 Gitでのプロジェクト管理
3.8 IDE

Chapter 4 ES6
4.1 ES6とは
4-1-1 Babel
4.2 ES6での主な変更点
4-2-1 クラス定義
4-2-2 関数定義
4-2-3 デフォルト引数
4-2-4 レストパラメーター
4-2-5 変数定義
4-2-6 式、定数
4-2-7 テンプレート文字列
4-2-8 モジュール
4-2-9 CommonJSとES6の関係
4.3 いろいろな補足
4-3-1 JavaScriptのオブジェクト指向
4-3-2 無名関数
4-3-3 条件演算子(3項演算子)
4-3-4 イテレーター
4-3-5 文末のセミコロン

Chapter 5 JSX
5.1 JSXとは
5-1-1 簡単なJSXの例
5.2 JSXの基本
5-2-1 新しいプロジェクトを作成
5-2-2 JSXを書いてみる
5-2-3 JSXに式(値)を埋め込む
5-2-4 コンポーネントの分割
5-2-5 条件演算子を使いJSXをコンパクトにする
5-2-6 繰り返し
5-2-7 子要素を扱うコンポーネント
5.3 補足
5-3-1 属性と値
5-3-2 HTMLとの属性名、属性の扱いが異なるもの
5-3-3 プロトタイプ

Chapter 6 コンポーネント
6.1 新しいプロジェクトを作成
6.2 最初のコード
6.3 コンポーネントの作り方
6.4 PropsとState
6.5 ライフサイクル・メソッド
6.6 イベントの扱い
6.7 フォーム
6-7-1 Controlled Components
6-7-2 Uncontrolled Components
6-7-3 Controlled Components Ć Uncontrolled Componentsの比較
6-7-4 その他のフォーム要素
6.8 詳細なライフサイクル・メソッド
6-8-1 はじめてコンポーネントが表示される場合
6-8-2 2回目以降にコンポーネントが表示される場合
6-8-3 Stateが更新された場合
6-8-4 コンポーネントが表示されなくなった場合
6-8-5 まとめ

chanter7 コンポーネントの応用
7.1 既存のReactコンポーネントの利用
7-1-1 Material-UI
7-1-2 じゃんけんにMaterial-UIを組み込む
7.2 ルーティング
7-2-1 React Router
7-2-2 じゃんけんにReact Routerを組み込む
7.3 サーバーとの通信
7-3-1 OpenWeatherMap
7-3-2 プログラム
7-3-3 Fetch API

Chanter 8 テスティング
8.1 ソフトウェアテスト入門
8-1-1 人間によるテスト vs 自動テスト
8-1-2 テストのレベル
8.2 ユニットテスト(Unit test)
8-2-1 Mocha
8-2-2 テストコードの書き方
8-2-3 Jyankenクラスのテストコード
8.3 E2Eテスト(End to End test)
8-3-1 Nightmare
8-3-2 テストコードの書き方
8-3-3 テストコード

chanter 9 さらに学ぶなら
9.1 Redux
9.2 Flowtype
9.3 React Native.
9.4 Electron
9.5 Reactの情報源

索引

吉田裕美 (著)
出版社: 秀和システム (2017/9/16):出版社HP

1 本書について

本書は実用サービスでも使われ始めたReact (React.js)を勉強してみたい、仕事で使う必要がある人向けに、モダンなJavaScript(ES6)、モダンな開発環境(webpack)を使い学んでいく入門書です。
本書は以下のような構成になっています。

1章 はじめに
2章 モダンJS開発環境の構築 ☆
3章 モダンJS開発環境の解説
4章 ES6 ☆
5章 JSX ☆
6章 コンポーネント ☆
7章 コンポーネントの応用 ☆
8章 テスティング
9章さらに学ぶなら

原理や説明は置いておいて、まずはReactを使ってアプリを作りたい方は☆の付いた章を読みながら、実際にサンプルコードを動かしながら学んでいって下さい。サンプルコードは全てサポートページにありますので、タイプする必要はありません。
コードを動かした後で、開発ツールの意味やReactの考え方に興味が湧いたら他のも読んでみて下さい。

1-1-1 本書サポートページ
本書で取り上げるプログラム、設定等はすべて本書のサポートページに置かれています。
▼本書サポートページ
https://github.com/yuumi3/react_book
ReactもモダンJavaScriptの開発環境も、頻繁にバージョンアップしています。本書に書かれている考え方などの内容はすぐに古くなることはありませんが、プログラム等は古くなることがあるかもしれませんので、必ずサポートページを参照して下さい。

1-1-2 前提知識
本書は、以下の知識・経験がある人向けに書かれています。

・MacまたはWindowsを操作できる
・どのプログラム言語でもよいですが、ネットや本を見ずにある程度プログラムが書
ける。
・ネットや本を見ずに簡単なHTML、CSSが書ける
・ 簡単なJavaScript、jQueryなどを書いた経験がある
本書では、HTMLやCSSの入門、JavaScript言語の入門、プログラミングの入門については書いてありませんので、これらについてあまり自信がないという方は、他の書籍やネット等で勉強しておいて下さい。

2 Reactとは
React (またはReact.js)はFacebook社が開発したJavac. Facbookを始め米国のいくつかの有名なWebサービスでも使われています。日本でも徐々にReactを使ったWebサービスが登場してきています。
JavaScriptはインターネットを普通の人が使い始めた1995年に登場し、プログラマーや
Web制作者の間で注目されましたが、各種ブラウザーで仕様が違ったりバグが多いなどで、結局は装飾などの簡単なことにしか使われませんでした。しかし、2005年にGoogleマップやGmailなどのJavaScriptとサーバーが連携したAiaxアプリが現れ、JavaScriptが再び注目を集め、さらにjQueryなどの有用なライブラリーも現れたことで、現在のようにたいていのWebサービスでJavaScriptが使われるようになりました。
ただし、jQueryのような単純なライブラリーだけでは大規模なJavaScriptプログラムを作るのは困難なので、2010年前後からBackbone.js, AngularJS, EmberJs. Reactなどの新しい世代のライブラリーやフレームワークが現れました。
React (またはReact.js)はFacebook社が開発し2013年に公開されました。
Reactの特徴はこれから説明していきますが、世界最大級のWebサービスでもあるFacebookで実際に使われていることから注目をあびました。
FacebookのWebサービスはたえず機能の追加や改善が行われています。Reactはこのようなサービスを開発するために、メンテナンス性の高いWebサービスを作れるライブラリー(フレームワーク)として設計されています。

1-2-1 従来のJSライブラリーとの違い
JavaScript言語のイベントやDOMを扱う関数、jQuery等の従来のライブラリーを使ったWebアプリは、以下のような動作をします。

①サーバーから送られてきたデータ等を使い、JS (JavaScript)がブラウザー上でHTML全体を作成(またはサーバー側で作成されたHTMLを表示)
②(ボタンを押された等のイベントを検出する
③データの変更やサーバーとの通信など、必要な処理を行う
④画面上の変更が必要な箇所を置き換える

▼従来のJSライブラリー

しかしReactでは、以下のような動作になります。

①サーバーから送られてきたデータで全画面表示処理がHTML全体を作成
②(ボタンを押された等の)イベントを検出する
③データの変更やサーバーとの通信など、必要な処理を行う
※データが変更されると自動的に全画面表示処理が必要な部分を更新する

▼React

従来のJS処理の④に相当する処理はありません、言葉で書くと④はたいしたことはありませんが、変更箇所は1箇所とは限りませんし、大きな変更になる場合もあります。 jQueryで複雑なWebアプリを開発した経験のある方は、④が簡単ではないことを体験されていると思います。またこの処理がメンテナンス性を下げる要因にもなります。
Reactのプログラムでは、画面の更新は全画面を作るコードを書くだけで、React
の持つ仮想DOM (Virtual DOM)が全画面表示しなおしはせず、必要最小限な箇所の
みを自動的に置換えてくれます。

1-2-2 コンポーネント指向
HTMLにはたくさんのタグがあります。これを組み合わせてWeb画面を作っているわけですが、Web画面はヘッダー、メニュー、商品一覧、ショッピングカート…など
の論理的な部分に分かれて作られています。Reactではこれら論理的な部分を1つの
コンポーネントととして組み立てる、言い方をかえると新たなHTMLタグを作り、組み合わせることで画面を作っていきます。コンポーネントは再利用できますし、別々
の開発者が開発することもでき、メンテナンス性の高いWebを効率良く作れます。
以下は、先の章で出てくるじゃんけんを行うサンプルアプリですが、以下のようなコンポーネントに分解されて作られています。

・ヘッダー:タイトルの表示
・じゃんけんボタン:じゃんけんで使うボタンのかたまり
・タブ:対戦結果と対戦成績(ここでは表示されていません)を
切り替えて表示できるタブ
・対戦結果の表:対戦結果を表示する表、表のヘッダーとデータを表示する
「対戦結果の1行」コンポーネントの集まり
・対戦結果の1行:対戦結果を表示する1行、このコンポーネントは
データの件数分再利用されています

1-2-3 SPA (Single Page Application)
従来のJSを使ったWebアプリでは、画面(HTML)作成は大部分をサーバー側で行い、ボタンやキー入力への反応をWebブラウザー・JSで行い、画面を書き替える処理をサーバーとクライアントで分担し通信しながら行われています。
ただし、サーバーとクライアント両方に処理が分かれるので、 プログラムがわかりにくくなりバグを起こしやすく、機能追加等のメンテナンス性が低くなりがちでした。

▼従来のJSを使ったWeb

最近使われるようになったSPA (Single Page Application)では、画面の作成はすべてクライアントのJSが担当し、サーバーはデータの管理や計算のみを行うというわかりやすい分担で作れ、メンテナンス性の高いWebアプリを構築できます。
また、画面の処理がクライアント (Webブラウザー、JS)に移るので、サーバー側の処理がスマホとほぼ共通にでき、スマホファースト時代のサービス構築にもメリットがあります。

▼Single Page Application

吉田裕美 (著)
出版社: 秀和システム (2017/9/16):出版社HP

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

React開発 現場の教科書

React+Atomic Design

Atomic Designを導入してコンポーネントの設計から実装まで扱います。フロントエンド周りの概念を大まかに掴むことができます。Reactの基本から解説されているため、初心者の方にもおすすめです。ただmJavaScriptの知識はある程度あった方がやりやすいです。

石橋 啓太 (著), 丸山 弘詩 (編集)
出版社: マイナビ出版 (2018/3/23)、出典:出版社HP

本書のサポートサイト
本書のサンプルデータ、補足情報、訂正情報などを掲載します。適宜ご参照ください。 https://book.mynavi.jp/supportsite/detail/9784839960490.html

●本書は2018年2月段階での情報に基づいて執筆されています。
本書に登場する製品やソフトウェア、サービスのバージョン、画面、機能、URL、製品のスペックなどの情報は、すべてその原稿執筆時点でのものです。
執筆以降に変更されている可能性がありますので、ご了承ください。
●本書に記載された内容は、情報の提供のみを目的としております。
したがって、本書を用いての運用はすべてお客様自身の責任と判断において行ってください。
●本書の制作にあたっては正確な記述につとめましたが、
著者や出版社のいずれも、本書の内容に関してなんらかの保証をするものではなく、
内容に関するいかなる運用結果についてもいっさいの責任を負いません。あらかじめご了承ください。
●本書中の会社名や商品名は、該当する各社の商標または登録商標です。
本書中ではTMおよびRマークは省略させていただいております。

はじめに

WebフロントエンドのUIでは、パフォーマンスとアクセシビリティの2つが最重要と考えられ、いずれもユーザー体験の向上に直結する要因といえます。昨今では、UIとUXの横並び表記に異を唱えられることもありますが、良質なUXにはUIの品質が大きく影響するものです。ビジュアルデザインやレイアウトデザインだけではなく、パフォーマンス・アクセシビリティなどプロダクト全体からの視点での解決を図らなければ、素晴らしいUIは構築できません。

コンポーネント開発はUI実装パターンとして今後の発展が大きく期待されています。フロ ントエンド開発では、周辺の技術発展に伴いJavaScriptが話題の中心となりがちですが、高品質なUIのためには、同じく必須言語であるHTMLやCSSも同列に語られるべきです。

しかし、フロントエンド開発の歴史はまだまだ浅く、UIの実装作業にはエンジニアリングとデザイン双方の視点を要することもあり、確立された手法はありません。開発チーム内でも異なる視点と根本的な知見の相違から、開発現場に混乱を来すことが多々ある状況です。しかし、体系化されてきたコンポーネントベースの開発手法を入口にすることで、両者間のギャッ プを埋めることが可能と考えられます。

そこで、本書ではReactとAtomic Designを軸に、Webフロントエンドにおけるコンポーネント開発の手法を解説します。単なる開発言語やライブラリの説明に留めず、Web開発周辺の最新動向を取り込みながら、論理的なUIデザイン設計からコンポーネントはもちろん、状態管理を踏まえたロジックの実装から、最終的なプロダクト品質を継続的に担保する手法など、さまざまな領域に深く踏み込んで解説します。

本書を通じて、将来的にはWeb開発での標準的な思考になり得る、コンポーネントベースの開発手法を理論と実践によって本質的に理解し、フロントエンドエンジニアとしての具体的な未来像を見据えて、実践力を身に付ける一助となれば幸いです。

2018年3月
石橋 啓太

石橋 啓太 (著), 丸山 弘詩 (編集)
出版社: マイナビ出版 (2018/3/23)、出典:出版社HP

CONTENTS

Chapter1 Web開発の動向
1 現在の課題とその背景
1 Webフロントエンドを取り巻く環境
2 デザイナーとエンジニア
3 開発現場の悩み
4 フロントエンジニアの理想像

2 開発者が考えるべきこと
1 ブラウザ実装
2 HTML&CSS
3 CSSが抱える問題

3 設計の必要性
1 今までのWebフロントエンドコード
2 コードは生き物

Chapter2 Reactの基本
1 Reactの概略
1 Reactの特徴
2 React推奨の理由

2 基本構文と実行環境
1 ECMAScript
2 開発環境の準備
3 オンラインエディタCodeSandbox

3 JSX
1 JSXとは
2 Babel

4 Reactの記述方法
1 Components
2 render
3 Functional Components
4 Props
5 State
6 イベント
7 key

5 ライフサイクル
1 Reactにおけるライフサイクル
2 処理の流れ
3 Functional Componentsのライフサイクル
「コラム] Babel 7へのアップデート

Chapter 3 Atomic Design
1 Atomic Designとは
1 Atomic Designの基本概念
2 Atoms
3 Molecules
4 Organisms
5 Templates
6 Pages

2 メリット
1 デザインシステム
2 開発におけるデザインの基準

3 コンポーネント開発のUIデザイン
1 スタイリング
2 レイアウト
3 トーン&マナー

4 Reactとの相性
1 肥大化しないコンポーネント
2 拡張性
[コラム] Fragments

Chapter 4 ソースコードのビルド
1 ビルドする理由
1 Node.js
2 人間がやるべきこと・機械にやらせること
3 開発環境の拡張性

2 webpack
1 webpackの基本
2 webpackのセットアップ
3 webpack.config.js
4 ローダー
5 プラグイン

3 webpack-dev-server
1 基本的な使い方
2 Hot Module Replacement

Chapter 5 コンポーネントの実装
1 ベストプラクティス
1 Presentational Container
2 データの反映
3 Local State

2 コンポーネントレベル
1 Atomic Design EORA
2 Molecules. OrganismsとTemplates・Pages
3 実運用と妥協点

3 プロジェクト構成
1 コンポーネントディレクトリ
2 UIライブラリの活用

4 サーバーサイドレンダリング
1 サーバーサイドレンダリングとは
2 Reactでのサーバーサイドレンダリングの実践

Chapter 6 CSSの実装
1 コンポーネント化とCSS
1 従来のアプローチ
2 解決すべき課題

2 CSS in JS
1 CSS in JSの基本概念
2 CSS modules
3 styled-components
4 styled-jsx

3 CSSの分離
1 依存性の分離
2 ローカルスコープの実現
3 PostCSS
[コラム] Portals

Chapter7 ロジックの実装
1 コンポーネントの状態管理
1フロントエンドが持つ状態とは
2 従来の状態管理とFlux

2 Reduxの基本
1 基本概念と3原則
2 実装
3 データフロー

3 Reduxの実践
1 Reactコンポーネントとの接続
2 Middleware
3 Storeを元にしたUI制御

4 非同期処理
1 Reduxにおける遅延処理
2 redux-thunk
3 redux-saga
[コラム] Error Boundary

Chapter 8 プロダクトの品質
1 品質の維持
1 プロダクトの品質
2 品質維持の必要性
3 品質維持のポイント

2 コンポーネントのテスト
1 テストフレームワーク
2 Reactコンポーネントのテスト
3 enzyme
4 enzymeのレンダリング処理

3 Lint

1 ESLint
2 ESLintのセットアップ
3 Rule
4 stylelint

4 flow
1 型の恩恵
2 flow
3 flowの実践
4 型指定の応用と型定義

5 スタイルガイド
1 スタイルガイドの必要性
2 Storybook
3 Storybookのセットアップ
4 ストーリーファイルの作成
5 アドオン

索引
謝辞・プロフィール

石橋 啓太 (著), 丸山 弘詩 (編集)
出版社: マイナビ出版 (2018/3/23)、出典:出版社HP

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

JavaScriptからのステップアップ

React初心者向けの指南書です。色々な分野が広く浅くまとめられており、この1冊で多くのことを学ぶことができます。後半の章では、掲示板やリアルタイムチャット、Wikiシステム、機械学習による手書き文字認識など実践的なアプリケーション開発も扱っています。

●プログラムのダウンロード方法
本書のサンプルプログラムは、GitHub からダウンロードできます。
ZIP ファイルでダウンロードするには、画面右上にある、[Clone or Download] から」クリックしてください。
[URL] https://github.com/kujirahand/book-node-reactjs
※初版第4刷以降でサンプルプログラムの配布を GitHub に変更しました。

本書中に記載されている情報は、2017年7月時点のものであり、ご利用時には変更されている場合もあります。
本書に記載されている内容の運用によって、いかなる損害が生じても、ソシム株式会社、および著者は責任を負いかねますので、あらかじめご了承ください。
Apple、Apple のロゴ、Mac OS は、米国および他の国々で登録された Apple Inc.の商標です。
iPhone、iPad、iTunes および Multi-Touch は Apple Inc.の商標です。
「Google」「Google ロゴ」、「Google マップ」、「Google Play」「Google Play ロゴ」「Android」「Android ロゴ」は Inc.の商標または登録商標です。
「YouTube」「YouTube ロゴ」は、Google Inc.の商標または登録商標です。
「Gmail」は、Google Inc.の商標または登録商標です。
「Twitter」は、Twitter,Inc.の商標または登録商標です。
「Facebook」は、Facebook,inc.の登録商標です。
IBMは米国におけるIBM Corporationの登録商標であり、それ以外のものは米国における IBM Corporation の商標です。
Oracle と Java は、Oracle Corporation 及びその子会社、関連会社の米国及びその他の国における登録商標です。
[Windows®] [Microsoft® Windows®] [Windows Vista®] [Windows Live® Windows Live] lt. Microsoft Corporation o) 商標または登録商標です。
[Microsoft® Internet Explorer®」は、米国 Microsoft Corporation の米国およびその他の国における商標または登録商標です。
「Intel®Pentium®」は Intel Corporationの米国ならびにその他の国における商標または登録商標です。
[Microsoft®Windows®」は、米国 Microsoft Corporationの米国およびその他の国における商標または登録商標です。
「Microsoft®Excel」は、米国 Microsoft Corporationの商品名称です。
UNIX は、The Open Group がライセンスしている米国ならびに他の国における登録商標です。
Linux は、Linus Torvalds 氏の日本およびその他の国における登録商標または商標です「Flickr」は、Yahoo! Inc.の商標または登録商標です。
※その他会社名、各製品名は、一般に各社の商標または登録商標です。
本書に記載されているこのほかの社名、商品名、製品名、ブランド名などは、各社の商標、または登球 本文中にTMC、Rは明記しておりません。

はじめに

本書は、Node.jsとReactの解説書です。
Webの世界は誕生以来めまぐるしく変化しています。その中でも特に大きく変化しているのが、古くて新しい言語「JavaScript」です。特に、JavaScriptはここ数年で、大きく変わりました。言語仕様が大幅に追加され、高度な開発が可能になりました。それを踏まえて、さまざまなフレームワークやツールが誕生し、百花繚乱の様相を呈しています。それで、多くの人が次のような質問をするようになりました。

「今、JavaScriptで効率的に開発するには、どうしたら良いだろうか?」

本書は、Node.jsとReactを掲げることで、その問いに答えを出そうとしています。Node.jsは、ブラウザを飛び出して、サーバの中で実行できるJavaScriptの実行エンジンです。今やNode.jsはスクリプト実行環境として揺るぎない地位を築いているといってもいいと思います。
そして、ReactはFacebookが開発したUIフレームワークです。ReactはUIを個々のコンポーネントに分割することで、効率よく保守性の高いアプリを作ることができます。
本書の1章では、最初にNode.jsや最新のJavaScript仕様について紹介します。そして、2章と3章でReactについて解説します。4章では、フロントエンド開発にフォーカスします。Electronを用いてPC向けのデスクトップアプリを作ったり、React Nativeを用いて、スマホ向けアプリを作る方法を紹介します。さらに、5章、6章では、実際的なWebアプリを作りながら、Node.jsとReactの深い部分に切り込んでいきます。

本書では、具体的かつ簡潔なサンプルプログラムを心がけました。本書が、ExmaScript 2015以降で大きな変化を遂げたJavaScript開発のための指南書となることを祈っています。

[対象読者]
●脱JavaScript初心者を目指している人
●ES2015以降、新しくなったJavaScriptについて理解したい人
●Reactで効率よくJavaScript開発を行いたい人
●SPA・フロントエンド開発を始めたい人

●本書の開発環境について
本書で主に扱うのは、JavaScriptの実行エンジンであるNode.jsと、Node.is用の高機能なパッケージマネージャー「npm」です。
最近では、開発環境を構築する場合、仮想環境を用いる場面が増えています。それは、できるだけプロジェクトを本番と同じ環境で開発したいという理由からです(多くの場合、プロダクトは、Linux上で運用することになります。)また、本番環境と同じにすることは、開発者同士のマシンやOSの環境の差異による問題を回避できるというメリットもあります。
そこで、本書では、仮想マシンを用意し、その上でプログラムを動かす方法を紹介します。仮想環境を使えば、読者がWindows/macOS/LinuxのどのPCを使ったとしても、全く同じように、プログラムを動かすことができます。加えて、仮想環境を構築するツール、その上で動かすOSのUbuntuも無料で入手できることから、お金をかけることなく開発専用の環境を用意することができます。Web開発の現場では、開発マシンとして、どんなPCを選んでも良いという場面が増えていますが、それは、開発環境を仮想環境で統一できるからという理由が大きいからです。
Node.js自体は、マルチプラットフォームで動くソフトウェアですか、ちょっと試したいだけという方は、仮想環境を用意することなく、Node.jsだけをインストールして、本書のプログラムを動かすこともできます。そのあたりは、ご自分の状況や好みに合わせて選ぶといいかと思います。
実際のインストール方法については、巻末Appendixをご覧ください。

本書の使い方
本書の紙面では、ソースコードを紹介していますが、紙面の都合上、一部を省略していることがあります。ソースコードは弊社のサイトからダウンロードすることができます。ダウンロードのURLは次ページを参考にして下さい。

プログラムのダウンロード方法
本書のサンプルプログラムは、GitHubからダウンロードできます。
ZIPファイルでダウンロードするには、画面右上にある、[Clone or Download]から[Download ZIP]のボタンをクリックしてください。
[URL] https://github.com/kujirahand/book-node-reactjs
※初版第4刷以降でサンプルプログラムの配布を GitHub に変更しました。

サンプルプログラムの実行方法
サンプルプログラムを解凍したら、必要なファイルををコピーして使用します。

HTML 形式のサンプル
HTML 形式のサンプルについては、Chromeなどのブラウザーに読み込ませることで表示できます。ただし、フロントエンドとして動作するものについては、別途バックグラウンドで作するプログラムや環境が必要です。

Node.js で動くプログラム
本書で紹介している、Wiki や SNSなどのサンプルプログラムをそのまま利用する場合は、ソースコードのディレクトリに移り、以下にあるような一行のコマンドを実行すればpackage.json に基づいて必要なモジュールがインストールされます。
$npm install
上記のようにしてインストールが完了した後、以下のコマンドを実行すると、Webサーバーが実行されます。
$ npm start
Webサーバーが無事に実行されると、URLが表示されるので、WebブラウザーでそのURLにアクセスします。

Contents

本書の使い方
サンプルプログラムの実行方法

第1章
Node.jsと環境の設定
はじめに、「いま」のJavaScriptの状況を確認しましょう。さらにJavaScriptの中心技術となるNode.jsについての基本的な事柄やパッケージ管理ツールのnpmの使い方やモジュールシステムなども紹介します。
01 モダンなJavaScriptとは?
古くて新しいJavaScriptの歴史
モダンなWeb開発のためのライブラリについて

02 サーバーサイド処理の定番Node.js
3分でわかるNode.js
Node.jsは大量のアクセスに強い

03 パッケージマネージャーnpm
npmでできること
npmでライブラリのインストール方法
npmを利用したプロジェクトの始め方
npmを利用したスクリプトの実行
npm互換のYarn

04 開発に使われるエディター
テキストエディター
オンラインのコードエディター
Webブラウザーの開発者ツール

05 コーディング規約JS Standard Style
JavaScript Standard Styleについて
なぜ、コーディング規約が必要なのか?
JS標準スタイルとは?
規約の目立った点
自動的にスタイルを確認/整形する
Atomエディターでリアルタイムに確認する

06 Node.jsで簡単なWebアプリを作ってみる。
最も簡単なWebアプリ
Webアプリの仕組み
アクセスするURLによって表示内容を変える
コラム ECMAScript 2016で追加されたGenerator.

07 Node.jsと非同期処理
同期処理と非同期処理
ところで無名関数とは?
コールバック地獄という罠
コールバック地獄のES2015による解決策

08 Babelで最新JSを使ってみよう
Babelについて
Babel用の設定ファイルを作成する方法
package.jsonに各種コマンドを登録しよう
Babel – その他の機能
コラム Babel以外でも使えるソースマップ

09 モジュール機構を理解しよう
Node.js requireについて
ES2015のimport/exportを使ってみよう
モジュールのデフォルト要素を指定する方法

第2章 React入門
ReactはUIのライブラリーです。Webページ内の各パーツをコンポーネントして扱えること、JSXが使えること、Virtual DOMを採用して描画が高速化していることなどを解説していきます。
01 Reactの基本的な使い方
Reactを始めよう
JavaScriptの中にHTMLが書ける、ということ

02 ReactとJSXの関係
React/JSXについて
JSXでタグの中に変数を埋め込んでみよう
JSXを記述する時の注意点
JSXはどのように変換されるのか?

03 React人気の秘密はVirtual DOM?
Virtual DOMとは何か?
ReactでDOMを更新してみよう バイナリ時計を作ってみよう

04 Reactでコンポーネントを作成する
コンポーネントとは?
Reactでのコンポーネントの作り方
もう少し複雑なコンポーネントの場合
リストコンポーネントを作ってみよう
アロー関数でコンポーネント定義

05 本格的なコンポーネントを作る
コンポーネントの状態を管理しよう
時計コンポーネントを作ってみよう

06 イベントの仕組みと実装
Reactでクリックイベントを実装する方法
簡単なチェックボックスを実装してみよう
Reactでイベントの記述方法

07 Reactのツールで自動ビルド
React/JSXのコンパイル環境を作ろう
create-react-appのインストール
ひな形アプリの仕組みを読み解こう

08 Webpackでリソースファイルを変換する
Webpackとは?
WebpackでReact/JSXをビルドしてみよう・

第3章
Reactコンポーネントの作成
Reactの、より実践的な使用方法を紹介します。コンポーネントのライフサイクルやコンポーネント同士の連携方法、状態やプロパティ、イベントの使い分けなど、Reactを使う上で欠かせない要素について述べます。
01 コンポーネントの生成から破棄まで
コンポーネントのライフサイクル
ストップウォッチを作ろう

02 Reactの入力フォーム
簡単な入力フォームを作る
複数の入力項目を持つフォームを作ろう

03 コンポーネント同士の連携について
コンポーネント間の連携方法について
インチとセンチの単位変換コンポーネントを作ろう

04 コンポーネント三大要素の使い分け
状態とプロパティ
色選択コンポーネントを作ってみよう

05 入力フィルタと値のバリデーション
郵便番号の入力コンポーネントを作ろう
汎用的な入力コンポーネントを作ってみよう

06 DOMに直接アクセスする
Reactでは直接DOM操作は行わないのが基本
コンポーネントのrender()メソッドに関する考察

07 ReactコンポーネントでAjax通信を使う
Ajax通信の利用について
SuperAgentの基本的な使い方
ReactアプリでJSON を読んで選択ボックスに表示しよう

08 Reactにおけるフォーム部品の扱い方
テキストボックス(input type=”text”)
チェックボックス(input type=”checkbox”)
テキストエリア(textarea)
ラジオボタン(input type=”radio”)
セレクトボックス(select)
コラム React開発支援ツール「React Developer Tools」

第4章 フロントエンド開発 – Electron と React Native
フロントエンド開発に欠かせないフレームワークを解説します。デスクトップアプリ用のElectron」と、スマートフォン(iOS/Android)向けの「React Native」について実践的に紹介します。

01 Reactでフロントエンド開発
フロントエンドとは?
PC向けのアプリ開発に「Electron」
スマホ向けのReact Native

02 Electronを使ってみよう
Electronを始めよう
ElectronにReact開発環境を導入しよう
Electronの仕組みを理解しよう
クリップボード整形アプリを作ってみよう
アプリを配布しよう

03 マストドンのクライアントを作ってみよう
マストドンとは?
マストドンのWeb APIを使おう
Electronのアプリに仕上げよう

04 React Nativeでスマホアプリを作ってみよう(Android編)
ReactとReact Nativeの違い
Androidの開発環境のセットアップ
プログラムを書き換えてみよう
アプリを配布しよう

05 React Nativeでスマホアプリを作ってみよう(iOS編)
iOS開発のためのReact Nativeのインストール
React Nativeプロジェクトの作成
サンプルプロジェクトを書き換えよう
iOS実機で実行する方法

06 スマホ用マストドンクライアントを作ってみよう
ここで作るプログラム
React Nativeのプロジェクトを作成しよう
React Native用マストドンのクライアント

第5章 SPAのためのフレームワーク
この章では、SPA開発に欠かせないフレームワークやノウハウを紹介します。Reactの使い方をさらに広げる、さまざまなライブラリの使い方や考え方を学んでいきましょう。
01 SPA——WebサーバーとReactの役割分担
SPAについて
WebサーバーとReactの役割分担
コラムそもそもWebアプリフレームワークとは?

02 Webアプリ用フレームワークExpress
Expressのインストール
Hello Worldを作ろう
いろいろなパスに対応しよう
POSTメソッドを受け付けるには?
コラム アップロードファイルのセキュリティ
自動的にファイルを返すには?

03 Fluxの仕組みを理解しよう
ReactにFluxが必要な理由
Fluxに登場する役者たち
役者同士の情報伝達の流れについて

04 少し複雑なアプリを作るにはReact Router
React Routerとは?
最も簡単なサンプル
固定ヘッダーとフッターを利用しよう
パラメーターを利用しよう
React Routerの詳しいマニュアルについて

05 React+Expressで掲示板を作ろう
ここで作る掲示板について
プロジェクトを作成しよう
Webサーバー側のプログラム
クライアント側(React)のプログラム
コラム JSON形式の簡単データベースNeDB

06 リアルタイムチャットを作ろう
WebSocketとは?
ここで作るアプリ – リアルタイムチャット
プロジェクトを作成しよう
WebSocketで通信が始まるまで
プログラム – チャット・サーバー側
プログラム – チャット・クライアント側
SPA実装のポイント

第6章 実践アプリ開発!
6章では、実践的なアプリの作り方を紹介します。Wikiシステムと、ユーザー認証を持つSNS、機械学習アプリを作ります。それぞれ、Reactを主軸においた、SPAとなっています。
01 誰でもページを編集できるWikiシステムを作ってみよう
Wikiシステムについて
Wikiアプリの構成
プロジェクトを作成する
Webサーバー側のプログラム – Wikiサーバー
Wikiクライアントアプリ
Wikiパーサー – PEG.jsでパーサーを作ろう

02 じぶんのSNSを作ろう
ここで作るSNSの機能
プロジェクトの作成
サーバー側 – SNSサーバー
コラム SHAハッシュとは?
クライアント側 – SNSクライアント

03 機械学習で手書き文字を判定しよう
ここで作るアプリ – リアルタイム手書き文字認識ツール
手書き数字のデータベースをダウンロードしよう
バイナリファイルを解析しよう
機械学習を実践しよう
文字認識サーバーのプログラム
文字認識クライアント(React)のプログラム
本書の終わりに〜開発したアプリの公開
さいごに

Appendix 開発環境を作ろう。
開発に当たっては、Reactのほかにさまざまなツールやフレームワークを使用します。ここでは、Node.jsやそれを動かすための開発環境のインストール方法を説明します。
1 Node.jsのインストール
Windowsの場合
macOSの場合

2 「VirtualBox」で開発環境を整えよう
インストールの手順
必要なツールのダウンロード
Windowsに開発環境をセットアップ
macOSに開発環境をセットアップ
Vagrantfileの編集
Vagrantの設定や操作方法について
仮想環境の衝突に注意

3 仮想環境のUbuntuにNode.jsをインストール
まずはAPTから