JavaScriptで別ファイルの関数を呼び出す方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで別ファイルの関数を呼び出す方法について解説しています。ここでは別ファイルで定義されたjQueryの関数を呼び出す場合の書き方を例として解説します。サンプルで動作を確認しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
nakamoto
JavaScriptで別ファイルの関数を呼び出す方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
JavaScriptで別ファイルの関数を呼び出すことができれば、用途ごとにJavaScriptの関数をまとめることができます。
実務でも、複数のライブラリを使用する際、複数のJavaScriptファイルから関数を呼び出すので、ぜひ学習してみてください。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
別ファイルの関数を呼び出す方法について詳しく説明していくね！
お願いします！
別ファイルを読み込む方法
HTMLからJavaScriptを読み込む場合、scriptタグを利用して読み込みます。
scriptタグを実装する位置は2種類あります。
- headタグに実装する場合
- bodyタグの終了タグの直前に実装する場合
headタグに実装する場合
headタグに実装する場合は、JavaScriptをbodyタグ内で実行する場合です。
ここでは、jQueryをheadタグ内で読み込むことで、bodyタグ内のJavaScriptでjQueryを利用した処理を可能にしています。
Vue.jsなどのフロントエンドフレームワークを利用する際には、headタグ内でVueファイルを読み込み、body内でVueの処理を呼び出す実装行うこともあります。
注意点として、headタグに読み込み実装すると、headタグ内のJavaScriptを読み込み終わってからHTMLの表示が始まるため、表示速度が遅くなるというデメリットもあります。
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
// スクリプトを<body>内で実行する
</script>
bodyタグの終了タグの直前に実装する場合
現在主流な方法としては、bodyタグの終了タグの直前にscriptタグを実装する方法です。
bodyタグの終了タグの直前にscriptタグを実装する際、複数のファイルを利用することがあります。
複数のJavaScriptファイルを呼び出す場合、先にjQueryなどのライブラリを読み込んでおくことで、他のファイルでjQueryが利用されていたときに、エラーなく処理できます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>
別ファイルの関数を呼び出す方法
head内でJavaScriptファイルを2つ呼び出して、関数を呼び出してみます。
HTMLサンプルコード
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="sample1.js"></script>
<script src="sample2.js"></script>
</head>
<body>
<input type="button" id="b1" value="ボタン1" onclick="sample1()">
</body>
</html>sample1.jsサンプルコード
function sample1() {
sample2();
}sample2.jsサンプルコード
function sample2() {
alert('sample2を呼び出しました。');
}実行結果
解説
HTMLの次のコードで、JavaScriptのsample1.jsとsample2.jsを読み込んでいます。
<script src="sample1.js"></script>
<script src="sample2.js"></script>
HTMLの次のコードで、sample1.jsファイルのsample1()という関数を実行しています。
<input type="button" id="b1" value="ボタン1" onclick="sample1()">
samle1.jsでは、次のコードでsample2.jsのsample2()という関数を呼び出しています。
sample2();
samle2.jsでは、次のコードでアラートを表示しています。
つまり、HTMLからsample1()関数を実行し、sample1.jsからsample2.jsにあるsample2()関数を呼び出しています。
alert('sample2を呼び出しました。');
実際に書いてみよう
ここでは、実際に複数の外部ファイルを呼び出して実行してみましょう。
HTMLサンプルコード
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<dl class="accordion">
<dt><a href="#">現役エンジニア</a></dt>
<dd>テックアカデミーでは講師をメンターと呼びます。通過率10％の選考に合格し、技術力とコミュニケーション力に長けた現役エンジニアのメンターがあなたの学習をマンツーマンでサポートします。</dd>
<dt><a href="#">最短４週間で副業</a></dt>
<dd>プログラミング初心者でも最短4週間で副業に役立つスキルを習得メンターが全員現役エンジニアだから仕事につながるスキルを学べる受講終了後に副業につながる独自の案件を紹介可能</dd>
<dt><a href="#">経産省の認定講座</a></dt>
<dd>経産省の認定講座のため最大30万円キャッシュバックされる</dd>
</dl>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>JavaScriptサンプルコード
(function($) {
var allPanels = $('.accordion > dd').hide();
$('.accordion > dt > a').click(function() {
allPanels.slideUp();
$(this).parent().next().slideDown();
return false;
});
})(jQuery);実行結果
解説
HTMLでは、dtタグとddタグで構成されるテキストコンテンツを用意しています。
HTMLの次の2行で、jQueryファイルと、JavaScriptファイルを読み込んでいます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>
<script src=”main.js”></script>で読み込んだJavaScriptでは、jQueryを利用します。
そのため、先に<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>でjQueryを読み込んでから、<script src=”main.js”></script>を読み込む順番にしています。
JavaScriptファイルでは、アコーディオン機能を実装しています。
今回は外部ファイルから、さらに外部ファイルを読み込んで実行する例なので、説明は割愛します。
ぜひ、実行結果のサンプルをクリックして、アコーディオンの動作を確かめてみてください。
まとめ
JavaScriptファイルを複数用意して、機能に応じたJavaScriptファイルを作成することができました。
JavaScriptファイルを読み込む位置は、headタグ内とbodyタグ内の2箇所ありました。
headでJavaScriptファイルを読み込む場合、HTMLの表示速度が遅くなることがありました。
JavaScriptファイル内でjQueryを利用している場合、先にjQueryファイルを読み込んでから、JavaScriptファイルを読み込む必要がありました。
もし、JavaScriptが動作しない場合は、ローカルのブラウザでJavaScriptが動かない時の主な原因の記事を参考にしてみてください。
複数のJavaScriptファイルを読み込んだ際、うまくいかない場合はJavaScriptでconsole.logを使ったデバッグのやり方 を参考にエラーを探してみてください。
JavaScriptで別ファイルの関数を呼び出す方法が、分かりやすくて良かったです！
ゆかりちゃん、これからも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
