0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

requireとかimportとかdefault exportとかnamed exportとか

Posted at

雰囲気で書いてたため調査

require

CommonJsで策定されている仕様です。
CommonJsとは、主にNodeJs(ブラウザ外のJs)でのモジュールシステムの標準化に焦点を当てたプロジェクトとのこと。
たしかにフロントエンドのJsでrequireはあまり見たことないですね。

使い方

二通りあります

module.exports(default export)

・requireする側では任意の名前で読み込むことが可能
・module.exports自体は1ファイル内でいくつでも定義可能だが、最後のエントリが有効になる

add.js
module.exports = (a, b) => a - b;
module.exports = (a, b) => a + b; // これが有効
main.js
const add = require('add.js');
console.log(add(1, 2)); // → 3

exports(named export)

 ・requireする側に名前を強制することが可能
 ・1ファイル内で別々の名称でexportsすれば複数定義可能

calc.js
exports.add = (a, b) => a - b;
exports.devide = (a, b) => a / b;
main.js
const calc = require('calc.js');
console.log(calc.add(1, 2)); // addという名前が強制される
console.log(calc.devide(10, 2)); // devideという名前が強制される

下記のように部分的にrequireすることも可能です。

main.js
const { add } = require('calc.js');
console.log(add(1, 2));

const { add: a } = require('calc.js'); // ちなみにこうすることでaという名前で読み込める

import

ECMAScriptで策定されているESModuleという仕様です。
ECMAScriptとは、ブラウザで動くJavascript仕様の標準化プロジェクトです。
各ブラウザはECMAScriptの仕様を満たすようにJavascriptを実装します。
(あまり自信ないです。。。間違ってたらご指摘ください)

とはいえ、ESModule自体は最近のNodeJSではサポートされています。

export default(default export)

 ・CommonJsのmodule.exportに対応するもの
 ・1ファイル内に1つしか定義できない

add.js
export default (a, b) => a + b;
main.js
import add from './add';
console.log(add(1, 2)); // → 3

下記のようにimportすることも可能です

main.js
import * as add from './add';
console.log(add.default(1, 2)); // → 3

export(named export)

 ・CommonJsのexportsに対応するもの

calc.js
export const add = (a, b) => a + b;
export const devide = (a, b) => a / b;

下記のように書くことも可能です。

calc.js
const add = (a, b) => a + b;
const devide = (a, b) => a / b;

export { add, devide };
main.js
import { add, devide } from './calc';

add(1, 2);
devide(10, 2);

下記のようにすることも可能です

main.js
import * as calc from './calc';
calc.add(1, 2);

calc.devide(10, 2);

CommonJs VS ESModule

NodeJsでESModuleがサポートされたので、もう全部ESModuleで良いのでは?と思ったのですが現時点ではどちらかに全寄せするのは難しそうです。
ちゃんと調べられてないのでまた別途まとめます。。。

default export VS named export

これはnamed export一択では?と思ったけど界隈ではdefault export派もいるそう。。。
ここも別途調べてみます。

最後に、私のExpress(Typescript)はESModuleでしか書いてないなと思って確認したら、トランスパイル後のJSはCommonJSの形式になってました(なんと)
NodeJsプロジェクト全体にESModuleを適用するのもいろいろやらんといけないらしいです。
このへんもまた取り上げたいです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?