Javascriptのrequireとimport/exportの違いを整理します

いままでなんとなく使っていたけど、主に自分のために整理します。

他のブログでもまとめられているんですが、以下のような違いがあります。

require構文

• もともとはファイルモジュール読込機能に乏しかったJSに対して、CommonJSが仕様策定した。
• その後Node.jsがCommonJSの仕様をゴリッと拡張し、これが有名になり、これがCommonJSと言われるようになった。
• なのでNode.js ならそのまま使用できる。
• ブラウザで実行するなら、Babel, Webpackなどによるトランスパイルが必要。
• module.exports (省略して exports ) が全オブジェクト間で共有される。

import/export文

• ES2015で取り込まれた仕様
• 実行するなら、Babel, Webpackなどによるトランスパイルが必要。

require 構文の例

sub.js

exports.test = function(){
  console.log('sub') 
}

sub2.js

module.exports = function(){
  console.log('sub2')
}

main.js(呼び出し側)

const sub = require('./sub')
sub.test()

const sub2 = require('./sub2')
sub2()

import/export文の例

book.js

export default 'default book';
export const book1 = 'Programing C';
export const book2 = 'Programing Java';

import Book, from './book'; //defaultが読み込まれる
import { book1, book2 } from './Book';

どっちを使うべき？

基本的にはES2015で定義されたimport/export を使うべきだと思います。

ただしNode.jsのコードで既存のコードの多くが require構文で記述される場合は、統一感の観点で合わせるもの良いと思います。

余談

JavaScriptはブラウザで動かすにはてっとり早く、またクライアントサイド/サーバサイド両方を書けるかなり柔軟な言語である一方、これらのモジュール読み込み手法が混在してしまっているのは、歴史の長さゆえの負債だなぁと感じます。

いまからJavaScriptをイチから学ぶ人って、何がなんだかわからなくなると思うんですよね。そういう意味では、比較的まだ歴史の浅い言語から習得するのもアリかなと思いました(とは言え新しすぎると淘汰されるので、いいバランスを探すとGoとか..?)