JavaScriptで別ファイルの関数を呼び出す方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで別ファイルの関数を呼び出す方法について解説しています。ここでは別ファイルで定義されたjQueryの関数を呼び出す場合の書き方を例として解説します。サンプルで動作を確認しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

監修してくれたメンター

nakamoto

アジマッチ有限会社代表取締役社長。書籍化歓迎。対応業務:PHP(Laravel)、機械学習、Vue.js、LAMP・AWS、越境EC、CTO、エンジニア採用、CTO、経営者の不安解決コンサルティング。

JavaScriptで別ファイルの関数を呼び出す方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

JavaScriptで別ファイルの関数を呼び出すことができれば、用途ごとにJavaScriptの関数をまとめることができます。

実務でも、複数のライブラリを使用する際、複数のJavaScriptファイルから関数を呼び出すので、ぜひ学習してみてください。

目次

1時間でできる無料体験!

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

別ファイルの関数を呼び出す方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

別ファイルを読み込む方法

HTMLからJavaScriptを読み込む場合、scriptタグを利用して読み込みます。

scriptタグを実装する位置は2種類あります。

  1. headタグに実装する場合
  2. 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を呼び出しました。');

 

[PR] フロントエンドで副業する学習方法を動画で公開中

実際に書いてみよう

ここでは、実際に複数の外部ファイルを呼び出して実行してみましょう。

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="#">最短4週間で副業</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ファイルでは、アコーディオン機能を実装しています。

今回は外部ファイルから、さらに外部ファイルを読み込んで実行する例なので、説明は割愛します。

ぜひ、実行結果のサンプルをクリックして、アコーディオンの動作を確かめてみてください。

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料体験 に参加してみませんか?

初心者でも最短1時間で学習が体験できるカリキュラム、現役エンジニアに何でも相談できるカウンセリング、無制限のチャット質問サービスすべて無料で体験 できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら体験者限定の割引特典付き! 無料体験はこちら

まとめ

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サービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!

独学に限界を感じたら…テックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 独学に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料で予約する