【JavaScript入門】外部JSファイルを読み込んでみよう

みなさんこんにちは!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ファイルと同じフォルダに保存していますが、そうでない場合は参照したい外部ファイルのパスを入力してください。実行結果は、ウェブページ上でのアラート表示です。

実際、以下のようなアラートが表示されました。

2018-07-05 (1)

画像:「Hello World!」表示

ご覧いただけるように、正常にプログラムが発動したことが確認できました。

また、ES2015(ES6)からはモジュール化によるJavaScriptファイルの管理が行えるようになっており、importを用いて読み込むこともできるようになりました。基本的な使い方については次の記事でまとめているので合わせて参考にしてみてください!

【JavaScript入門】importで外部ファイルを読み込む方法
更新日 : 2018年5月31日

外部ファイルを使用する際の注意点

外部ファイルを使用する基本的な方法を学んだところで、主な注意点などに触れておきたいとおもいます。

複数の外部ファイルを使用する場合

先ほどのサンプルコードでは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が最初に指定されているので、先ほどと同じアラートが先に表示されます。

そしてその次に以下のようなアラートが表示されます。

2018-07-05 (2)

画像:「Samurai」表示

ご覧いただけるように、ファイルを記述する順番によってアラート表示の順番が決まります。

文字コード指定

JavaScriptコードが、htmlファイルとは違う文字コードを使用している場合、文字化けが起きてしまうことがあります。実際、以下のようなコードでは文字化けが起こる可能性があります。

alert("みなさんこんにちは!")

その為、外部ファイルをhtmlファイル内に指定する際に、文字コードを設定しましょう。以下のコードをご覧ください。

<html>
  <body>
    <script src="sample3.js" charset="utf-8"></script>
  </body>
</html>

上のコードでは、scriptタグ内の属性charsetにutf-8と指定しました。こうすることで、参照するファイルは日本語含んでいても文字化けを起こしません。実際、以下のようなアラートが表示されました。

2018-07-05 (3)

画像:「みなさんこんにちは!」表示

ご覧いただけるように、日本語の文字が正常に出力されています。

まとめ

今回はJavaScriptにおける「外部ファイル」の扱い方を解説しました。外部ファイルを使用する事でコードがより簡潔に仕上がるなど、メリットはたくさんあるので覚えておくと便利です。みなさんもこの記事を通して、外部ファイルの扱い方をどんどんマスターしていってくださいね。

プログラミング学習を効率良く進めたいなら…

学習を始めたけどエラーが解決できない
作りたいものはあるけど、何から始めればいいかわからない
プログラミングに対して、このような悩みを持っている方も多いですよね。

そんな方には、弊社が運営するサブスク型のプログラミングスクール「SAMURAI ENGINEER Plus+がおすすめです。



月額2980円(税別)で、主に4つのサービスを提供させていただきます。

  • 現役エンジニアによる月1度の「マンツーマン指導」
  • 平均回答時間30分の「Q&Aサービス」
  • 作りながら学べる28種類の「教材」
  • 学習を記録&仲間と共有できる「学習ログ」

目的にあった教材を選べば、どなたでも効率よく学習できるほか、Q&Aサービスやマンツーマン指導を活用することで、挫折せずにプログラミングの習得が可能です。

プログラミングを効率的に学びたい人はもちろん、何から始めたらよいのかわからない方は、ぜひ「SAMURAI ENGINEER Plus+」をご利用ください。
まずは30日無料体験

書いた人

Kotono

イタリア在住15年目の22歳です。イタリアの大学で情報科学&応用数学を学んでいます。主にJavaScriptやPythonについての記事を書いたりしています。