質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

2116閲覧

Reactの実行環境

chiba_kun

総合スコア16

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/10/24 13:47

経緯と疑問

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

投稿2019/10/29 14:47

zma3

総合スコア39

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chiba_kun

2019/10/29 19:54

回答ありがとうございます! index.html内にはスクリプトを読み込むタグがないのにどうして、scriptが実行されているのかが謎でした。 >>JavaScriptのファイルが読み込まれており描画が書き換わっています。 ですので、この部分については理解をしています。 >>public/index.htmlのようなファイルはありませんでしたでしょうか? はい、ありました。ですがlocalhost:3000で開かれているファイルは「index.html」ではなく「index」でした。 拡張子が省略されているだけなのでしょうか?普段htmlファイルをブラウザで開いた時、拡張子まで表示がされるので もしかすると、読み込まれているのはhtmlファイルではないのかな?と思い質問文をしたためました。
chiba_kun

2019/10/29 19:58

質問から自己解決に至るまでの経緯を説明します。 初心者なので古典的なjsの書き方をずっとしていました。なのでモダンな開発方法を学んでみようと思い node.jsやnpm、タスクランナーやモジュールバンドラー、reactという色々な技術に触れ勉強をしています。 質問を投稿した当時は、タスクランナーやモジュールバンドラーが何をしているのかさえよく分かっていませんでした。 Create React AppはReactは実行環境に必要なパッケージをまとめてインストールしてくれる便利なモジュールだということもつい先日知りました。 この質問を投稿した当時は、Create React Appというパッケージが一体何なのかさえよく分からずにインストールを行い、使っていました。 この質問の趣旨の「index.htmlにスクリプトを読み込むタグが存在しないのに、どうしてスクリプトが実行されているのか」 という謎についてですが、ファイルをバンドルする処理の中かなにかで、index.html内にスクリプトを書き込みような処理をきっと行っているのだろう多分、 という結論に至り、曖昧ではありますが自己解決をすることが出来ました。
chiba_kun

2019/10/29 19:58

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

0

自己解決

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

投稿2019/10/24 16:26

chiba_kun

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問