JSファイル内で外部JavaScriptをインクルードする方法【メンターが回答】

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

質問

JavaScriptファイルを編集していましたが、重複する記述が複数のJavaScriptファイルでできたため一箇所に分けてそれを読み込むことにしたいと思っています。

JavaScriptファイル内で他のJavaScriptファイルを読み込むにはどう書けば良いでしょうか？

 

自分で試したこと

main.jsとinclude.jsを用意しています。

main.jsで、include.jsを読み込み、include.jsにある変数を利用したいです。

document.write("<script type='text/javascript' src='include.js'></script>");

これで読み込む方法は分かったのですが、これだとinclude.jsにある変数を使えません。

どのように読み込めばmain.jsでinclude.jsの変数が利用できるのでしょうか？

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

該当のソースコード

include.js

var froala_setting = {
        language: 'ja',
        toolbarButtons: ['insertImage','insertVideo','insertTable','undo', 'redo']
      };

main.js

//include.jsを読み込み
$('.content').froalaEditor(froala_setting);

//froala_setting変数をmain.jsで使いたいです。

 

メンターからの回答

読み込む方法は分かったのですが、include.jsにある変数を使えません

はい、JavaScript内から別のJavascriptファイルを呼び出す方法はこの方法で合っています。

includes.jsの中のfunction内で ‘var’ をつけて変数を宣言するとfunction外からその変数の内容を取得することができなくなります。

なので、変数の内容を別ファイルで取得する場合は、includes.jsの中でfloala_settingという変数を取得するための関数を記述します。

function getVariable(){
    var froala_setting = {
        language: 'ja',
        toolbarButtons: ['insertImage','insertVideo','insertTable','undo', 'redo']
    };
    return froala_setting;
}

そして、main.js内にて以下のコードにて変数を取得することができます。

var froala_setting = getVariable();
$('.content').froalaEditor(froala_setting);

 

 

DOMを利用する例

ここでは、DOMを利用してJavaScriptファイル内で外部のJavaScriptファイルをインクルードする例を解説してみます。

ソースコード

var script = document.createElement("script");

script.src = "include.js";

document.body.appendChild(script);

 

解説

1行目のvar script = document.createElement(“script”);では、変数scriptに対して、document.createElementメソッドを利用して生成したscript要素を格納しています。

変数とは、値を入れる箱のようなものです。

document.createElementメソッドを利用することで、指定した要素を生成することが可能です。

script要素とは、<script src=”include.js”></script>のような、scriptを指定する要素を意味します。

2行目のscript.src = “include.js”;では、script要素のsrc要素に対して、include.jsを指定します。

この事により、<script src=”include.js”></script>という要素を生成することができます。

3行目の、document.body.appendChild(script);では、変数scriptをhtml document内のbody要素に対してappendChildメソッドを利用して追加します。

結果的に、html内に<script src=”include.js”></script>が追加されることで、include.jsをインクルードする事ができます。

 

以上、JSファイル内で外部JavaScriptをインクルードする方法について解説しました。

TechAcademyでは、現役JavaScriptエンジニアのメンターが質問にすぐ回答します。

 

回答してくれたメンター

武田 勝輝（たけだ　しょうき） HaskellやLispなど関数型プログラミング言語を使用した数値計算システム開発業務に従事。

 

他にもJavaScript内でdocument.writeを使わずにHTMLを書く方法についてメンターが回答しています。

TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

独学に限界を感じている場合はご検討ください。