いまどきの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から