JavaScriptで外部ファイルから関数を呼び出す方法10選

JavaScriptで外部ファイルから関数を呼び出す方法JS
この記事は約18分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●JavaScriptで外部ファイルの関数を呼び出す基本

JavaScriptで開発を進めていると、コードの量が増えてくるにつれ、1つのファイルで全ての処理を書いていくのが大変になってきますよね。

そんな時、コードを外部ファイルに分割し、必要な関数を呼び出すことで、コードの可読性と保守性を高めることができます。

では、JavaScriptで外部ファイルの関数を呼び出すには、どのような方法があるのでしょうか？

ここでは、基本的な方法をみていきましょう。

○外部JSファイルの読み込み方法

まず、外部JSファイルを読み込むには、HTMLファイル内で<script>タグを使用します。

src属性に外部JSファイルのパスを指定することで、HTMLファイルから外部JSファイルを読み込むことができます。

○サンプルコード1：script要素で読み込む

例えば、main.jsという名前の外部JSファイルを読み込むには、次のようにHTMLファイル内で記述します。

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

この<script>タグは、HTMLファイルの<head>タグ内または<body>タグの最後に記述するのが一般的です。

○サンプルコード2：defer属性で読み込む

ただ、<script>タグをHTMLファイルの<head>タグ内に記述すると、外部JSファイルの読み込みが完了するまでHTMLの解析が中断されてしまいます。

これを避けるために、defer属性を使用することをおすすめします。

<script src="main.js" defer></script>

defer属性を使用すると、HTMLの解析と並行して外部JSファイルの読み込みが行われ、HTMLの解析が完了した後に外部JSファイルが実行されます。

これで、ページの表示が高速化されます。

●モジュールを使った外部関数の呼出し

JavaScriptのコードを外部ファイルに分割する際、モジュールを使うことで、関数や変数のスコープを適切に管理し、名前の衝突を避けることができます。

ES6(ECMAScript 2015)以降、JavaScriptにはモジュールシステムが導入されており、exportとimportを使って モジュール化を実現できるようになりました。

モジュールを使うことで、コードの可読性と保守性が向上し、大規模なプロジェクトでも効率的に開発を進めることができますよ。

それでは、モジュールを使った外部関数の呼び出し方法について、具体的なサンプルコードを交えて見ていきましょう。

○サンプルコード3：named exportで呼出し

モジュールから関数を呼び出す方法の1つに、named exportがあります。

外部JSファイルで関数を定義する際に、exportキーワードを使って関数をエクスポートします。

例えば、utils.jsというファイルで、greet関数をエクスポートするには、次のように記述します。

// utils.js
export function greet(name) {
  console.log(`こんにちは、${name}さん！`);
}

次に、別のJSファイルからgreet関数を呼び出すには、importキーワードを使います。

// main.js
import { greet } from './utils.js';

greet('太郎'); // 実行結果: こんにちは、太郎さん！

import文では、fromの後に外部JSファイルのパスを指定します。

このとき、パスの先頭に./をつけることで、同じディレクトリにあるutils.jsを指定していることを表しています。

○サンプルコード4：default exportで呼出し

モジュールから関数を呼び出すもう1つの方法に、default exportがあります。

外部JSファイルで関数を定義する際に、export defaultキーワードを使って関数をエクスポートします。

例えば、utils.jsというファイルで、greet関数をデフォルトエクスポートするには、次のように記述します。

// utils.js
export default function greet(name) {
  console.log(`こんにちは、${name}さん！`);
}

次に、別のJSファイルからgreet関数を呼び出すには、importキーワードを使います。

ただし、named exportとは異なり、任意の名前で関数をインポートできます。

// main.js
import myGreet from './utils.js';

myGreet('花子'); // 実行結果: こんにちは、花子さん！

この例では、greet関数をmyGreetという名前でインポートしています。

default exportは、1つのモジュールにつき1つしか定義できませんが、インポート時に任意の名前を付けられる点が特徴です。

○サンプルコード5：動的インポートで呼出し

ES2020(ECMAScript 2020)では、動的インポート(dynamic import)が導入されました。

動的インポートを使うと、必要なタイミングで外部JSファイルを読み込み、関数を呼び出すことができます。

