スライドショー

【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

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ワカツキ ヒロアキ

ワカツキ ヒロアキ

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

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説