JavaScript

HTMLでJavaScriptの外部ファイルを読み込み、実行する

どうも、つよぽんです!

今回は、JavaScriptファイルの作成方法と、作成したJavaScriptをHTMLで読み込み、実行するまでの手順を解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  • HTMLとJavaScriptの連携方法がわからない
  • HTMLで読み込んだJavaScriptが正しく読み込まれているか確認する方法を知りたい

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
JavaScriptとHTMLを連携させてJSを実行する方法①「JavaScriptファイルの作成方法」②「HTMLからJavaScriptを読み込む方法」③「JavaScriptとHTMLが正しく連携できているか確認する方法」。この3つのやり方について学習していきます。...

それでは次の内容で話を進めていきます。

今回の内容
  1. JavaScriptを外部ファイルとして作る
  2. HTMLでのJavaScriptファイルの読み込み方
  3. HTMLを使ってJavaScriptが正しく読み込まれているか確認する方法

 

JavaScriptを外部ファイルとして作る

この章ではJavaScriptファイルの作り方について解説します。

そもそも外部ファイルとは?

まず、記事タイトルやこの章のタイトルにも使われている「外部ファイル」とは一体どういう意味でしょうか?

HTML内にscriptタグで囲むことで直接JavaScriptコードを埋め込むことができます。

しかし、可能な限りHTMLは構造の定義だけに集中すべきなので、CSSも同様でJavaScriptのコードをHTML内に可能な限り埋め込まないことが望ましいです。

そこで、スタイル定義はCSSファイルに書き出すように、JavaScriptのコードはJavaScriptファイルに書き出して、HTMLではそのJavaScriptファイルを読み込むようにします。

この、HTMLとは別で作成するJavaScriptファイルを「外部ファイル」に書き出すといいます。

外部ファイルのJavaScriptを作成する方法

JavaScriptを外部ファイルとして作成する方法はHTMLファイルを作成したときと同じように、新しくファイルを作成して、ファイル名の末尾(=拡張子)に「.js」とつければOKです。

以下の画像は「main.js」というJavaScriptファイルを作成した様子になります。

JavaScriptファイルを作成している様子JavaScriptファイルを作成している様子

そもそもどこにJavaScriptファイルを作成すればよいかわからない方は、以下の記事で「ディレクトリの用意」から「エディタを使ってファイルを作成する」までの手順を解説しているので参考にしていただけたらと思います。

あわせて読みたい
【超入門】図解付き!HTMLの作成からブラウザでの動作確認までこれからHTMLの学習を始めようと思っているけど、どうやってHTMLを書き始めれば良いかわからない。作成したHTMLを確認する方法がわからない。今回の記事ではそのような悩みを持った方に向けて、その解決法を解説します。...

HTMLでのJavaScriptファイルの読み込み方

前の章でJavaScriptファイルを作成しました。

それでは作成したJavaScriptをHTMLで読み込むためにはどうすれば良いでしょうか?

HTMLでJavaScriptファイルを読み込むためには「script要素」を使います。

以下の画像の赤枠内では先程作成した「main.js」をscriptタグを使って読み込んでいるところを表しています。

JavaScriptファイルをHTMLで読み込んでいる様子JavaScriptファイルをHTMLで読み込んでいる様子

画像内ではbodyタグ内の末尾でJavaScriptファイルを読み込むようにしていますが、headタグ内でscriptタグを使ってJavaScriptファイルを読み込むこともできます

しかし、headタグ内でJavaScriptファイルを読み込むよりbodyタグの末尾でJavaScriptファイルを読み込んだほうがWebページの表示スピードを上げる意味で望ましいです。

JavaScriptファイルの読み込む位置でWebページの表示速度が変わる理由は以下の記事で解説しています。詳しく知りたい方は以下の記事を参考にしていただけたらと思います。

あわせて読みたい
HTMLでJavaScriptの読み込み時に気をつけること【ページ表示を早める】
HTMLでJavaScriptの読み込み時に気をつけること【ページ表示を早める】HTML内でJavaScriptファイルを読み込む時に使うscriptタグの位置によってページの表示スピードが変わってきます。どこに配置すればよいか、なぜ表示が早くなるのかについて詳しく解説します。...

HTMLを使ってJavaScriptが正しく読み込まれているか確認する方法

前の章で、HTMLのscriptタグを使ってJavaScriptファイルを読み込むコードを記述するところまで行いました。

しかし、今のところJavaScriptファイル内に何もコードを記述していないので、HTMLファイルをブラウザで開いてもJavaScriptのコードは何も実行されず、なんの変化も無いため正しく読み込めているのかわかりません。

そこでJavaScriptファイルに「alert(1);」というコードを1行記述してください。

以下の画像は「alert(1);」を「main.js」に埋め込んだ様子です。

JavaScriptファイルに「alert(1);」を記述した様子JavaScriptファイルに「alert(1);」を記述した様子

alert関数」を使うことで、HTMLをWebブラウザで表示した際に、正しくJavaScriptファイルが読み込まれていれば「アラートダイアログ」がWebブラウザ上に表示されます。

以下の画像は「main.js」に記述した「alert(1);」が正しく実行されてWebブラウザ上に「アラートダイアログ」が表示されている様子をあらわしたものです。

アラートダイアログが表示されている様子アラートダイアログが表示されている様子

アラートダイアログが表示されたことから、JavaScriptファイルが正しく読み込めているのを確認できました。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. JavaScriptコードはHTML内に直接埋め込むことも出来るが、HTMLファイルとは別にJavaScriptを外部ファイルとして作成したほうが良い
  2. HTMLからJavaScriptファイルを読み込む場合は「script要素」を使う
  3. JavaScriptが正しく読み込まれているかは「alert関数」を使うことでカンタンに確認できる。

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptとHTMLを連携させてJSを実行する方法①「JavaScriptファイルの作成方法」②「HTMLからJavaScriptを読み込む方法」③「JavaScriptとHTMLが正しく連携できているか確認する方法」。この3つのやり方について学習していきます。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です