importとrequireの違い。【importの際の中括弧についても】

laravelとvue.jsでアプリを開発していて、基礎的なimportとrequireの違いについて気になったので、調べてみました。

この記事はその時のメモです。

前提：モジュールの読み込み方法はいくつかある。

「こちら」 の記事によれば下記の通り。

モジュールを読み込むための方法、仕様は
何種類かあり、
それぞれ書き方が違い、動く環境も違います。

そのモジュール読み込みの仕様の主要なものとして、
ESM (ECMAScript Modules)と
CJS (CommonJS Modules)があります。
※ほかにもいくつかあるが、主要なのはこの２つ

今回のテーマであるimportを使うのがESM方式で、
requireを使うのがCJS方式となります。

重要なのは、
・importを使うのがESM方式
・requireを使うのがCJS方式
って部分かな。

ちなみに、import(ESM)は非同期ロード、require(CJS)は同期ロードらしいです。

import

importは、主に下記の2つの書き方がある。

import nokakko from "./hoge.js";

import {yeskakko} from "./hoge.js";

この中括弧があるかどうかの違いは、

hoge.js

export default 'クラスとか変数とか';
export const yeskakko = '同じくクラスとか変数とか';

上記の解説が下記の通り。

export defaultで公開した値は
中括弧なしでimportできる
どんな名前でimportしてもよい
exportで公開した値は
中括弧をつけてimportする
export時の変数名でimportする
{ xxx as yyy }とすることで任意の変数名に変えることができる

ES2015のモジュール機能(import/export)に載ってました。

default

厳密ではない解説とのことですが、下記がわかりやすかったです。

「default でエクスポートした関数は自動で「default」という名前が付けられ、しかも import 時にその名前を省略できます。」

Vue の export default と import からの抜粋です。

ちなみにdefaultは1つのファイルで1回しか使うことができません。（defaultの名前が重複しちゃいますからね。）

require

require構文でモジュールを読み込む際は下記のようにする。

module.js(モジュール側)

module.exports = function() {
    console.log('Hello World!!');
}

app.js(読み込み側)

const helloWorldModule = require('./module.js');

helloWorldModule();
// 出力：Hello World!!

jsのimportとrequireの違いから抜粋です。

これでかなりモヤモヤが解消された。

おしまい。