defaultキーワードを使ったスイッチ構文とモジュールエクスポートの活用をわかりやすく解説

2024.09.12
スポンサーリンク
スポンサーリンク

defaultの概要

デフォルト処理 JavaScript予約語

default

概要 defaultはJavaScriptで2つの主な目的で使用されます。スイッチ構文でのデフォルト処理とデフォルトエクスポートです。前者では、いずれのケースにも一致しない場合に実行するコードを指定し、後者ではモジュールのエクスポート時に主要なエクスポートとして指定します。

わかりやすく説明 defaultは「どれにも当てはまらない場合の処理」や「メインの機能を指定する道具」として使われます。
  • switch構文では、すべてのcaseに一致しない場合の処理を定義します。
  • モジュールのエクスポートでは、主要なエクスポートとして指定されます。

switch構文におけるdefaultの使い方

switch構文では、条件に一致しない場合の処理をdefaultで指定します。

// defaultを使用したswitch文
const fruit = "orange";

switch (fruit) {
    case "apple":
        console.log("リンゴです。");
        break;
    case "banana":
        console.log("バナナです。");
        break;
    default:
        console.log("未対応の果物です。");
        break;
}

// 出力: 未対応の果物です。
  • すべてのcaseに一致しない場合にdefaultが実行されます。
  • defaultは省略可能ですが、条件に合わない場合の処理が必要なら記述するべきです。

モジュールのデフォルトエクスポート

export defaultは、モジュールで主要な機能をエクスポートする際に使用されます。デフォルトエクスポートは、モジュールにつき1回のみ使用できます。

// greet.js
export default function greet(name) {
    return `こんにちは、${name}さん！`;
}

// main.js
import greet from "./greet.js";

console.log(greet("Alice")); // こんにちは、Aliceさん！
  • export defaultでエクスポートされた関数やクラスは、任意の名前でインポートできます。
  • 主要な機能や値をエクスポートする際に役立ちます。

defaultの応用例

条件付き処理や、モジュールをまとめる際にdefaultが活用できます。

// モジュールのまとめ
// square.js
export default function square(x) {
    return x * x;
}

// cube.js
export default function cube(x) {
    return x * x * x;
}

// main.js
import square from "./square.js";
import cube from "./cube.js";

console.log(square(3)); // 9
console.log(cube(3));   // 27
  • 複数のモジュールでデフォルトエクスポートを使用することで、明確な目的ごとにコードを分割できます。
  • インポート時にモジュールの用途に応じた名前を付けられます。

注意点

  • switch文のbreakの忘れ: defaultを含むcaseには、忘れずにbreakを記述してください。breakがないと、意図せず次の処理が実行される可能性があります。
  • 複数のデフォルトエクスポート禁止: 1つのモジュールで複数のexport defaultを定義することはできません。
  • 名前付きエクスポートとの混在: export defaultと名前付きエクスポートを併用する場合は、それぞれの用途を明確に区別してください。

よくある質問

Q: switch文でdefaultを省略することはできますか？
A: はい、defaultは省略可能ですが、条件に合わない場合の処理が必要なら明示的に記述すべきです。
Q: export defaultと名前付きエクスポートの違いは何ですか？
A: export defaultはモジュールの主要なエクスポートを1つだけ指定します。一方、名前付きエクスポートは複数のエクスポートが可能です。
Q: defaultエクスポートを名前付きエクスポートに変更するメリットは？
A: 名前付きエクスポートは、モジュールの複数の機能を同時にエクスポート・インポートする場合に適しています。

まとめ

defaultは、JavaScriptでswitch文のデフォルト処理やモジュールのデフォルトエクスポートを指定するための便利なキーワードです。

  • switch文では、どのcaseにも一致しない場合の処理を定義します。
  • モジュールでは、主要な機能をexport defaultでエクスポート可能です。
  • 適切に活用することで、条件分岐やモジュール管理を効率的に行えます。
スポンサーリンク