JavaScriptのモジュール構文（import,export）
JavaScriptのモジュール構文
JavaScriptのモジュール構文は、コードを整理し、再利用可能な部品に分割するために使用されます。
モジュールは、主に import と export を使用して管理します。
以下では、それらの構文と使用方法を詳しく解説します。
exportの基本構文
export は、モジュール外部に関数や変数を公開するために使用されます。
// functions.js
export function greet(name) {
return `Hello, ${name}!`;
}
export const pi = 3.14159;
このコードは、関数 greet と定数 pi を他のモジュールで使用できるようにします。
名前付きエクスポート
名前付きエクスポートでは、複数の関数や変数をエクスポートできます。
// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
このようにすると、必要なものだけを選んでインポートできます。
デフォルトエクスポート
デフォルトエクスポートは、モジュールあたり1つだけ指定可能で、名前なしでインポートできます。
// defaultExport.js
export default function () {
console.log('This is the default export.');
}
デフォルトエクスポートは特に便利ですが、名前を明示しないため読み取りづらくなる場合があります。
importの基本構文
import を使うことで、他のモジュールからエクスポートされたものを使用できます。
// app.js
import { greet, pi } from './functions.js';
console.log(greet('Alice')); // Hello, Alice!
console.log(`Pi is approximately ${pi}`);
名前付きエクスポートのインポート
名前付きエクスポートを使用する場合、エクスポートされた名前を正確に指定する必要があります。
// app.js
import { add, subtract } from './math.js';
console.log(add(3, 5)); // 8
console.log(subtract(10, 4)); // 6
デフォルトエクスポートのインポート
デフォルトエクスポートをインポートする際には任意の名前を使用できます。
// app.js
import myFunction from './defaultExport.js';
myFunction(); // This is the default export.
動的インポート
動的インポートは、必要なときにのみモジュールをロードする仕組みです。
// app.js
async function loadModule() {
const module = await import('./math.js');
console.log(module.add(1, 2)); // 3
}
loadModule();
動的インポートは、パフォーマンス向上や条件付きローディングに役立ちます。
応用例
以下に、モジュール構文を活用した例をいくつか示します。
// utils.js
export function square(x) {
return x * x;
}
export function cube(x) {
return x * x * x;
}
// app.js
import { square, cube } from './utils.js';
console.log(square(3)); // 9
console.log(cube(2)); // 8
// defaultUtil.js
export default function (x) {
return x ** 4;
}
// app.js
import fourthPower from './defaultUtil.js';
console.log(fourthPower(2)); // 16
これらの例を通じて、モジュール構文の柔軟性を理解できます。