【JavaScript入門】importで外部ファイルを読み込む方法

こんにちは!エンジニアのワカツキです!

モダンなJavaScript(ES6)でよく見かける、モジュールの「import」と「export」ですが、使い方を詳しく理解していますか?

今回はES6に導入された便利なモジュールを扱う上で基本となるimportについて、わかりやすく解説していきたいと思います!

importとは

ES6では、JavaScriptオブジェクトをモジュール化して管理できます。モジュール化を行うと、機能の再利用を行えるほか、保守性を高めたり、変数名が被ってしまうのを防ぐことができます。

importは、あるモジュールでエクスポートされた、関数オブジェクトプリミティブ値を別モジュール内にインポートするために使う文法です。

以下のように記述します。

import {モジュール名} from "インポート元"

importの使いかた

モジュールにはdefaultモジュールnamed(名前付き)モジュールがあります。
これについては、次の「モジュールのexportを行う」の中で詳しく説明します。

まずは、default exportされたモジュールと、named exportされたモジュールの読み込みを行ってみましょう。

import {ModuleA, ModuleB} from "modules"; 
// ModuleAとModuleBというnamedモジュールをインポート
import Default from 'modules2'; 
// defaultモジュールとnamedモジュールを分けてインポート

1行目では、modulesというファイルから、ModuleAとModuleBという二つのnamedモジュールをインポートしています。
2行目では、modules2というファイルから、defaultモジュールをインポートしています。

以上が基本的なimportの書き方ですので、しっかりと覚えておきましょう。

モジュールのexportを行う

関数やオブジェクト、プリミティブ値をモジュールとしてエクスポートするためには、exportを使用します。

試しに、関数をdefault exportしてみましょう。

// alert.js
export default function () {
    alert("default module called!");
};

これで、デフォルトモジュールとしてエクスポートできました。

次に、named exportしてみましょう。

// utils.js
export function sum(x, y, z) {
    return x+y+z;
}

export function multiply(x, y) {
    return x*y;
}

sum、multiplyという名前のモジュールをエクスポートできました。
以下のように呼び出して、関数を利用できます。

import { sum, multiply } from 'utils'; // sumモジュールをインポート
console.log(sum(1, 2, 3));
console.log(multiply(5, 8));

実行結果:

-> 6
-> 40

importの注意点

・CommonJSとの区別
CommonJSは、主にウェブブラウザ環境外での使用を策定するためのプロジェクトです。こちらにもimportやexportを使用するモジュール機能があるので、混同しないように注意しましょう!

・複雑なモジュール構成は非推奨
Effective JavaScriptの著者・David Herman氏によると、モジュールは単一のdefaultのみでのエクスポートを推奨しており、named exportを使用する場合もなるべく簡単な構成にするべきだということです。

まとめ

いかがでしたか?
今回は、ES6のモジュール化で使われるimportexportの使い方について学習しました!

モジュール化はモダンなJavaScriptのコーディングで重要なポイントです。

今回学んだことを生かして、より良いJavaScriptのプログラムを書くように心がけましょう!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

ワカツキ ヒロアキ

ワカツキ ヒロアキ

目黒のベンチャー企業ででフルスタックエンジニアをやっています!今はWEB・スマホアプリ開発をメインに、毎日、仕事+アウトプットを目標に日々過ごしています。