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

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

Kotono

Kotono

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