JavaScript

The export statement in JavaScript is used to make defined functions, variables, classes, etc., accessible from other files.

export [statement]

　export文は、モジュール化された JavaScriptコードを書く際に重要な役割を果たします。モジュール化とは、コードを複数のファイルに分割して管理することで、プロジェクトの構造を清潔に保ち、再利用性を高める技術です。export文は、特定の関数、変数、クラスなどを他のファイルからアクセスできるようにするために使用されます。

Sample

　例として、簡単なウェブページを考えてみましょう。このページでは、ユーザーがボタンをクリックすると、現在の日付を表示します。この機能を実現するために、日付を取得して表示する関数を exportする JavaScriptファイルと、その関数を利用する HTMLファイルの二つを用意します。

// 現在の日付を表示する関数をエクスポートします。
export function showCurrentDate() {
	const currentDate = new Date();
	alert(`今日の日付は ${currentDate.toLocaleDateString()} です。`);
}

　この dateModule.jsファイルでは、showCurrentDate関数を定義し、これを exportしています。この関数は現在の日付を取得し、それをアラートダイアログで表示します。

<button id="showDateButton">現在の日付を表示</button>
<script type="module">
	// JavaScript code here
</script>

import { showCurrentDate } from './dateModule.js';

window.addEventListener('DOMContentLoaded', () => {
	document.getElementById('showDateButton').addEventListener('click', showCurrentDate);
});

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

　HTMLでは、type="module"属性を持つ <script>タグを使用して、dateModule.jsから showCurrentDate関数を importしています。そして、ウェブページが読み込まれた後、ボタンがクリックされるとこの関数が実行されるようにイベントリスナーを設定しています。

　このように、exportと import文を使用することで、JavaScriptの機能をモジュール化し、コードの再利用性とメンテナンス性を高めることができます。