Reactの実行環境

Question

経緯と疑問

reactの勉強をつい最近始めました。最初は公式ドキュメントからスクリプトを参照するURLをコピーして、HTML内に貼り付ける、という単純な実行環境でした。しかし、npmを用いてreactを扱うようになり疑問が湧きました。

ローカルホストにアクセスすると、下記の画像のようなものがブラウザに出力されます。
当然これはreactによって作られたコンポーネントです。

ですが、reactを実況環境を作る際に生成されたindex.htmlファイル内にはスクリプトを読み込んでいる記述がありませんでした。
つまり疑問とは、index.html内でスクリプトを読み込んでいないのに、どうしてコンポーネントが作成されそれが実際に画面にちゃんと出力されてるの？ということです。

調べたみたこと

デベロッパーツールでファイルの中身を確認してみると、

<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script>

ブラウザに読み込まれた際にはスクリプトを読み込む記述がありました。
また、読み込まれているのは「index.html」ではなく「index」でした。

http://localhost:3000/にアクセスした際に、読み込まれるのはindex.htmlではなく、indexであり、indexはバンドルされて生成されたファイル？ということなんでしょうか。正直全くよく分かりません。バンドルする作業なんて行っていないのですが、勝手にバンドルしてくれてるということなんでしょうか。。。？

また一通りよく分からない記述やよく分からないファイルの中身を調べてみるということをやってみました。

「robots.txt」→クローラーにまつわる話らしい。多分関係ない。
「<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />」→スマートフォンのホーム画面にまつわる話らしい。多分関係ない。
「serviceWorker.js」→PWAにまつわる話で多分関係ない。

#疑問のまとめ

ローカルホストにアクセスした際のindexとは何なのか、なぜindex.htmlではなくindexが読み込まれているのか？

この疑問を解決する為のヒントや検索キーワードなどを教えて欲しいです。

備考

reactの実況環境は下記のウェブサイトを参考にしました。
参考サイト

npmを扱うようになったのはつい数日前です。またサーバーサイドのことは全然全く分かっておらず、知識が乏しいです。何かしらの実況環境を作ったことも殆どありません。

Answer 1

立ち上がったサーバーにlocalhost:3000はindex.htmlが表示されています。
public/index.htmlのようなファイルはありませんでしたでしょうか？
そのなかで、JavaScriptのファイルが読み込まれており描画が書き換わっています。

Comments

[chiba_kun]

回答ありがとうございます！

index.html内にはスクリプトを読み込むタグがないのにどうして、scriptが実行されているのかが謎でした。

>>JavaScriptのファイルが読み込まれており描画が書き換わっています。

ですので、この部分については理解をしています。

>>public/index.htmlのようなファイルはありませんでしたでしょうか？

はい、ありました。ですがlocalhost:3000で開かれているファイルは「index.html」ではなく「index」でした。

拡張子が省略されているだけなのでしょうか？普段htmlファイルをブラウザで開いた時、拡張子まで表示がされるので

もしかすると、読み込まれているのはhtmlファイルではないのかな？と思い質問文をしたためました。

[chiba_kun]

質問から自己解決に至るまでの経緯を説明します。

初心者なので古典的なjsの書き方をずっとしていました。なのでモダンな開発方法を学んでみようと思い
node.jsやnpm、タスクランナーやモジュールバンドラー、reactという色々な技術に触れ勉強をしています。

質問を投稿した当時は、タスクランナーやモジュールバンドラーが何をしているのかさえよく分かっていませんでした。
Create React AppはReactは実行環境に必要なパッケージをまとめてインストールしてくれる便利なモジュールだということもつい先日知りました。
この質問を投稿した当時は、Create React Appというパッケージが一体何なのかさえよく分からずにインストールを行い、使っていました。

この質問の趣旨の「index.htmlにスクリプトを読み込むタグが存在しないのに、どうしてスクリプトが実行されているのか」
という謎についてですが、ファイルをバンドルする処理の中かなにかで、index.html内にスクリプトを書き込みような処理をきっと行っているのだろう多分、
という結論に至り、曖昧ではありますが自己解決をすることが出来ました。

[chiba_kun]

今質問文を見返すと、とても分かりづらい質問文ですね。。。；；
すみません、ごめんなさい；；

Answer 2

Create React Appと調べてみると、それらしい記事がヒットしました。