default

デフォルト（モジュール・パッケージ）

意味主要エクスポートを指定

defaultとは？

defaultキーワードは、モジュールの主要なエクスポートを指定するために使用されます。

defaultの具体的な使い方

デフォルトエクスポートとインポートの例（関数）

// greet.js
export default function() {
  return 'Hello, World!';
}

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

console.log(greet());

👇出力結果

Hello, World!

関数をデフォルトエクスポートとして公開し、別のファイルでインポートして使用しています。

デフォルトエクスポートとインポートの例（オブジェクト）

// config.js
const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
};

export default config;

// main.js
import myConfig from './config.js';

console.log(`API URL: ${myConfig.apiUrl}`);
console.log(`Timeout: ${myConfig.timeout}ms`);

👇出力結果

API URL: https://api.example.com
Timeout: 5000ms

オブジェクトをデフォルトエクスポートし、任意の名前でインポートして使用しています。

defaultに関するよくある質問

Q. defaultエクスポートの利点は？

A. モジュールの主要な機能を明確にし、インポート時に任意の名前を使用できます。また、インポート文を簡潔にできます。

Q. 複数のdefaultエクスポートは可能？

A. いいえ、1つのモジュールに1つのdefaultエクスポートのみ許可されています。複数の要素をエクスポートする場合は、名前付きエクスポートを使用してください。

Q. defaultと名前付きエクスポートの混在は？

A. 可能です。1つのdefaultエクスポートと複数の名前付きエクスポートを同じモジュールで使用できます。インポート時は別々に指定します。

defaultが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのdefaultやParcel、node_modules、yarn、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。