Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス

付録A開発環境の構築

宮崎 空

本書はハンズオン形式になっており、作りながら読み進められるように書かれています。その過程でさまざまなツールが紹介されますが、この付録では、それらのツールを整理してリファレンスとして参照できるようにしました。また、本書ではReactのサンプルコードを実行するためにCreate React App（以降CRAと略す）というツールを使ってプロジェクトを作成していますが、この付録ではあえてCRAを使わずに開発環境を構築します。CRAを使ってプロジェクトを作成すると、自動的に必要なツールがインストールされ、またそれらのツールの設定ファイルが自動生成されます。これはたいへん便利である反面、すべてが自動化されるため、学習という観点からは何が起きているのか分かりにくいというデメリットがあります。そこで、この付録では、CRAを使わずに、まったくゼロから開発環境を構築します（表A-1）。

表A-1　各ツールの本書での登場箇所

ツール	用途	本書での登場箇所
npm	パッケージ管理	1.3.3節および本書全体
ESLint	構文チェック	10.1節
Prettier	コード整形	10.2節
Jest	ユニットテスト	10.5節、10.6節
webpack	モジュール連結	5.3節
Babel	コンパイル	2.3節、5.1.2節

A.1　npm

npmはNode.jsのパッケージマネージャで、パッケージ配布のためのデータベース（npmレジストリ）およびパッケージ管理のためのCLI（Command Line Interface）の両方を指します。npmはNode.jsのアプリケーション開発だけでなく、Webフロントエンド開発のプラットフォームとしても広く使用されています。本書では全体を通じて、プロジェクト環境の構築やビルドのために ...