例えば、ボタンをクリックしたときに外部JSファイルの関数を呼び出すには、次のように記述します。

// main.js
document.getElementById('myButton').addEventListener('click', async () => {
  const module = await import('./utils.js');
  module.greet('次郎'); // 実行結果: こんにちは、次郎さん！
});

import関数は、Promiseを返すため、awaitキーワードを使って外部JSファイルの読み込みを待ちます。

読み込みが完了すると、モジュールオブジェクトが返され、その中の関数を呼び出すことができます。

動的インポートを使うことで、ページの初期読み込み時間を短縮し、パフォーマンスを向上させることができますね。

必要なタイミングで外部JSファイルを読み込むことで、不要なリソースの読み込みを避けることができます。

●HTMLから外部JSファイルの関数を使う

JavaScriptの関数を外部ファイルに定義し、HTMLファイルから直接呼び出すこともできます。

この方法は、特にシンプルなWebサイトやアプリケーションを開発する際に便利ですね。

HTMLファイルから外部JSファイルの関数を呼び出すには、scriptタグのsrc属性で外部JSファイルを指定し、関数を呼び出すトリガーとなるイベントを設定します。

それでは、具体的なサンプルコードを見ていきましょう。

○サンプルコード6：onclickで呼び出す

まず、button要素のonclick属性を使って、クリックイベントが発生したときに外部JSファイルの関数を呼び出す方法を見てみましょう。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>外部JSファイルの関数呼び出し</title>
</head>
<body>
  <button onclick="greet('太郎')">あいさつする</button>

  <script src="utils.js"></script>
</body>
</html>
// utils.js
function greet(name) {
  alert(`こんにちは、${name}さん！`);
}

button要素のonclick属性に、greet関数を呼び出す処理を記述しています。

greet関数は、utils.jsファイルで定義されています。

scriptタグのsrc属性でutils.jsを指定することで、HTMLファイルから外部JSファイルを読み込んでいます。

このHTMLファイルをブラウザで開き、「あいさつする」ボタンをクリックすると、greet関数が呼び出され、アラートボックスに「こんにちは、太郎さん！」と表示されます。

ただ、onclick属性を使った方法は、HTMLとJavaScriptが密結合になってしまうため、あまり推奨されません。

HTMLとJavaScriptを分離し、保守性を高めるためには、addEventListenerメソッドを使うのがベターです。

○サンプルコード7：addEventListenerで呼出し

addEventListenerメソッドを使って、HTMLファイルから外部JSファイルの関数を呼び出してみましょう。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>外部JSファイルの関数呼び出し</title>
</head>
<body>
  <button id="greetButton">あいさつする</button>

  <script src="utils.js"></script>
  <script src="main.js"></script>
</body>
</html>
// utils.js
function greet(name) {
  alert(`こんにちは、${name}さん！`);
}
// main.js
document.getElementById('greetButton').addEventListener('click', function() {
  greet('花子');
});

button要素にid属性を設定し、main.jsファイルでgetElementByIdメソッドを使ってボタン要素を取得しています。

そして、addEventListenerメソッドを使ってクリックイベントを監視し、イベントが発生したときにgreet関数を呼び出しています。

greet関数は、utils.jsファイルで定義されています。

scriptタグを使って、utils.jsとmain.jsの両方のファイルを読み込んでいます。

●外部関数に引数を渡して呼び出す

JavaScriptの外部ファイルに定義した関数を呼び出す際、引数を渡すことで、関数の処理をカスタマイズできます。

引数を使うことで、関数の再利用性が高まり、より柔軟なコードを書くことができるようになりますよ。

実際のプロジェクトでは、外部関数に引数を渡して呼び出すことが頻繁に行われています。

例えば、ユーザーの入力値を外部関数に渡して処理したり、APIから取得したデータを外部関数で加工したりする際に、引数を活用します。

それでは、外部関数に引数を渡して呼び出す方法について、具体的なサンプルコードを見ていきましょう。

○サンプルコード8：データを引数で渡す

まずは、シンプルなデータを引数で渡す方法から見てみましょう。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>外部関数に引数を渡す</title>
</head>
<body>
  <button onclick="greet('太郎', 20)">あいさつする</button>

  <script src="utils.js"></script>
