【Node.js入門】初心者でも分かるimport / exportでモジュールを使う方法まとめ!

今回は、import / exportを利用してモジュールを作成・読み込む方法について学習をしていきましょう!

「そもそもimport / exportって何?」
「import / exportの基本的な使い方を知りたい」
「requireと何が違うの?」

このような内容も含めて、本記事では以下のような構成で解説していきます!

【基礎】「import / export」とは?
【基礎】「import / export」の使い方
【実践】requireとの違い

この記事で、import / exportをしっかり学習してスキルアップを目指していきましょう!

「import/export」とは?

Node.jsには以前から「module.exports」を使ってプログラムをモジュール化して「require」で読み込むという手法が備わっています。

これをもっと効率よく簡単に記述できるのがimport / exportの醍醐味と言えるでしょう。

ただし、2019年2月現在においてはまだ実験的な機能なので実行する際には少しコツが必要となります。
(一般的にはトランスパイルさせて使う方が多いでしょう)

本記事では、このあたりも含めて基本的な使い方から詳しく見ていきましょう!

「import/export」の使い方

この章では、「import / export」の基本的な使い方を見ていきましょう!

主に、import / exportによるプログラムの作り方と実行方法について学んでいきます。

exportによるモジュールの作り方

それでは、まず最初にexportを使ってモジュールを作成していきましょう!

使い方は簡単で、モジュール化をして他のプログラムから使いたい変数や関数・オブジェクトなどをexportを使って記述するだけです。

次のサンプル例を見てください!

export const myname = 'taro';
export const items = [3,2,5,6,8,4];
export const user = {name: '太郎', age: 30};

export function myfunc() { console.log('exportから出力') };

この例では、文字列・配列・オブジェクト・関数など複数の値に対してexportを使って記述したモジュールになります。

このモジュールを他のプログラムから読み込むだけで、これらの配列や関数などを利用することができるわけです。

また、exportには「default」を付与してモジュール化する方法もあります。

こちらは1つのモジュールに対して1つだけしか作成できません。

export default function() { console.log('export defaultから出力') }

この例では、関数をモジュール化していますが関数名を付けていない点に注目してください。

「default」のexportでは名前を付けない関数や配列・オブジェクトなどをモジュール化することになります。

//配列の場合
export default [3,6,7,9,4];

//オブジェクトの場合
export default [3,6,7,9,4];

ちなみに、これらの作成したファイルは拡張子を「.js」ではなく「.mjs」にしておきましょう。

importによるモジュールの読み込み方

次に、作成したモジュールをimportで読み込む方法について見ていきましょう!

前章で名前を付けて変数や関数などをexportした場合は次のように記述します。

import {変数名・関数名} from モジュールファイルのパス

importに続けて{ }の中にexportを付けて定義した変数名や関数名を記述して、モジュール化したファイルのパスを指定します。

例えば、「myname」「items」「myfunc」という変数・関数を読み込む場合は次のようになります。

import {myname, items, myfunc} from './mymodule.mjs';

myfunc();
console.log(myname, items);

また、例えば「myname」という名前を任意の名称に変更して読み込むことも可能です。

import {myname as myuser} from './mymodule.mjs';

console.log(myuser);

「as」に続けて任意の名称を設定することで、以降はその名前を利用できるようになるわけです。

次に、「default」を付与したモジュールを読み込む場合は次のように記述します。

import name from './mymodule.mjs';

name();

基本的にはこれまでと同じですが、{ }は付けずに任意の名称をimportに続けて設定します。

上記の例は無名関数に「default」を付与してexportしているので、「name」という名称で読み込んだら以降は「name()」と記述することで実行できます。

ちなみに、importを使ったファイルも拡張子は「.js」ではなく「.mjs」にしておくのを忘れないようにしましょう。

nodeコマンドで実行する方法

import / exportの基本を学んだところで、実際の実行方法についても合わせて見ていきましょう!

一般的なNode.jsの実行方法だと次のように記述しますよね?

$ node myimport.mjs

しかし、このままだとエラーになります。

冒頭でも少し解説しましたが、import / exportはまだ試験的な段階なので専用のオプションを付与する必要があるのです。

正しくは、「--experimental-modules」のオプションを付与して実行します。

$ node --experimental-modules myimport.mjs

これで正常に実行されます

注意点としてオプションはファイル名よりも先に設定しなければ機能しないという点を覚えておきましょう!

「require」との違い

この章では、従来から利用できる「require」との違いについて見ていきましょう!

主に、import / exportとの書き方の違いについて学んでいきます。

「require」と「import/export」を比較してみる

これまで、「export」を使って作成したモジュールを「import」で読み込んできました。

これに対して、「module.exports」または「exports」を使って作成したモジュールを「require」で読み込むのが従来の方法になります。

どちらも基本的には同じことが可能です。

例えば、オブジェクトをモジュール化する場合は次のようになります。

//従来の場合
module.exports = {name: '太郎', age: 30}

//今回の場合
export const obj = {name: '太郎', age: 30}

これらのモジュールに対して読み込む場合は次のとおりです!

//従来の場合
const obj = require('./mymodule.js');

//今回の場合
import {obj} from './mymodule.mjs';

あとはファイル名の拡張子や実行する時のオプション付与などに気を付けておく必要があるでしょう。

ちなみに、従来のmodule.exportsやrequireの基本的な使い方や活用方法については次の記事で詳しく解説しているので参考にしてみてください!

【Node.js入門】exports / module.exportsによるモジュール機能の使い方まとめ!
更新日 : 2018年11月19日

まとめ

今回は、Node.jsでモジュールの作成・読み込みを効率化するimport / exportについて学習をしました!

最後に、もう一度ポイントをおさらいしておきましょう!

・exportでは名前を付与する方法とdefaultで付与しない方法がある
・import / exportを使う場合はファイルの拡張子を「.mjs」にする
・nodeコマンドで実行する際はオプションを付与する

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

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

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

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

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

cta_under_bnr

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

書いた人

マサト

マサト

フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。
30歳を過ぎてから独学でJavaScript, Node.js, Linuxを習得した経験を活かし、初心者が迷わない記事作成を意識しながらプログラミングの楽しさを知ってもらうために活動しています。趣味はキャンプと登山です。

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー