Reactの概要と基礎技術要素を理解する

基礎からはじめるReact入門 第1回

　本連載は、Reactアプリを開発するための基礎を身につけることを目的としたものです。Reactは、コーディング方法が少し独特なため、最初のハードルが高めに感じる方も多いかと思います。しかし、一度その方法を身につければ高い開発生産性を発揮します。本連載では、はじめてReactに触れる方でも無理なく開発スキルを身につけられるよう1つずつステップを踏んで解説していきます。連載では、Reactの概念・文法・作法などといった基礎的な事項を学んだ後、Fluxアーキテクチャを採用した本格的なアプリ開発の手法を体験する、という流れを予定しています。また、連載の最後にはReactの標準ツールの活用方法についても紹介します。

対象読者

• JavaScriptとWeb開発の基礎に理解がある方
• Reactに興味／関心があり、これから学び始める方

前提環境

　筆者の検証環境は以下の通りです。

• macOS Sierra 10.12
• Node.js v6.6.0／npm 3.10.3
• React 15.4.0

　Node環境が準備できていない方は別途インストールしてください。Mac環境であればnodebrew、Windows環境であればnodist等のバージョン管理ツールの利用をおすすめします。

Reactの主な特徴

　ReactはUIを構築するためのFacebook製オープンソースJavaScriptライブラリです。

図1　公式Webサイトトップページ（https://facebook.github.io/react/）- 2016年11月時点

　2011年にFacebookのニュースフィードにデプロイされて以来、Instagram、Airbnb、Netflix、Paypal、Uberなど数々のアプリケーションで活用されています。Reactの公式サイトには、以下のような特徴が挙げられています。

1. 宣言型
2. コンポーネントベース
3. 一度学べばどこでも使える

　Reactはこれらの特徴により大規模なWebアプリケーション開発に適したライブラリとなっています。1.と2.の意味については本連載が進む中で、実感いただければと思います。

　3.は、Reactはクライアントサイドの描画だけでなく、Nodeを使ったサーバーサイドレンダリングに対応している他、ReactNativeというモバイルアプリ開発フレームワークを利用することで、モバイル開発にも対応しているということを意味しています。Reactを学ぶことで、デスクトップクライアント、サーバー、そして、モバイルのアプリが開発できるということをうたっているわけです。

SPAとVirtual DOM

　実際の開発を始める前に、SPAとVirtual DOMについて少し触れたいと思います。SPA（Single Page Application）とは、一つのページで構成されたアプリで、以下のようなメリットがあります。

• デスクトップアプリのような高いUXを提供できる。
• クロスプラットフォームに対応できる。
• デプロイが簡単になる。

　反面、ページ遷移などのためにDOM操作が必須であることから、以下のような技術的な課題もありました。

• DOM操作を直接行う場合、手続き型のプログラミングスタイルとなるため、コードが複雑になり
  保守性が下がる。
• DOMの更新には時間がかかるため、アプリのパフォーマンスが低下する。

　Reactはプログラミングスタイルを宣言型に規定することで1つ目の課題を、Virtual DOMという仕組みを導入することで2つ目の課題をクリアしました。

　Virtual DOMを簡単に説明すると、メモリ上に保持された、DOMのコピーのようなものです。
ユーザーイベントやサーバーイベントによりデータの更新が発生し、DOMを再描画する必要が出た場合、画面のDOMではなくVirtual DOMを更新します。Virtual DOMが更新されると、ReactはVirtualDOMと画面のDOMを比較し、変化した部分だけを見つけます。最後に、Reactは変化した部分だけをアップデートします。Virtual DOMデータの更新が発生してから実際にDOMの更新を行うまでのプロセスはメモリ上のみで行い、DOM更新も必要最小限の範囲で行うことで高速化を実現しているのです。

開発環境

　現在はcreate-react-appというツールがリリースされており、新しいアプリを作る際には最良の手段であると公式ドキュメントにも記載があります。本稿でも、その方法を紹介します。以前はReactの環境を構築するために、コンパイルツール（Babel）やビルドツール（Browserify、 Webpack）等多くのツールが必要でしたが、このツールを使えば簡単に環境ができあがります。
ただし、既存のプロジェクトにReactを組み込む場合はnpmを使ってreactモジュールをインストールするのと、BrowserifyやWebpackを使ったビルド環境の構築が必要になります。

コマンドの実行

　以下のコマンドにより、ツールのインストールからアプリの実行まで行えます。このツールで新規に作成したアプリは、内部的に上で紹介したビルドツール等が自動設定されているため、npm run buildコマンドを実行することで簡単にビルドまで行えます。

# グローバル環境にツールをインストール
$ npm install -g create-react-app

［省略］

# プロジェクトの作成
$ create-react-app hello-world

［省略］

Success! Created hello-world at <path_To_hello-world>/hello-world
Inside that directory, you can run several commands:

  npm start
    Starts the development server.


# 開発環境でのテスト実行
$ cd hello-world
$ npm start

Starting the development server...

Compiled successfully!

The app is running at:

  http://localhost:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

　エラーが発生せずにコマンドが完了すると、ブラウザが起動し、以下のようなページが表示されます。トップページのアドレスは「http://localhost:3000」です。

図2　React標準ツールで作成されるテンプレートページ

　ツールインストール後に、create-react-appコマンドを実行すると、reactを動作させるために必要なnpmモジュールのインストールを含め、アプリのひな形が作成されます。npm startコマンドにより、nodeサーバーの起動、およびBabelによるES6のコードの変換、Webpackによるモジュールの依存関係が解決などの処理が行われ、開発環境上でアプリが動作するという流れです。

　詳細なコマンド実行結果は配布サンプルを参照してください。本番環境リリース時には、パフォーマンスを最適化のためにnpm run buildコマンドの実行によりbuildフォルダに生成されるファイル群をデプロイします。