</body>
</html>
// utils.js
function greet(name, age) {
  alert(`こんにちは、${name}さん！${age}歳ですね。`);
}

button要素のonclick属性で、greet関数を呼び出す際に、'太郎'と20という2つの引数を渡しています。

greet関数は、utils.jsファイルで定義されており、nameとageの2つの引数を受け取ります。

このHTMLファイルをブラウザで開き、「あいさつする」ボタンをクリックすると、greet関数が呼び出され、アラートボックスに「こんにちは、太郎さん！20歳ですね。」と表示されます。

このように、外部関数に引数を渡すことで、関数の処理をカスタマイズできます。

引数には、文字列や数値だけでなく、配列やオブジェクトなども渡すことができます。

○サンプルコード9：オブジェクトを引数で渡す

外部関数に、オブジェクトを引数で渡してみましょう。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>外部関数にオブジェクトを渡す</title>
</head>
<body>
  <script src="utils.js"></script>
  <script src="main.js"></script>
</body>
</html>
// utils.js
function introduce(person) {
  alert(`私の名前は${person.name}です。${person.age}歳で、${person.occupation}をしています。`);
}
// main.js
const person = {
  name: '花子',
  age: 25,
  occupation: 'エンジニア'
};

introduce(person);

utils.jsファイルで定義したintroduce関数は、personオブジェクトを引数で受け取ります。

main.jsファイルでは、personオブジェクトを作成し、introduce関数を呼び出す際に引数として渡しています。

このHTMLファイルをブラウザで開くと、introduce関数が呼び出され、アラートボックスに「私の名前は花子です。

25歳で、エンジニアをしています。」と表示されます。

オブジェクトを引数で渡すことで、関連するデータをまとめて関数に渡すことができます。

これにより、関数の呼び出しがシンプルになり、可読性が向上します。

●よくあるエラーと対処法

JavaScriptで外部ファイルの関数を呼び出す際、エラーに遭遇することがあります。

エラーメッセージを読んでも、どこに問題があるのかわからず、頭を抱えてしまった経験はありませんか？

実際、JavaScriptの開発で発生するエラーの多くは、外部ファイルの関数呼び出しに関連しているのです。

エラーの原因を理解し、適切に対処できるようになることが、スムーズな開発にはとても重要だと思います。

それでは、JavaScriptで外部ファイルの関数を呼び出す際によく発生するエラーと、その対処法について見ていきましょう。

エラーと上手に付き合えるようになれば、開発の生産性が格段に上がるはずです。

○Uncaught ReferenceError

Uncaught ReferenceErrorは、定義されていない変数や関数を参照しようとしたときに発生するエラーです。

外部ファイルの関数を呼び出す際、関数名のタイポや、関数が定義されているファイルが正しく読み込まれていないことが原因である場合が多いです。

例えば、utils.jsファイルでgreet関数を定義しているにもかかわらず、main.jsファイルでgreet関数を呼び出す際にgreetingと関数名を間違えてしまうと、Uncaught ReferenceError: greeting is not definedというエラーが発生します。

このエラーを解決するには、次の点を確認しましょう。

  • 関数名のタイポがないか確認する
  • 関数が定義されているファイルが正しく読み込まれているか確認する
  • 関数が定義されているファイルの読み込み順序が正しいか確認する

○Uncaught TypeError

Uncaught TypeErrorは、変数や関数に対して、期待される型と異なる型の操作を行ったときに発生するエラーです。

外部ファイルの関数を呼び出す際、関数の引数の数や型が正しくない場合に、このエラーが発生することがあります。

例えば、utils.jsファイルでgreet関数を定義する際に、引数nameを期待しているにもかかわらず、main.jsファイルでgreet関数を呼び出す際に引数を渡さないと、Uncaught TypeError: Cannot read property 'length' of undefinedというエラーが発生します。

このエラーを解決するには、次の点を確認しましょう。

  • 関数の引数の数が正しいか確認する
  • 関数に渡す引数の型が正しいか確認する
  • 関数内で引数を使用する際、引数がundefinedでないか確認する

○Access to script denied

Access to script deniedは、外部JSファイルを読み込む際に、同一オリジンポリシー（Same-Origin Policy）に違反したときに発生するエラーです。

同一オリジンポリシーとは、あるオリジンのリソースが、別のオリジンのリソースにアクセスすることを制限するセキュリティ機能です。

