Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

5章開発環境のセットアップ

きちんとした開発やデプロイメント（配備）のためには、単にJSXのプロトタイプ作成やテストだけでなくビルドのプロセスを用意する必要があります。すでにこのようなプロセスが準備されているなら、そこにBabelを使った変換を追加するだけです。本書では、何もない状態からビルドの環境をセットアップしてゆきます。

ここでの目標は、最新のJavaScriptに取り入れられた機能を利用することです。JSXを使えば、まだブラウザに実装されていない機能や構文も記述できます。開発中にバックグラウンドでトランスパイルが行われるようにします。ユーザーのブラウザ上で実行されるものにほぼ近いコードを開発時に生成するため、クライアント側でのトランスパイルは必要ありません。トランスパイルは可能なかぎり透過的に行われるため、コードの記述とビルドという作業の切り替えを意識する必要はありません。

開発やビルドのプロセスについては、多数の選択肢がJavaScriptのコミュニティーなどから提供されています。本書では、可能なかぎりリーンで低階層なビルドをめざします。余分なツールは使わず、日曜大工的なアプローチを採用します。ここでは以下のような事柄が可能になります。

• 行われている処理を理解する
• 後でビルドツールを利用することになった際に、それぞれのツールについて理解した上で適切なものを選択する
• Reactと関連する技術に注力し、余計な物事に気を取られない

5.1　アプリケーションのひな型

まず、新しいアプリケーションのための汎用的なひな型を作ります（本書のサンプルコードのreactbook-boilerディレクトリです）。このアプリケーションは、クライアント側で単一ページ型アプリケーション（SPA）として実行されます。JSXが使われており、今後のJavaScript言語が提供する多くのイノベーションのメリットを享受できます。具体的には、ECMAScript ...