Create React Appは何をしてくれているの？

この記事ではReactで環境構築をする際に使用するCreate React Appについてまとめていこうと思います。一番下に用語説明を載せているのでわからない用語が出てきた場合は参考にしてください。

Create React Appが生まれた経緯

ReactとはFacebook社が2013年にリリースしたJavaScriptのライブラリです。このReactなんですがリリースされてから数年間、開発者は自力で開発環境を構築しなければなりませんでした。なぜならFacebook社内では最初からReactを使う環境が整備されていたため、環境を構築するためのコマンドは必要なかったからです。しかし、そうこうするうちに開発者の間でこの状況が問題として広く認識されるようになりました。さすがにそこで態度を改めたFacebookがリリースしたのがCreate React Appというわけです。それではさっそくCreate React Appについてみていきましょう！

Create React Appでインストールされる３つのパッケージ

create-react-appコマンドを実行すると、指定したテンプレート（TypeScriptなど）を用いてアプリケーションのベースが生成されると同時に、以下の３つパッケージの最新バージョンがインストールされます。

• react
• react-dom
• react-scripts

reactはReact本体のパッケージで、rect-domはDOMを抽象化してReactから操作できるようにするレンダラーのパッケージ、最後のreact-scriptsはCreate React Appを使ううえでとても重要な役割を果たすパッケージです。次の章ではこのreact-scriptsについて詳しく見ていきます。

最強のパッケージreact-scripts！

react-scriptsには50個以上のパッケージが格納されていますが、これらの50個以上のパッケージによって複雑な設定を自分で行うこともなく以下のことが可能になります。

• 新しい仕様の JavaScript や、JSX、TypeScript のコードを ECMAScript5 などのような古いブラウザでも実効可能なJavaScriptにコンパイルする（Babel）
• コンパイラと連携しつつ大量のJSや、CSS、画像などのファイルを一つのJSファイルにまとめ、それぞれの最適化を施す（webpack）
• ファイルの変更を自動検知して再ビルド、リロードしてくれる開発用のHTTPサーバーでのアプリの稼働（webpack-dev-server）
• オールインワンのテスティングフレームワークによるユニットテストの記述（Jest）
• テスト記述の存在および、ファイルの差分を検知して自動で必要最小限のテストを走らせる
• .env(.*)ファイルによる環境ごとに異なった環境変数の設定（dotenv）

Create React Appはただプロジェクトを作ってくれるだけではなく、以上のように環境構築をする上で欠かせないことも行ってくれるのです。このことをぜひ覚えていってください！

Create React Appの使い方

最後にCreate React Appの使い方について説明していきます。まずは以下のコマンドを実行してください。

$ npx create-react-app <プロジェクト名> --template typescript

上記のnpxとはnpmパッケージで提供されているコマンドを実行するためのもので、該当のパッケージがローカル環境（自分のパソコン）にインストールされていればそれを、なければ最新版をダウンロードしてきてそれを実行してくれます。今回のようなプロジェクト作成のコマンドは頻繁に使うものではないうえに、毎回アップデートしながら使うより、インターネットを経由して最新版を直接実行した方が効率がいいというわけです。

次にコマンドにある--template typescriptとは何かについて説明していきます。これは作成プロジェクトの下敷きにするテンプレートを指定するためのもので、今回はTypeScriptのためのテンプレートをこれで指定しています。また--template ~の部分は省略することができます。その場合はデフォルトでバニラJS（素のJavaScript）が適用されます。

上記のコマンドを実行し終えましたら、以下のコマンドを実行してください。

$ cd <プロジェクト名>
$ npm start

ディレクトリを移動するのはnpx create-react-app <プロジェクト名>のコマンドは現在のディレクトリ内でアプリケーションのディレクトリを作成するだけで作成して移動するわけではないからです。npm startはローカルサーバーを立ち上げアプリを稼働させるコマンドになります。デフォルトでは3000番のポートでHTTPサーバーが立ち上げられます。以上でReactの環境構築は完了となります。

おわりに

最後まで読んでいただきありがとうございます。今回はReactの環境構築時に用いられるCreate React Appについてまとめていきましたが、改めてFacebookスゲーなと思いました笑
今後もReactに関する記事を復習がてらに書いていこうと思います！

用語説明

• DOM・・・Document Object Modelの略で、HTMLやXML文書を取り扱うためのAPI、またはHTMLやXMLのツリー構造自体のことを指します。ツリー構造を構成する各要素のことをノードと呼び、JavaScriptではノードの一つ一つに与えられた一意のIDを取得することでDOM操作を行うことができます。
• コンパイル・・・プログラミング言語で書かれたコードを解析し、コンピュータが直接実行可能な形式のプログラムに変換することで、そのためのソフトウェアをコンパイラといいます。また、よく混同されるトランスパイルとはあるプログラミング言語を別のプログラミング言語に変換することを言います。
• フレームワーク・・・アプリケーションなどを開発するためのテンプレートのようなもので、一部にコードを当てはめて使用します。似たものとしてライブラリがあげられますが、ライブラリとは開発の際によく使われるコードの集まりを意味します。フレームワークには一定のルールが存在するため自由度が制限されます。そのため主導権はフレームワーク側にあるといえます。一方でライブラリはルールが存在しないため自由度が高く開発の柔軟性が向上されます。つまりプログラマーが主導権を持っているといえます。例としては、ReactはJavaScriptのライブラリで、Next.jsはReactのフレームワークです。
• 環境変数・・・OSが提供する変数のこと。普通の変数と同様に変数名と値というペアで存在し、変数名で参照すると値が引けます。環境変数には様々なものがありますが、PATHはそのうちの一つです。