#036　フロントサイド（3）：JavaScriptのモジュール（インポート、エクスポート）

2024年7月26日 07:07

モジュールとは？

モジュールは、関連する機能をまとめたJavaScriptファイルです。これにより、コードが整理され、再利用しやすくなります。

エクスポート（Export）

エクスポートは、モジュール内の機能を外部から使えるようにすることです。他のファイルから利用できるようにするための宣言です。

math.jsというファイル

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

この例では、addとsubtractという2つの関数をエクスポートしています。
つまり、足し算、引き算の関数が外部でも使えるようにしています。

インポート（Import）

インポートは、他のモジュールからエクスポートされた機能を自分のファイルに取り込むことです。

main.jsというファイル

import { add, subtract } from './math.js';

console.log(add(5, 3));      // 出力: 8
console.log(subtract(10, 4)); // 出力: 6

この例では、math.jsからエクスポートされたaddとsubtract関数をインポートして使用しています。

なぜモジュールを使うのか？

コードの整理: 関連する機能をひとまとめにできます。
再利用性: 一度書いたコードを別のプロジェクトでも使えます。
名前の衝突を防ぐ: 同じ名前の関数や変数があっても、別々のモジュールなら問題ありません。
依存関係の管理: どの機能がどのファイルに依存しているかが明確になります。

モジュールを使うことで、大きなプログラムを小さな部品に分けて管理できるようになります。これは、大きなレゴの作品を作るときに、小さなブロックを組み合わせていくのに似ています。

この図は、小さなモジュール（レゴブロック）を組み合わせて大きなアプリケーション（レゴの作品）を作り上げるという概念を視覚化しています。各モジュールは独立しており、必要に応じて他のプロジェクトでも再利用できます。

実行するHTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptモジュールの例</title>
</head>
<body>
    <h1>JavaScriptモジュールのデモ</h1>
    <p>コンソールを確認してください。</p>

    <!-- main.jsをモジュールとして読み込む -->
    <script type="module" src="./main.js"></script>
</body>
</html>

終わりに

少し長くなったので、ここで一旦お話をクローズさせて頂きます。
自分自身の学習記録帳のため、乱雑な文章になっている可能性があります。
申し訳ございません。

最後までお読みいただき、ありがとうございます。
私も皆さんのnoteを拝見させて頂いて、多くの気づきを得ています。
本当に感謝🙏です。
今後ともよろしくお願いします。