JavaScript

In JavaScript, default is used to export a single value from a module or to specify the action to be taken in a switch statement when none of the cases match.

default

　JavaScriptの defaultについての説明にあたり、まずは defaultが使われる文脈を把握しましょう。主に、defaultは２つの場面で登場します。一つは、export文においてモジュールから単一の値をエクスポートする際に用いられます。もう一つは、switch文内で、どの caseにも当てはまらない場合の処理を記述する際に使用されます。ここでは、それぞれの用法について、特に Web開発において視覚的に確認できるサンプルコードと共に説明します。

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

　JavaScriptモジュールでは、ファイルごとにコードを分割し、必要な部分だけを他のファイルから利用できるようにすることができます。defaultキーワードを使用して、モジュールから１つの値をデフォルトエクスポートすることが可能です。これにより、他のファイルからこのモジュールをインポートする際に、よりシンプルな構文を使用できます。

// message.js
export default function showMessage() {
	alert("Hello, JavaScript!");
}

<button id="showMessageButton">Show Message</button>
<script type="module">
	import showMessage from './message.js';
	document.getElementById('showMessageButton').addEventListener('click', showMessage);
</script>

button {
	display: inline-block;
	padding: 1ex 2ex;
	margin: 1ex;
	font-size: larger;
	box-shadow: 0.2ex 0.2ex 0.3ex;
}

　この例では、message.jsファイルからデフォルトエクスポートされた showMessage関数を、index.htmlでインポートして使用しています。ユーザーがボタンをクリックすると、アラートでメッセージが表示されます。

switch文におけるdefault

　switch文は、複数のケースをチェックする際に用います。defaultキーワードは、どのケースにも当てはまらない場合の処理を記述するために使われます。

<p>Favorite fruit: <span id="fruit">Apple</span></p>
<script>
	// JavaScript code here
</script>

let fruit = "Orange";
switch (fruit) {
	case "Apple":
		document.getElementById('fruit').textContent = "Apple is your favorite!";
		break;
	case "Banana":
		document.getElementById('fruit').textContent = "Banana is your favorite!";
		break;
	default:
		document.getElementById('fruit').textContent = "Your favorite fruit is neither Apple nor Banana.";
		break;
}

　この例では、fruit変数の値に応じて、異なるメッセージを Webページ上に表示します。fruitが "Apple" や "Banana" 以外の値である場合、defaultケースが実行されます。