作りながら学ぶ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