みなさんこんにちは！Kotonoです。
今回はJavaScriptにおいて、外部ファイルを読み込む方法を解説していきたいと思います。この記事では「外部ファイルとは」「外部ファイルを使用するメリット」などといった基本的な内容から
- 外部ファイルを使用する方法
- 外部ファイルを使用する際の注意点
など、より具体的な内容に関してもわかりやすく説明していきたいと思います。
外部ファイルとは
みなさんはJavaScriptプログラミングにおいて外部ファイルを使用したことはありますか？ここでいう外部ファイルとはJavaScriptのソースコードを記述したファイルのことです。
JavaScriptはウェブブラウザ内のスクリプト言語なので、htmlファイルにHTMLとJavaScriptのコードを両方書くことになります。この場合、直接htmlファイルにJavaScriptコードを書くか、JavaScriptのソースコードを記述した別ファイルを埋め込む、という二つの方法があります。
今回は二番目の別のJavaScriptファイルをhtmlファイルから参照する方法をご紹介いたします。
外部ファイルを使用するメリット
外部ファイルを使用するメリットとは何でしょうか。もしhtmlファイル内に記述するJavaScriptコードが大量であった場合、htmlファイルのコード数はその分多くなってしまい、読みづらいものになってしまいます。
しかし、外部ファイルを使用すると、htmlファイルは一気に簡潔になり非常に読みやすいプログラムになります。その為にも、外部ファイルを使用する方法をマスターしておいて損はありません。
外部ファイルを使用する方法
では、早速サンプルコードを用いて、外部ファイルを使用してみましょう。外部ファイルを使用する前に、ファイルの作成方法を覚えておきましょう。
外部ファイルを作成する方法
JavaScriptコードを記述したファイルの作成方法はとても簡単です。テキストエディタなどにJavaScriptコードを記述し、それを拡張子.js形態で保存します。
そして、そのファイルを、後程使うhtmlファイルと同じフォルダーに保存しておくのみです。今回は、以下のような非常にシンプルなJavaScriptコードを使用します。
alert("Hello World!")
上のコードは、ウェブページにHello World!と書かれたアラートを表示する働きがあります。このJavaScriptコードを含むファイルはsample1.jsと保存しました。
外部ファイルをhtmlファイルから読み込む方法
ではさっそく、htmlファイルから先ほど作成したばかりのsample1.jsファイルを参照してみましょう。以下のコードをご覧ください。
<html>
<body>
<script src="sample1.js"></script>
</body>
</html>
上のコードでは、scriptタグ内のsrc属性にファイル名を指定しました。今回はhtmlファイルと同じフォルダに保存していますが、そうでない場合は参照したい外部ファイルのパスを入力してください。実行結果は、ウェブページ上でのアラート表示です。
実際、以下のようなアラートが表示されました。
ご覧いただけるように、正常にプログラムが発動したことが確認できました。
また、ES2015(ES6)からはモジュール化によるJavaScriptファイルの管理が行えるようになっており、importを用いて読み込むこともできるようになりました。基本的な使い方については次の記事でまとめているので合わせて参考にしてみてください！
外部ファイルを使用する際の注意点
外部ファイルを使用する基本的な方法を学んだところで、主な注意点などに触れておきたいとおもいます。
複数の外部ファイルを使用する場合
先ほどのサンプルコードではsample1.jsのみを使用しましたが、同じhtmlファイルに複数の外部を用いることができます。
以下のコードをご覧ください。
<html>
<body>
<script src="sample1.js"></script>
<script src="sample2.js"></script>
</body>
</html>
上のコードでは、sample1.jsに加えsample2.jsファイルも読み込んでいます。ちなみに、sample2.jsファイルはSamuraiと書かれたアラートを表示させるものです。sample1.jsが最初に指定されているので、先ほどと同じアラートが先に表示されます。
そしてその次に以下のようなアラートが表示されます。
ご覧いただけるように、ファイルを記述する順番によってアラート表示の順番が決まります。
文字コード指定
JavaScriptコードが、htmlファイルとは違う文字コードを使用している場合、文字化けが起きてしまうことがあります。実際、以下のようなコードでは文字化けが起こる可能性があります。
alert("みなさんこんにちは！")
その為、外部ファイルをhtmlファイル内に指定する際に、文字コードを設定しましょう。以下のコードをご覧ください。
<html>
<body>
<script src="sample3.js" charset="utf-8"></script>
</body>
</html>
上のコードでは、scriptタグ内の属性charsetにutf-8と指定しました。こうすることで、参照するファイルは日本語含んでいても文字化けを起こしません。実際、以下のようなアラートが表示されました。
ご覧いただけるように、日本語の文字が正常に出力されています。
まとめ
今回はJavaScriptにおける「外部ファイル」の扱い方を解説しました。外部ファイルを使用する事でコードがより簡潔に仕上がるなど、メリットはたくさんあるので覚えておくと便利です。みなさんもこの記事を通して、外部ファイルの扱い方をどんどんマスターしていってくださいね。
