JavaScriptでファイルを読み込む方法とは【メンターが回答】

「JavaScriptファイル内で外部JavaScriptを読み込み、変数を利用する方法とは。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。ぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

JavaScriptファイル内で外部JavaScriptを読み込み、変数を利用するだね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

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

jsファイルをHTMLに読み込む方法は分かりますが、jsファイル内で他のjsファイルを読み込むにはどうすればいいでしょうか?

 

具体的にやりたいこととしては、以下の内容です。

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

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

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

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

 

該当のソースコード

//JavaScript

//・・・・・・・・・・・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で使いたいです。

 

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

メンターからの回答

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

結論から伝えると、読み込み方には問題はなく、変数宣言の仕方に問題があります。

varを付けて変数を宣言すると、スコープがそのファイルに限定されてしまいます。

よって、includes.jsの中でfloala_settingという変数を取得するための関数を作成します。

//JavaScript

//・・・・・・・・・・・include.js

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

//・・・・・・・・・・・main.js

//include.jsを読み込み
document.write("<script type='text/javascript' src='include.js'></script>");
const froala_setting = getSetting();
$('.content').froalaEditor(froala_setting);

 

以上、JavaScriptファイル内で外部JavaScriptを読み込み、変数を利用する方法について解説しました。

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

他にもJavaScriptでグローバル変数を取得する方法についてメンターが回答しているので、合わせてご覧ください。

 

回答してくれたメンター

小芝 涼太(こしばりょうた)

Webアプリケーションエンジニア。

Vue.jsを用いたフロントエンド開発を中心に、UXデザインなども行なっております。

 

田島悠介

JavaScriptファイル内で外部JavaScriptを読み込み、変数を利用する方法について解説したよ。

大石ゆかり

読み込んでみたんですが、関数が使えないみたいなんです。

田島悠介

JavaScriptの場合読み込む処理が終わる前に関数が実行されてしまうので、window.onload内で読み込んだ関数を使うようにするといいよ。

大石ゆかり

わかりました。ありがとうございます!

 

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

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

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