デフォルトエクスポート vs 名前付きエクスポート
CoddyのJavaScriptジャーニー「オブジェクト指向プログラミング」セクションの一部。レッスン 10/56。
JavaScript モジュールでは、コードをエクスポートする主な方法が2つあります：named エクスポートと default エクスポートです。
名前付き Exportを使用すると、モジュールから複数の値をエクスポートできます：
// math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}名前付きエクスポートをインポートする場合は、中括弧内でまったく同じ名前を使用する必要があります。
// app.js
import { add, subtract } from './math.js';
console.log(add(5, 3)); // 8
console.log(subtract(10, 4)); // 6named インポートの名前を変更する必要がある場合は、as キーワードを使用して alias を作成します。
// app.js
import { add as sum, subtract as minus } from './math.js';
console.log(sum(5, 3)); // 8
console.log(minus(10, 4)); // 6default Exportを使用すると、モジュールから単一の主要な値をExportできます。
// user.js
const user = {
name: 'John',
age: 30
};
export default user;default exportをimportする場合、波括弧なしで任意の名前を使用できます：
// app.js
import person from './user.js';
console.log(person.name); // 'John'どちらをいつ使うか？ モジュールが複数の関連するユーティリティ（例：helper functions のコレクション）を提供する場合は、named exports を使用します。モジュールに1つの主な目的または主要な値（例：クラス、コンポーネント、設定オブジェクト）がある場合は、default export を使用します。
単一のモジュール内で、both 種類のエクスポートを組み合わせることができます。
// vehicle.js
export const wheels = 4;
export const doors = 4;
const car = {
brand: 'Toyota',
model: 'Corolla'
};
export default car;そして、それらを一緒に import します：
// app.js
import myCar, { wheels, doors } from './vehicle.js';
console.log(myCar.brand); // 'Toyota'
console.log(wheels); // 4
チャレンジ
簡単2つのファイルがあります。calculator.jsでExportを設定し、main.jsでImportを設定するのが課題です。
calculator.jsでは、calculateをdefaultとして、squareをnamedとしてExportしますmain.jsでは、both functionsを正しくImportします
テストで確認される項目：
calculateにdefault exportが使用されているsquareにnamed exportが使用されている- both importsが正しく動作する
自分で試してみよう
// TODO: 両方の関数を calculator.js からここにインポートする
// テスト
console.log(calculate(10, 5, '+')); // 15を出力するはず
console.log(square(4)); // 16を出力するはず
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
オブジェクト指向プログラミングのすべてのレッスン
自分で練習してみよう: JavaScriptオンラインコンパイラ