🤯 コードがぐちゃぐちゃ？プロが絶対やるJavaScriptの「片付け術」モジュール分割（import/export）で神メンテ性を手に入れろ！

WEB制作

💀 序文：ファイル一つでコード1万行の悪夢

ボタンのクリック処理、API通信、配列のデータ加工、エラー処理…これまで学んだ知識をすべて使えば、あなたのscript.jsファイルはあっという間に長大化します。

想像してみてください。あなたは、たった一つのファイルの中で、何千行もあるコードのどこにAPIキーが書いてあるか、どこにクリックイベントの関数があるかを探し回る羽目になります。これではバグ修正も機能追加も地獄です。

プロの現場では、コードが長くなってきたら即座に**「役割ごと」にファイルを分割**し、必要な機能だけを「借りてくる」仕組みを使います。この仕組みこそが、**モジュール（Module）**です！

モジュール化をマスターすれば、あなたのコードは一気に**「管理しやすい」「再利用可能」「バグに強い」という三拍子が揃った神メンテ性**を持つようになります！

1. 📦 モジュール化とは？コードを「部品」として扱う魔法

モジュールとは、簡単に言えば「役割ごとに分かれたJavaScriptのファイル」のことです。

例えば、

  • api.js：API通信に関する関数だけ
  • dom.js：DOM操作に関する関数だけ
  • utils.js：税計算や日付変換などの共通関数だけ

とファイルを分けます。そして、api.jsで定義したfetchUserData関数を、メインのapp.jsから借りてきて（**import**して）使うのです。

モジュール化のメリット（バズる理由）

  1. 🔍 見つけやすい: 機能を探すとき、ファイル名を見れば一発でどこにあるか分かります。
  2. ♻️ 再利用性MAX: 別のプロジェクトでも、utils.jsをコピーするだけで同じ共通関数を使えます。
  3. 🛡️ 衝突回避: 各ファイルの変数名や関数名が互いに影響しないため、名前の重複によるバグを防げます。

2. 📤 外の世界に公開する魔法：export

JavaScriptのコードは、そのままでは他のファイルから見えません。他のファイルから使えるようにするには、公開したい変数や関数、クラスの前に**export**キーワードを付けます。

📌 exportの基本（名前付きエクスポート）

最も一般的に使われるのは、**名前付きエクスポート（Named Export）**です。複数の要素を同時に公開できます。

ファイル名: utils.js

JavaScript

// 関数を公開
export function calculateTax(price) {
    return price * 1.10;
}

// 定数も公開
export const API_KEY = "xxxxxxxxxxxx";

// 変数も公開
let counter = 0;
export function increment() {
    counter++;
    return counter;
}

このようにexportを付けておけば、これらの機能は外の世界からアクセス可能になります。

3. 📥 必要なものを手に入れる魔法：import

他のファイルでexportされた機能を使うには、自分のファイルで**import**キーワードを使って取り込む必要があります。

📌 importの基本（名前付きインポート）

名前付きエクスポートで公開された機能を取り込むには、波括弧 {} を使って、公開された名前と全く同じ名前で指定します。

ファイル名: app.js

JavaScript

// utils.jsから、calculateTaxとincrementだけを取り込む
import { calculateTax, increment } from './utils.js';

const taxedPrice = calculateTax(1000); // utils.jsの関数を実行！
console.log(taxedPrice); // 結果: 1100

increment(); // utils.jsのカウンターを操作

💡 注意点：ファイルパス

importする際のファイルパス（'./utils.js'）は、必ず相対パスで記述し、拡張子（.js）も省略せずに書くのが一般的です。

4. 👑 究極のモジュール化：default export

一つのファイルに、そのファイルが代表して公開したいメインの機能が一つだけある場合、**default export**を使います。

  • default exportは、一つのファイルで一つしか使えません。

📌 default export/importの構造

ファイル名: user.js (ユーザー情報を扱うメインのクラスと仮定)

JavaScript

class User {
    constructor(name) {
        this.name = name;
    }
    greet() {
        return `Hello, I'm ${this.name}`;
    }
}

// default exportはexport defaultと書く
export default User;

ファイル名: app.js

JavaScript

// default importは、波括弧{}なしで、好きな名前で取り込める！
import Person from './user.js'; // UserクラスをPersonという名前で取り込んでいる

const john = new Person('John');
console.log(john.greet());

default exportは、取り込み側が好きな名前（上記ではPerson）で受け取れるため、非常に便利です。

🚀 まとめ：あなたのコードは今日から「図書館」になる！

モジュール化は、あなたのコードを**「一本の長い巻物」から「整理された図書館」**へと進化させます。

構文種類特徴用途
export { ... }名前付き複数OK。名前を揃える必要がある。複数の共通関数や定数を公開したいとき。
export default ...デフォルト1ファイルで1つだけ。そのファイルが提供するメインの機能を公開したいとき。

Google スプレッドシートにエクスポート

これであなたは、大規模な開発現場で求められる**「コードの設計能力」**を手に入れました。明日から、あなたのコードを機能ごとに分割し、import/exportで繋ぎ合わせてみましょう！きっと、そのメンテ性の高さに感動するはずです！

タイトルとURLをコピーしました