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の違いから抜粋です。
これでかなりモヤモヤが解消された。
おしまい。
↧
