【JavaScript】エクスポート(export)とインポート(import)とは

エクスポート(export)とインポート(import)とは

JavaScriptのexportとimportは、モジュールのエクスポートとインポートを行うための構文です。これらを使用することで、JavaScriptのファイルをモジュールとして定義し、他のファイルから再利用することができます。

export

exportキーワードは、モジュールから特定の要素（変数、関数、クラスなど）を渡すために使用されます。モジュールの中でexportキーワードを使用してエクスポートされた要素は、他のファイルからインポートすることができます。

// モジュールから変数をエクスポートする例
export const myVariable = 'Hello';

// モジュールから関数をエクスポートする例
export function myFunction() {
    console.log('Hello, world!');
}

// モジュールからクラスをエクスポートする例
export class MyClass {
    constructor() {
        console.log('MyClass instantiated');
    }
}

import

importキーワードは、他のモジュールからエクスポートされた要素を取り込むために使用されます。インポートされた要素は、インポートしたファイル内で使用することができます。

// 外部のモジュールから変数をインポートする例
import { myVariable } from './myModule';

// 外部のモジュールから関数をインポートする例
import { myFunction } from './myModule';

// 外部のモジュールからクラスをインポートする例
import { MyClass } from './myModule';

まとめ

JavaScriptのexportとimportを使用することで、ファイルやコードの構造を整理し、再利用性を高めることができます。これらの構文は、ES6（ECMAScript 2015）以降で導入され、モダンなJavaScriptアプリケーションの開発において広く使用されています。