【入門編】モジュールスコープ – JavaScript実践ガイド

こんにちは。JavaScriptの世界へようこそ。
コードを書いていると、「あれ、さっき作った変数、どこからでも触れちゃうぞ？これで本当に大丈夫かな？」と不安になる瞬間、ありますよね。

大丈夫ですよ、その感覚はとても鋭いです。JavaScriptの世界では、昔からこの「変数の迷子」に悩まされてきた歴史があるんです。今日は、現代のJavaScript開発の守護神とも言える「モジュールスコープ」について、一緒に紐解いていきましょう。

—

モジュールスコープの話をする前に、ちょっと昔の話をさせてください。
昔のJavaScriptは、まるで「みんなの広場」でした。どのファイルで変数を書いても、すべて同じ場所に放り込まれていたんです。

例えば、Aさんが `const name = ‘田中さん’` と書くと、Bさんが同じファイルで `const name = ‘佐藤さん’` と書いた瞬間に、Aさんの名前が書き換わってしまう……そんな「名前の衝突」が日常茶飯事でした。

これ、例えるなら「自分のペンケースに名前を書かずに、教室の真ん中の机に全員の筆記用具を投げ込んでいる」ような状態です。誰がどれを使っているのか、誰の筆箱がどれなのか、もうカオスですよね。

—

そこで現代のJavaScript（ES Modulesといいます）では、ファイル一つひとつが「自分専用の鍵付きロッカー」を持つようになりました。これが「モジュールスコープ」です。

あるファイルで書いた変数は、そのファイルというロッカーの中にしまわれます。外からは絶対に見えません。外から見えないということは、他のファイルと名前が被っても喧嘩にならない。これって、すごく安心だと思いませんか？

まずは、ロッカーの中に変数を隠してみます。

// user.js というファイルの中身
const secretName = “秘密の勇者”; // この変数はこのファイルの中だけで生きる！

// 外からこの変数にアクセスしようとしても、エラーになって守られます。

もし、別のファイルで `secretName` を作っても、ロッカーが別なので全く問題ありません。お互いに干渉しない、平和な世界です。

—

ロッカーの中に隠すのはいいけれど、「どうしてもこの変数を使いたい！」という時もありますよね。そんな時は、`export` という魔法を使います。

これは、「この道具、貸してあげるから、必要な人は呼んでね」と宣言するようなものです。

ファイルA（貸し出す側）：

// mathUtils.js
// 「足し算」だけはみんなに使ってほしい！と公開する
export const add = (a, b) => {
return a + b;
};

// この変数（秘密の定数）は公開しないので、このファイル専用です
const PI = 3.14;

ファイルB（借りる側）：

// main.js
// 必要なものだけをimportで呼び出す！
import { add } from ‘./mathUtils.js’;

console.log(add(5, 3)); // 8 と表示される
// console.log(PI); // これはエラー！隠されているので見えません。

—

この仕組みの何が素晴らしいって、「責任の範囲が明確になること」なんです。

最初は「`export` とか `import` とか、いちいち面倒だな」と感じるかもしれません。でも、これはあなたが書いたコードを、未来のあなたや仲間が読みやすくするための「優しい気遣い」なんです。

—

プログラミングを始めたばかりの頃は、「なぜわざわざ隠すの？全部見えたほうが便利じゃない？」と思うのが普通です。でも、プログラムが大きくなればなるほど、この「隠す」という作業が、あなたのコードをバグから守る最強の盾になってくれます。

もし「うまく読み込めないな」と思ったら、まずは「ロッカーからちゃんと取り出しているかな？（importしているか）」「そもそもロッカーの外に許可を出しているかな？（exportしているか）」を確認してみてください。

JavaScriptのモジュールスコープは、あなたのコードを整頓する最高のお片付け術です。焦らず、少しずつ楽しんでいきましょうね。応援しています！