【React】モジュール[ES2015] import/export をちゃんと理解する

モジュール [ES2015]import/export

export defaultって何？？、なんでこのimportはimport {App} from './src/App.js'って書くのに、こっちはimport hoge from './src/App.js'なの？とか不思議に思ったことはありませんか？ （私はあります😒 ）

みんな大好きReactを書く時に、いつも書いているimport exportをちゃんと理解してちゃんと使うべきなので、メモとして残します。

ES2015で登場したJavaScriptのモジュールの機能により、外部のリソースをインポートして利用できるようになりました。
（念のためですが、モジュールはReactの機能ではありません）

インポートを利用する前提として、別ファイルで利用したい変数や関数などをあらかじめエクスポートしておく必要があります。
モジュールの機能により、便利な変数や関数を再利用できる、モジュールごとにスコープがあることでグローバル変数名に対して上書きしてしまうリスクを回避できるなど、コードの保守性が高まリます。

Reactでは、モジュールのエクスポートとインポート機能を利用してコンポーネント間における変数や関数のやりとりをします。

エクスポートとインポートには名前付きとデフォルトがあります。

名前付きexportとimport

名前付きエクスポートとインポートについて見ていきましょう。

名前付きexport

別ファイルからアクセスできるようにするため、名前を付けて作成した変数や関数を名前付きエクスポートします。

// 変数 sampleVariable を 宣言
const sampleVariable = "sampleVariable"

// 関数 sampleFunc を 宣言
const sampleFunc = () => console.log('Hello,React!');

// 作成した変数や関数をエクスポートすることで、別ファイルにてインポートできるようになる
export {sampleVariable, sampleFunc}

名前付きエクスポートでは、作成した変数や関数の前にexportを付けることで、作成時の宣言と同時にエクスポートすることもできます。

// 変数 sampleVariable を 宣言と同時にエクスポート
export const sampleVariable = "sampleVariable"

// 関数 sampleFunc を 宣言と同時にエクスポート
export const sampleFunc = () => console.log('Hello, Vue.js!');

名前付きimport

次に名前付きエクスポートされた関数や変数を、名前付きインポートします。

namedExportModule.jsからエクスポートされている変数sampleVariableと関数sampleFuncをインポートするには次のように記述します。

import { sampleVariable, sampleFunc } from "./namedExportModule.js";

// 呼び出し
console.log(sampleVariable); // sampleVariable
console.log(sampleFunc); // sampleFunc() {}
console.log(sampleFunc()); // Hello,React!

名前付きexportとimportのエイリアス

エイリアスの仕組みを利用することで、宣言済の変数や関数に宣言時と異なる名前を指定してインポートすることができます。エイリアスを付けるためにはasの後に別の名前を指定します。

namedExportModule.jsからエクスポートされている変数sampleVariableをmyVariable、sampleFuncをmyFuncという名前でインポートするには次のように記述します。

import {
  sampleVariable as myVariable,
  sampleFunc as myFunc
} from "./namedExportModule.js";

// 呼び出し
console.log(myVariable); // sampleVariable
console.log(myFunc); // sampleFunc() {}
console.log(myFunc()); // Hello,React!

名前つきエクスポートをmyModuleオブジェクトとしてまとめてインポートすることもできます。namedExportModule.jsから、MyModuleという名前でインポート、myModule.sampleVariable、myModule.sampleFuncと書いて呼び出します。

// 名前つきエクスポートをmyModuleオブジェクトとしてまとめてインポート
// import の後の {} は不要
import * as myModule from "./namedExportModule.js";

// 呼び出し
console.log(myModule.sampleVariable); // sampleVariable
console.log(myModule.sampleFunc); // sampleFunc() {}
console.log(myModule.sampleFunc()); // Hello,React!

デフォルトexportとimport

デフォルトエクスポートとインポートについて見ていきましょう。

デフォルトexport

デフォルトエクスポートは、モジュールごとに1つだけエクスポートできる特殊なエクスポートです。

次のコード例では、関数の作成と同時にデフォルトエクスポートしています。

// defaultエクスポートは、モジュールごとに1つだけエクスポートできる
export default function App(){
  console.log("Hello,React!");
}

export defaultは、ファイルごとに1つだけエクスポートするため、インポートする側も何をインポートすればよいか明確です。そのため関数の作成と同時にデフォルトエクスポートする場合、関数名は省略可能です。

// defaultエクスポートは、モジュールごとに1つだけエクスポートできる
// 関数名は省略できる
export default function () {
  console.log("Hello,React!");
}

複数の変数を同時に作成できる変数については、変数宣言と同時にデフォルトエクスポートすることはできないので注意しましょう。

デフォルトimport

名前付きインポートの場合にはimportの後に{}が必要ですが、デフォルトインポートの場合には不要です。

また名前付きエクスポートの場合、指定したモジュールから同じ変数名や関数名を指定してインポートしますが、デフォルトエクスポートの場合、任意の名前をつけてインポートします。

// デフォルトエクスポートされたモジュールをインポートする場合、import {App} ではなく import App
// App は任意の名前
import App from './defaultExportModule.js'

console.log(App) // App() {}
console.log(App()) // Hello,React!

再エクスポート

再エクスポートとは、1度インポートしたモジュールを別ファイルが利用できるようにエクスポートし直すことです。export ... from ...構文を利用して、インポートした直後にエクスポートできます。

再エクスポートは、複数のモジュールからエクスポートされたものをまとめたモジュールを作るときなどに利用されます。

// namedExportModule.js から sampleVariable と sampleFunc をインポートした直後に再エクスポート
export { sampleVariable, sampleFunc } from "./namedExportModule.js";

// namedExportModule.js から sampleVariable を myVariable、 sampleFunc を myFunc としてインポートした直後に再エクスポート
export {
  sampleVariable as myVariable,
  sampleFunc as myFunc
} from "./namedExportModule.js";

// 名前つきエクスポートを myModule オブジェクトとしてまとめてインポート
import * as myModule from "./namedExportModule.js";
// myModule オブジェクトを再エクスポート
export {myModule}

// 上記の2行を1行で記述できるようになった[ES2020]
// myModule オブジェクトを再エクスポート
export * as myModule from "./namedExportModule.js";

HTMLファイルからモジュールを呼び出す

HTMLファイルからモジュールを利用しているJavaScriptファイルを呼び出す場合、type="module" 属性が必要です。

html :index.html
<script type="module" src="./modules/importModule.js"></script>


JavaScriptの基本をしっかり固めて、ますます楽しいReactライフを!!😍

参考サイト:
- JavaScript Primer
- MDN Web Dogs