例えば、https://example.comのページから、https://api.example.comの外部JSファイルを読み込もうとすると、同一オリジンポリシーに違反するため、Access to script deniedエラーが発生します。

このエラーを解決するには、次の方法があります。

  • 外部JSファイルを、同じオリジンに置く
  • CORS（Cross-Origin Resource Sharing）を設定し、外部オリジンからのアクセスを許可する
  • JSONP（JSON with Padding）を使用し、外部オリジンのリソースを読み込む

JavaScriptで外部ファイルの関数を呼び出す際によく発生するエラーと、その対処法について理解が深まったのではないでしょうか。

エラーメッセージをしっかりと読み、原因を特定できるようになることが大切です。

●上級テクニック

JavaScriptで外部ファイルの関数を呼び出す方法について、基本的な概念は理解できたと思います。

それでは、ここからはもう一歩踏み込んだ上級テクニックについて見ていきましょう。

実際のプロジェクトでは、コードの可読性や保守性を高めるために、さまざまな工夫が行われています。

その中でも特に重要なのが、オブジェクト指向プログラミング（OOP）の考え方を取り入れることです。

オブジェクト指向プログラミングでは、データとそれに関連する処理をまとめてクラスとして定義します。

クラスを使うことで、コードの再利用性が高まり、変更に強い設計を実現できます。

それでは、JavaScriptでクラスを外部ファイルに定義し、そのクラスを別のファイルから呼び出す方法について、サンプルコードを交えて説明していきましょう。

○サンプルコード10：クラスを外部ファイルに定義

まずは、Personクラスをperson.jsファイルに定義してみましょう。

// person.js
export default class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    console.log(`私の名前は${this.name}です。${this.age}歳です。`);
  }
}

Personクラスは、constructorメソッドでnameとageのプロパティを初期化し、introduceメソッドで自己紹介を行います。

export defaultを使ってクラスをデフォルトエクスポートしているので、他のファイルから簡単にインポートできます。

それでは、main.jsファイルからPersonクラスをインポートして、インスタンスを作成してみましょう。

// main.js
import Person from './person.js';

const taro = new Person('太郎', 20);
taro.introduce(); // 実行結果: 私の名前は太郎です。20歳です。

const hanako = new Person('花子', 25);
hanako.introduce(); // 実行結果: 私の名前は花子です。25歳です。

import文を使ってPersonクラスをインポートし、new演算子でインスタンスを作成しています。

作成したインスタンスのintroduceメソッドを呼び出すと、それぞれの自己紹介が出力されます。

このように、クラスを外部ファイルに定義することで、コードの見通しが良くなり、再利用性も高まります。

実際のプロジェクトでも、この手法を活用してコードの品質を高めていきましょう。

○より良いコード設計のポイント

JavaScriptで外部ファイルの関数を呼び出す際、より良いコード設計を心がけることが大切です。

ここでは、コード設計の重要なポイントをいくつか紹介しましょう。

第一に、関数やクラスの役割を明確にすることです。

一つの関数やクラスには、一つの責任だけを持たせるようにします。

これを「単一責任の原則（Single Responsibility Principle）」と呼びます。

関数やクラスの役割が明確になることで、コードの理解しやすさと保守性が向上します。

第二に、関数やクラスの名前を適切につけることです。

関数やクラスの名前は、その役割を明確に表すものにします。

また、一般的な命名規則に従うことで、他の開発者とのコミュニケーションがスムーズになります。

第三に、コードの重複を避けることです。

同じような処理を複数の場所で書くのではなく、関数やクラスにまとめて再利用できるようにします。

これを「DRY（Don’t Repeat Yourself）の原則」と呼びます。コードの重複を避けることで、保守性が高まり、バグの発生を防ぐことができます。

上述のポイントを意識してコードを設計することで、より品質の高いJavaScriptアプリケーションを開発できるようになります。

まとめ

JavaScriptで外部ファイルの関数を呼び出す方法について、基本的な概念から応用的なテクニックまで幅広く解説してきました。

本記事で学んだ知識を活かして、実際のプロジェクトでJavaScriptの外部ファイルと関数を有効に活用していきましょう。

コードの可読性と保守性を高め、効率的な開発を目指してください。