React開発の準備

まずReactを使えるようにする。簡単なプログラムを作成して実際に動かし、配布用にビルドするまでのReactの基本的な使い方を説明する。

Reactの準備

ReactはJavaScriptのフロントエンド、つまりクライアント側に表示される部分の開発のために作られたフレームワークである。

多くの人はWebアプリケーションフレームワークと聞くと、SpringのようなMVCアプリケーションフレームワークを思い浮かべるだろう。JavaScriptでフロントエンドのためのフレームワークと言われると、「そんなものがあるのか。普通にHTMLとJavaScriptで書けばよいのでは」と思うかもしれない。

しかし最近のWebを見れば分かるように、Webページの表示はもはや「テキストと画像をHTMLで組み合わせれば完成」というものではない。Web画面ではコンテンツが自由自在に配置され、動き回る。何かを操作するとリアルタイムで表示が変更され、更新される。これをすべて手作業でコードを書いて作るとしたら、かなり大変だと思わないだろうか。

高度なフロントエンド表現は、もう手作業で書く時代ではない。そのようなフロントエンド開発のために作られたのがReactである。ReactはFacebookによって開発され、実際にFacebookで使われているため、その品質は保証されているといえる。

Reactのインストール

Reactのインストールにはいくつかの方法があるが、最も分かりやすいのはnpmを使う方法である。

npmとは「Node Package Manager」である。これはもともとNode.js、つまりJavaScriptランタイム環境のパッケージ管理のために作られたものだが、JavaScriptライブラリの管理に非常に適しており、JavaScriptのライブラリやフレームワークで使われている。Node.jsをインストールするとnpmも自動的に入るため、使ったことがない人はNode.jsをインストールする。

https://nodejs.org

Reactのインストールはコマンドプロンプトまたはターミナルで行う。React自体は単なるスクリプトファイルなので、本来インストール作業は必要ないが、Reactアプリケーション環境を整えるのが面倒なため、「Reactを使うアプリケーションを作るツール」を用意するためにこれをインストールする。

$ npm install -g create-react-app

このように実行する。このcreate-react-appがそのパッケージである。

$ sudo npm install -g create-react-app
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@1.4.3
added 106 packages in 6.226s

これでReactアプリケーションを作成し、開発する準備ができた。

create-react-appでアプリケーションを作成して実行する

Reactアプリケーションの作成

実際にReactアプリケーションを作ってみよう。コマンドプロンプトまたはターミナルを開き、cdで適当な場所へ移動する。そして次のようにコマンドを実行する。

$ create-react-app my-app

すると次のように出力される。

Creating a new React app in /Users/kimkc/dev/react/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...


> fsevents@1.1.2 install /Users/kimkc/dev/react/my-app/node_modules/fsevents
> node install

[fsevents] Success: "/Users/kimkc/dev/react/my-app/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/kimkc/dev/react/my-app/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

+ react-scripts@1.0.17
+ react@16.2.0
+ react-dom@16.2.0
added 1266 packages in 63.989s

Success! Created my-app at /Users/kimkc/dev/react/my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

エラーなくインストールが完了すれば、my-appというディレクトリが作られる。その中にReactアプリケーションに関するファイルがインストールされる。Reactアプリケーションはこのように簡単に作成できる。

$ create-react-app [アプリケーション名]

Reactの構成

生成されたディレクトリを確認してみると、思ったよりファイルやディレクトリが多く、サイズも大きくて驚くかもしれない。まとめると次のようになる。

.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

ファイル

.gitignore
- Git関連ファイルである。
package.json
- npmパッケージ管理のためのファイルである。
README
- readmeファイルである。

これらのファイルはアプリケーション本体とは直接関係しない。

フォルダ

node_modules
- Node.jsモジュール、つまりプログラム関連のファイルがまとめられている。かなりサイズが大きいため、「JavaScriptライブラリを動かすだけなのになぜこんなに多いのか」と驚くかもしれない。しかし多くは「Node.jsでサーバープログラムを起動し運用するために必要なもの」なので心配しなくてよい。ここにあるものをすべて別途アップロードしなければ使えないわけではない。
public
- Webで公開されるファイル、つまり直接ファイルにアクセスできるものがまとめられている。ここにはデフォルトWebページであるindex.htmlとfavicon.icoアイコンがある。
src
- JavaScriptソースコード関連のものがまとめられている。Reactプログラム関連のものはこの中にある。また、Reactコンポーネントで使うCSSファイルなどもここに保存されている。つまり、「Reactプログラムとプログラムで使うファイル」がここにある。

