JavaScriptのESモジュールにおける export default（デフォルトエクスポート）の仕様として正しい説明はどれですか？

解説

正解は「1つのモジュールに export default は1つまでしか書けず、import する側は任意の名前で受け取れます」です。デフォルトエクスポートは、モジュール（ファイル単位のコードのまとまり）が主役として1つだけ公開する値を表す仕組みです。書き方と受け取り方// math.js export default function add(a, b) { return a + b; } // このモジュールの既定の値として公開 // main.js import sum from './math.js'; // 波括弧なし・名前は自由に付けられる console.log(sum(1, 2)); // 3 受け取り側の sum は、宣言側の add と一致している必要がありません。ここが名前付きエクスポート（export const add = ...）との最大の違いで、そちらは import { add } from './math.js' のように波括弧で囲み、名前を一致させる必要があります（別名にしたい場合は as を使います）。誤答の確認「export default した値は、import する側でも」から始まる説明は、名前付きエクスポートの挙動です。デフォルトエクスポートには識別子の制約がありません。「export default と名前付きエクスポートは」から始まる説明は誤りで、両者は同居できます。export default App; と export const VERSION = '1.0'; を同じファイルに書いても問題ありません。「export default で公開できるのは関数かクラスのみで」から始まる説明も誤りです。export default { a: 1 }; や export default 42; のように任意の式を渡せます。受け取り名がファイルごとにばらつく落とし穴名前を自由に付けられる利点は、裏を返すと表記ゆれの原因になります。同じモジュールが Button、Btn、MyButton と別名で import され、コード検索で追いにくくなるケースは実務でよく起きます。エディタの自動 import 補完やリネーム機能も、名前付きエクスポートに比べて追従しにくくなります。一方で、フレームワークの規約としてデフォルトエクスポートが必須な場所もあります。たとえば Next.js の app/page.tsx は、デフォルトエクスポートしたコンポーネントがそのルートのページとして扱われる決まりで、名前付きにするとページとして認識されません。// app/about/page.tsx export default function AboutPage() { // default でないとページとして認識されない return <h1>About</h1>; } こうした規約で必須になる箇所はデフォルトエクスポートを使い、自作の共通コンポーネントやユーティリティは名前付きエクスポートに寄せる、と方針を決めておくと表記ゆれを抑えられます。参考export - JavaScript | MDNFile-system conventions: page.js | Next.js