12. モジュールとスコープ

JavaScript で効率的に開発を進めるためには、コードをモジュール化して、適切なスコープを意識することが非常に重要です。このセクションでは、モジュールとスコープについて学び、それぞれの概念がどのように役立つかを理解していきましょう。

12.1 モジュールとは

モジュールは、コードを再利用しやすくするために、機能を小分けにしたものです。モジュールを使うことで、コードの分離と管理が容易になります。

12.1.1 ES6 モジュールの基本

ES6（ECMAScript 2015）以降、JavaScript にはネイティブのモジュールサポートが追加されました。モジュールは export と import キーワードを使って定義および使用します。

モジュールのエクスポート

以下のように、関数や変数をエクスポートすることができます。

// mathUtils.js
export function add(x, y) {
  return x + y;
}

export const PI = 3.14159;

モジュールのインポート

エクスポートされたモジュールは、別のファイルからインポートして使用できます。

// main.js
import { add, PI } from "./mathUtils.js";

console.log(add(2, 3)); // 5
console.log(PI); // 3.14159

12.1.2 デフォルトエクスポート

デフォルトエクスポートを使うと、モジュール全体を一つのデフォルト値としてエクスポートすることができます。

// greet.js
export default function greet(name) {
  return `Hello, ${name}`;
}

デフォルトエクスポートは名前を変えてインポートできます。

// main.js
import greetFunction from "./greet.js";

console.log(greetFunction("Alice")); // Hello, Alice

12.2 スコープとは

スコープとは、変数や関数が有効である範囲のことです。JavaScript には以下の 3 種類のスコープがあります。

12.2.1 グローバルスコープ

グローバルスコープは、どこからでもアクセス可能な変数や関数が定義されるスコープです。

let globalVar = "I am global";

function showGlobalVar() {
  console.log(globalVar);
}

showGlobalVar(); // I am global

12.2.2 関数スコープ

関数スコープは、関数内で定義された変数が関数外からはアクセスできないスコープです。

function testFunctionScope() {
  let localVar = "I am local";
  console.log(localVar); // I am local
}

testFunctionScope();
console.log(localVar); // ReferenceError: localVar is not defined

12.2.3 ブロックスコープ

ブロックスコープは、{} で囲まれたブロック内でのみ有効なスコープです。let と const を使うことで、ブロックスコープを利用することができます。

{
  let blockScopedVar = "I am block scoped";
  console.log(blockScopedVar); // I am block scoped
}

console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined

12.3 実践例：モジュールとスコープの組み合わせ

最後に、モジュールとスコープの概念を組み合わせた実践例を見てみましょう。

12.3.1 ユーティリティモジュールの作成

以下の例では、数値操作と文字列操作のユーティリティモジュールを作成し、それらを利用します。

// mathUtils.js
export function add(x, y) {
  return x + y;
}

export function subtract(x, y) {
  return x - y;
}

// stringUtils.js
export function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

12.3.2 モジュールの利用

次に、これらのモジュールをインポートして使ってみましょう。

// main.js
import { add, subtract } from "./mathUtils.js";
import { capitalize } from "./stringUtils.js";

console.log(add(5, 3)); // 8
console.log(subtract(9, 4)); // 5
console.log(capitalize("hello")); // Hello

12.3.3 スコープの利用

各ユーティリティ関数内で変数が関数スコープやブロックスポールで管理されていることを理解することが重要です。これにより、意図しない変数の衝突を防ぐことができます。

// utils.js
export function add(x, y) {
  let result = x + y; // ブロックスコープ内
  return result;
}

export function capitalize(str) {
  let firstChar = str.charAt(0); // ブロックスコープ内
  return firstChar.toUpperCase() + str.slice(1);
}

このように、モジュールとスコープを活用することで、コードの効率性と可読性が向上します。適切なスコープとモジュールの管理を心がけましょう。