当面はpublicとsrcフォルダにあるファイルの編集が開発の中心になる。それ以外のものを直接編集したり利用したりすることはほとんどない。

Reactの実行と配布

プログラムの内容は後で確認するとして、まずcreate-react-appで作ったReactアプリケーションを動かしてみよう。これもnpmコマンドを利用して実行する。

コマンドプロンプトまたはターミナルでcdコマンドを使い、アプリケーションフォルダへ移動する。そして次のように実行する。

$ npm start

このコマンドでNode.jsサーバープログラムが起動し、WebブラウザでWebページが開く。アプリケーションの最初のページは次のとおりである。

http://localhost:3000/

「Welcome to React」と表示されたページが現れるはずである。これがサンプルとして提供されるReactアプリケーションのページである。

Reactアプリケーションの配布

ではReactで作ったアプリケーションを実際にサーバーなどへ配布する方法を説明する。フォルダ自体はNode.jsモジュールがあるため60MB以上ある。サンプルとしてはこれほど大きいと扱いにくい。

Reactアプリケーションを配布するにはnpmのビルド機能を使う。コマンドプロンプトまたはターミナルでアプリケーションディレクトリへ移動し、次のように実行する。

$ npm run build

するとアプリケーションがビルドされる。アプリケーションディレクトリにbuildというディレクトリが生成される。このディレクトリにはビルドして作られたアプリケーションが入っている。このディレクトリの内容をサーバーへアップロードすればよい。

（ただし、生成されたコードを見ると、プログラム内で使用するファイルが絶対パスで指定されているため、サーバーのサブディレクトリなどに配置するとパスがずれて正しく動かないことがある）

このnpm run buildというコマンドは、実はnpmコマンドそのものではない。Reactアプリケーションのpackage.jsonに設定されているスクリプトとしてReactスクリプトを実行し、ビルドプロセスを行うものである。

まずはこれでReactアプリケーションを作成し、動作させるところまでできるようになった。Reactの使い方については次に説明する。

npm initでアプリケーションを作成する

前ではcreate-react-appを使ったが、これを使わずにReactアプリケーションを作る方法もある。

最初からアプリケーションを作る

手動でnpmを初期化し、必要なライブラリをインストールする方法を説明する。

次のような順序でコマンドを実行する。「アプリケーション名」は作成するアプリケーションの名前である。

$ mkdir [アプリケーション名]
$ cd [アプリケーション名]
$ npm init
$ npm install --save react react-dom

Reactアプリケーションは、reactとreact-domという2つのパッケージがインストールされれば動作する。ただし、この方法で作られるものには具体的なWebアプリケーションのファイルは一切用意されない。必要なライブラリだけが準備された、いわば「空のアプリケーション」である。したがって、アプリケーションのファイルは自分で手作業で作っていく必要がある。

以下はnpm initを実行したときの出力である。パッケージ名、バージョン、説明などの入力を求められる。

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (my-app2) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/kimkc/dev/react/my-app2/package.json:

{
  "name": "my-app2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) y

以下はnpm install --save react react-domコマンドを実行して出力された内容である。

$ npm install --save react react-dom
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN my-app2@1.0.0 No description
npm WARN my-app2@1.0.0 No repository field.

+ react@16.2.0
+ react-dom@16.2.0
added 18 packages in 5.472s

生成されたファイルとディレクトリ構成

この方式で生成されるファイルやディレクトリは次のとおりである。

.
├── node_modules
├── package-lock.json
└── package.json

node_modules: Node.js関連パッケージが保存されている。
package.json: npmパッケージ管理ファイルである。

主なファイルとフォルダは2つだけである。これらはcreate-react-appで作成された同名のフォルダやファイルと同じである。

npmでパッケージが管理されるアプリケーションは、基本的にフォルダ構成が決まっている。アプリケーションを開発するには、このアプリケーションフォルダの中にsrcフォルダを作り、その中に実行するメインプログラム、つまりJavaScriptスクリプトファイルとしてindex.jsというファイルを作る。これがReactアプリケーションのメインプログラムになる。

どちらの方式で作っても、作られるアプリケーションの形はおおむね同じである。違いは「サンプルアプリケーションファイルが最初から用意されているか」だけである。したがって特別な理由がなければ、create-react-appで作成するほうが楽だろう。