【JS番外編-2】コードが長すぎる？「import」と「export」でファイルを分割整理しよう

プログラミングをしていて、「コードが長すぎてスクロールするのが大変！」と思ったことはありませんか？
1つのファイルに全ての処理を書くと、管理が大変になり、バグの原因になります。

現代のJavaScript（ES6以降）には、ファイルを機能ごとに分けて、必要な時だけ読み込む「モジュール」という機能があります。

モジュールのイメージ

例えば、「計算機能」だけのファイルを作り、それを「メインのファイル」で使うイメージです。

• math.js：足し算や引き算の関数が入っている（部品）。
• main.js：画面操作などを行う（本体）。ここで math.js を読み込む。

書き方のルール：ExportとImport

ファイルを繋ぐには、2つのキーワードを使います。

• export（エクスポート）： 「この関数は外でも使っていいですよ」と許可する（輸出）。
• import（インポート）： 「あのファイルのあの関数を使います」と宣言する（輸入）。

手順①：部品を作る（math.js）

ただ関数を作るだけではなく、頭に export をつけます。

// math.js

// export をつけると、外から使えるようになる！
export const add = (a, b) => {
    return a + b;
};

export const tax = 1.1; // 変数もexportできる

手順②：本体で読み込む（main.js）

import { 使いたいもの } from "ファイルパス" と書きます。

// main.js

// ./math.js から add と tax を読み込む
import { add, tax } from "./math.js";

console.log( add(100, 200) ); // 300
console.log( tax );           // 1.1

HTMLでの読み込み設定（最重要！）

HTMLで読み込むのは、メインのファイル（main.js）だけでOKです。
ただし、ひとつだけ重要な属性 type="module" をつける必要があります。

<!-- type="module" がないと import が動きません！ -->
<script type="module" src="main.js"></script>

これで、ブラウザが「あ、これは新しいモジュールという仕組みを使うんだな」と理解してくれます。

⚠️ 注意：動かすには「サーバー」が必要！

ここで多くの人がつまずきます。
実はこのモジュール機能、HTMLファイルをただダブルクリックして開いても動きません。

Access to script at … from origin ‘null’ has been blocked by CORS policy…

というエラー（CORSエラー）が出ます。
これはセキュリティの制限で、「自分のPC内のファイル(file://)」同士で勝手にデータをやり取りできないようになっているためです。

解決策

PHP編で導入した「XAMPP / MAMP」、またはVS Codeの「Live Server」を使ってください。

1. htdocs フォルダの中にHTMLとJSファイルを入れる。
2. http://localhost/... というURLでアクセスする。

こうすれば「サーバー経由」になるため、モジュール機能が正常に動作します。

実践：Default Export（デフォルトエクスポート）

「このファイルからは、この機能1個だけをメインで渡したい！」という時は、export default を使います。
Reactなどの開発ではこちらがよく使われます。

部品側 (user.js)

const user = {
    name: "田中",
    age: 25
};

// 「これがメインです！」と渡す
export default user;

受け取り側 (main.js)

受け取る時は { } が不要で、好きな名前をつけられます。

// 好きな名前（myUserなど）で受け取れる
import myUser from "./user.js";

console.log(myUser.name);

まとめ

• 長いコードはファイル分割する。
• 渡す側は export、受け取る側は import。
• HTMLには type="module" をつける。
• 動かすには ローカルサーバー（localhost） が必須。

最初は「面倒だな」と思うかもしれませんが、機能ごとにファイルが分かれていると、「計算のロジックだけ直したい」という時に迷わなくて済みます。
プロの現場では「1ファイル100行以内」を目指すこともありますよ！