JavaScriptでの外部ファイルの読み込み方法【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptでの外部ファイルの読み込み方法について、HTMLとJavaScriptそれぞれで読み込む場合に分け、簡単に解説していきます。

HTMLでJavaScriptファイルを読み込む方法

JavaScriptファイルはscriptタグで読み込めます。

この方法はJavaScriptファイルの基本的な読み込み方法になります。

<script src="hoge.js"></script>

上記のコードのように、scriptタグのsrc属性にJavaScriptファイルのパスを指定します。

JavaScriptでJavaScriptファイルを読み込む方法

JavaScriptを使っても外部のJavaScriptファイルを読み込めます。

基本的にはscriptタグで読み込む方法をJavaScript化した方法になります。

var element = document.createElement('script');
element.src = "hoge.js";
document.body.appendChild(element);

上記のコードのように、まずscriptタグを作り、srcプロパティにJavaScriptファイルのパスを指定し、bodyの末尾に追加します。

JavaScriptで外部にあるCSSファイルを読み込む方法

JavaScriptを使えば外部のCSSファイルも読み込むことができます。

JavaScriptファイル同様、CSSファイルもhead内で読み込む方法をJavaScript化した方法になります。

var element = document.createElement('link');
element.href = "hoge.css";
element.rel = 'stylesheet';
element.type = 'text/css';
document.head.appendChild(element);

上記のコードのように、まずlinkタグを作り、hrefプロパティにCSSファイルのパスを指定し、その他のプロパティも設定したうえで、headの末尾に追加します。