はじめに
簡単にReactの環境をつくろうとした場合、以下のようなコマンドを打つかと思います。
npx create-react-app my-app
cd my-app
npm start
何も考えずこの通りにすればとりあえずReactで動くものが作れるので、便利で重宝しています。
※最近はこれが非推奨になりつつあるようです。（公式サイトの環境構築方法にも載ってない。）
このあたりの話は以下の記事がとても参考になります。
しかし、このコマンドで何が起きているのか、については全くわかりません。
Reactでの開発にだんだん慣れてきたので、このブラックボックスについて、できる限り確かめて見たいと思います。
そもそもなぜNode.jsなのか
そもそも冒頭のコマンドを使用するためにはNode.jsを導入する必要があります。
Reactはフロントエンドのフレームワークです。
かたやNode.jsはサーバーサイドでJavaScriptを書くためのものです。
そのため、よく考えるとReactを書くためにNode.jsを導入するのは奇妙に思えます。
ですが、実際には開発をする際にはReactのコードを書いて終わり、ではありません。
アプリをデプロイするためにビルドの作業が必要です。
また、Reactで使っているJSXはそのままJavaScriptとして動かせないので、一度JavaScriptに変換するトランスパイルという作業が必要になります。
これらの作業を簡易的に実施するために使うモジュール群は、ブラウザ上ではなくサーバー上で動かすため、Node.jsの導入が必要です。
また、上記の様な作業で使用するモジュールのバージョン管理も行う必要があります。
というわけで、React単体で入れたとしても実際の開発には太刀打ちできないため、開発を便利にするためにNode.jsを使っているということになります。
何が作られるか
create-react-appの結果、何が作成されるのかを確認します。
フォルダ構成、およびファイル一覧は以下のとおりです。
また、「node_modules」には大量のモジュールが導入されています。
導入されているモジュールについてはあとで触れるとして、各ファイルを一つずつ見てみます。
public
favicon.io
タブやブックマークに表示されるアイコンです。
index.html
言わずもがな、メインのファイルです。このhtmlファイルが読み込まれ、画面が描画されます。
logo192.png,logo512.png
スマホやPCにインストールしたとき表示されるアイコンの画像です。
manifest.json
PWA(Progressive Web App)のために使われる情報が書かれたJSONファイルです。
※PWAについては私自身まったく詳しくないのですが、詳細は以下が参考になります。
robots.txt
自身のWebサイトのどの部分を見てほしいか、見てほしくないかという情報を検索エンジンのWebロボットに対して与えることができるファイルです。
※以下の公式サイトが参考になります。
src
App.css, App.js
アプリのメインのコンポーネントとそのスタイルを記載するファイルです。
このコンポーネントと他のコンポーネントを組み合わせてアプリを構築していきます。
App.test.js
Appコンポーネントのテストを記載するファイルです。
index.css, index.js
アプリのエントリーポイントとなるJavaScriptファイルと、そのスタイルを記載するファイルです。
このファイルの中で、index.htmlのどの部分にコンポーネントを描画するのかを指定しています。
logo.svg
ロゴ画像です。npm startで表示されるページでくるくる回っているのがこの画像になります。
reportWebVitals.js
アプリケーションのパフォーマンス指標を計測・レポートするためのファイルです。
setupTests.js
テストの設定を行うファイルです。
ルートディレクトリ
.gitignore
Gitのバージョン管理対象外にするファイルを指定します。
package-lock.json, package.json
アプリの詳細な情報や依存関係などが記載されたファイルです。
これは中身を後で確認します。
package-lock.jsonのほうがより厳密にインストールされたモジュールなどのバージョンを管理しています。
README.md
アプリの説明を記載するファイルです。
mdファイルなので、マークダウン記法が使えます。
package.jsonの解析
何が書かれているのか、1つずつ確かめます。
name
プロジェクトの名前を指定します。
これはNPMにパッケージとして公開する際にも使われるので、もし公開する場合にはNPM上で一意である必要があります。
version
アプリのバージョンです。メジャーバージョン、マイナーバージョン、パッチ形式の3つの数値で表します。
private
これを設定しておくことで、誤ってNPMに公開するのを防ぐことができます。
dependencies
アプリの依存しているパッケージを列記します。
create-react-appでは以下7つのパッケージが記載されています。
@testing-library/jest-dom
Jestと連携してDOM要素の状態をテストすることができるライブラリです。
@testing-library/react
Reactコンポーネントのテストを書くためのライブラリです。
@testing-library/user-event
ユーザーのブラウザ操作をシミュレートするためのライブラリです。
react
Reactの大元のパッケージです。これがなくてはReactはかけません。
react-dom
ReactをWebブラウザ上でレンダリングするためのライブラリです。
Reactコンポーネントを実際のDOMに反映します。
reactパッケージと合わせて使うことでReactの記述ができます。
react-scripts
Create React Appが提供するスクリプトと設定のセットです。
開発サーバーの起動、本番用のビルド、テストの実行などの機能が用意されています。
また、Webpackやbabelなどの構成を事前に設定しているため、何も設定せずともすぐにReactの開発ができるようになっています。
これがcreate-react-appの肝と言えそうです。
web-vitals
ウェブアプリケーションのパフォーマンス指標を測定するためのライブラリです。
scripts
プロジェクトを起動したりするためのスクリプトが書かれています。
npm startやnpm buildでローカルサーバーが起動したり、アプリのビルドができたりするのは、スクリプトが定義されているためです。
ここでは主にreact-scriptsが使われています。
eslintConfig
ESLintの設定を記載しています。コードの解析を行ってくれます。
browserslist
アプリケーションがサポートするブラウザのバージョンを記載します。
まとめ
少し退屈かもしれませんが、create-react-appの実行結果がどうなっているのかを一つずつ確認してきました。
普段何気なく使っているコマンドやツールは、余計なことを考えなくていいように作られていますが、往々にしてその仕組みはブラックボックスになりがちです。
何かで詰まったとき、その仕組みが少しでもわかっていれば、より解決が簡単になることもあると思うので、中身からしっかり理解できるようにしたいと思いました。