🥶

JavaScriptのimport exportについて

2022/04/18に公開

JavaScript

zenn初投稿です。

これまでReactで名前付きexport ,importを使用していましたが、最近Next.jsを触り始め、デフォルトexportをする箇所が出てきて混乱し始めたのでこの際にまとめておこうと思いました。

今回はこちらの記事の理解を深めるためのアウトプット記事です。この記事を訪れてしまった方は移動をおすすめします。

まず、この記事によるとECMAScriptモジュールとCommonJsモジュールでimport/exportの書き方が違うとのこと。

まず、ECMAScriptとCommonJsの確認から。

ECMAScriptとは...
ブラウザにおけるJavaScriptの仕様
Common.jsとは...
サーバーサイドなど、ウェブブラウザ環境外におけるJavaScriptの仕様
MongoDB,Node.jsはCommonJsに習っている。

このあたりちゃんと知らなかったので助かりました。。。
それで本題です。

ECMAScriptの場合

「名前付き」と「デフォルト」がある。

名前付きimport/export
(reactで関数ばかりexportしていたが、そもそも変数、クラス、オブジェクト等もexportして外部ファイルで呼び出せる。)

エクスポートする

//変数をexport!
const foo = "foo";
export {foo};

//関数をexport
export function hoge(){}

インポートする。

import {foo,hoge} from "./sample_module.js"

1つのモジュールは基本的に1つのファイルに対応させる。
モジュールとは、とある機能を持った一塊のコード群のこと。

「名前付き」の本来の意味は、exportしたい関数や変数の名前を使うということらしい。
そして、「名前付きimport/export」はエイリアス機能と言って、別名を割り当てる機能があり、これを使ってexport,import対象に自由に命名することができる。こっちが「自分で名前をつけられる」という方の意味。ニホンゴムズカシイネ。

const foo = "foo";
export { foo as aliasFoo };

import { aliasFoo as myFoo } from "./named-export-alias.js";
console.log(myFoo); // => "foo"

エイリアスは import/export の両面から使うことができる。

名前付きはここまで。

デフォルトimport/export

デフォルトエクスポートは、モジュールごとに1つしかエクスポートできない特殊なエクスポートらしい。Next.jsに出てきたやつ。だからインポートするときも{}はつけれないんだな。。。

import Head from "next/head"

こんな感じのやつ。

エクスポートする

名前はつけない。

export default {
	foo:"foo"
}

インポートする

名前をつけてやる必要がある。
理由はファイル内で使うので、それを参照できるようにしたいから。

import MyModule from "./my-module.js";
console.log(MyModule); //⇨{foo:"foo"}

以上。

CommonJsの場合

まだNode.jsをガッツリ触ったことがないので、いつか出てきた時のために。

エクスポートする
module.exportの後に続けてexportしたい関数やクラスを定義する。

module.exports = hoge() {
    console.log('これが CommonJS の export 方法です');
}

インポートする
requireの後に、読み込みたいモジュールがあるファイルのパスを指定します。
その戻り値を変数に代入し、 import したファイルの中ではその変数名を使って参照します。
せっかくだからExpressを例にしてみた。

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

参考というか、ほぼほぼ受け売りになっています。
大変勉強になりました。

あと、zennを初めて使わせてもらいましたが、初心者でもすぐに使い始めることができました。
今後アウトプットを増やしていきたいです。

ECMAScriptの場合

CommonJsの場合

Discussion