一旦は実行できるようになった最初のReactアプリケーション"hello-world"ですが、実行する時には何やらバックエンドでウニュウニュ動いてますね。
これって何を実行しているんでしょうかね。
探ってみたいと思います。
yarn startは何をしている？
それでは実行時のコンソール出力を見てみましょう。
前回同様にメッセージに括弧付きの番号"()"を付けてから１つ１つ確認していきます。
satom@W1007018N182 MINGW64 ~/src/react-app/hello-world (master)
(1)
$ yarn start
(2)
yarn run v1.22.4
(3)
$ react-scripts start
i ｢wds｣: Project is running at http://192.168.3.8/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\Users\satom\src\react-app\hello-world\public
i ｢wds｣: 404s will fallback to /
(4)
Starting the development server...
Compiled successfully!
(5)
You can now view hello-world in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.3.8:3000
(6)
Note that the development build is not optimized.
To create a production build, use yarn build.
(1) React開発サーバーの実行
単純に、yarnからReact開発サーバーを実行しています。内部的には(3)で説明している通りreact-script startが実行されています。
何故yarn startが```react-script start``になるのかは、別の記事で説明しますね。
(2) 実行したyarnコマンドのバージョン
単純なので割愛します。
(3) React開発サーバー（webpack-dev-server）起動時のステータス表示
内部的には"webpack-dev-server"(wds)という、フロントエンド開発時に使用できるWEBサーバーが起動しているようです。
参考までに、公式のwebpack-dev-serverの情報はこちらです。
https://github.com/webpack/docs/wiki/webpack-dev-server
複数メッセージが表示されていますが、開発サーバー起動時以下の内容をコンソールに出力しています。
- wds実行時のURLを通知
- webapckにより生成されたコンテンツのURL
- webpackに存在しない静的コンテンツのURL
- 404エラー発生時はエラーとせずに"/"へフォールバックする
このように設定されるのは分かりました。ですが、これってどこで指定されているんでしょうね。これも別の記事で確認結果を書きたいと思います。
今は先に進みましょう。
と、その前に、webpackというキーワードが気になりますので、少しだけ調べてみました。
webpackとは
クライアント側のパッケージツールでした。私たちが作成したJavaScriptファイル（jsファイル）から参照している他のjsファイルやcssファイルやimageファイルをまるっと１つのjsファイルにまとめるためのJavaScriptライブラリです。（イメージファイルはbase64に符号化されて保存されるようです）
これを使うメリットは、
- ネットワークトラフィックの負荷を軽減
- レンダリングが高速化
- モジュール管理が容易
デメリットは、CSSやイメージもパックされるので、デザイナーとの協業で苦労するようです。
とりあえず調べた内容をザックリ紹介しましたが、詳細は別の記事で書きたいと思います。
(4) WDSの起動
先ほど説明したwdsがここで起動されています。
(5) ReactアプリケーションへのアクセスURL
起動したReactアプリケーションにアクセスするためのローカルURLとネットワークURLが表示されます。
ただ、便利なことにwdsが実行されると、デフォルトブラウザが自動起動され、ここに表示されたURLにアクセスしてくれます。
(6) ビルドオプションの注意書き
最後に、開発用ビルドなので最適化されていないよーって通知してくれてます。
最終的に別環境にデプロイする時はyarn buildを使う事で配布用パッケージという形で生成されるようです。
以降の記事では、作成されたReactアプリケーションのプロジェクトファイルを１つ１つ確認していきたいと思います。Reactアプリケーションというのがどのようなファイル構成になっており、どのような原理で動作しているのか、あまり深く入りすぎず、理解できる程度の深度で追ってみたいと思います！