Zenn
👏

ExportとImport

2024/02/04に公開
JavaScript
tech

はじめに

ExportとImportは、モジュールシステムを使用するためのキーワードです。
これらは、JavaScriptコードをモジュールに分割し、再利用可能なコードを作成するために使用されます。

Export

モジュール内で定義された変数、関数、クラスなどを外部のモジュールで利用可能にするために使用します。

使用例
1.先頭にexportを記載する方法

export const hello = () => {
  console.log("hello!");
};

helloという関数が外部から呼び出し可能になりました。

2.クラスで指定したものを後で記述する方法

class User {
  constructor(name) {
    this.name = name;
  }
}

export { User }

このコードでは、User というクラスを定義し、その後に export { User }; を使ってモジュールから User クラスをエクスポートしています。

3.デフォルトエクスポート

const funcB = () => {
  console.log("funcB output");
};

export default funcB;

モジュール内で export default を使用することで、モジュールごとにデフォルトエクスポートを行うことができます。これに対応して、import で {} を使わずにデフォルトエクスポートを受け取ることができます。

Import

Importは、他のモジュールで定義された変数、関数、クラスなどを自分のモジュール内で利用するために使用します。

使用例

import functionB, { hello, User } from "./module.js";

デフォルトで指定されたものは{}で囲わなくても外部から引っ張ってくることができます。

Discussion