ESLint no-use-before-defineと巻き上げ（ホイスティング）の理解

2025-05-27

ESLint の "no-use-before-define" ルールとは

"no-use-before-define" は、JavaScript コードにおいて、変数が宣言される前にその変数を使用することを禁止する ESLint のルールのことです。このルールを有効にすることで、コードの可読性を高め、予期せぬエラーを防ぐことができます。

具体例で見てみましょう

以下のコードは、"no-use-before-define" ルールに違反しています。

console.log(message); // ここで message を使用していますが、まだ宣言されていません

var message = "こんにちは";

このコードを実行すると、JavaScript エンジンはエラーを発生させる可能性があります。また、コードを読む人にとっても、message がどこで定義されているのかを追跡する必要があり、理解しづらくなります。

一方、以下のコードは "no-use-before-define" ルールに準拠しています。

var message = "こんにちは"; // message を先に宣言しています
console.log(message);

このように、変数を先に宣言することで、その変数がどこで定義されているのかが明確になり、コードの可読性が向上します。

このルールの目的

"no-use-before-define" ルールの主な目的は以下の通りです。

コードの保守性向上
変数の定義場所が明確になることで、コードの変更や理解が容易になります。
予期せぬエラーの防止
宣言前に変数を使用しようとすると、JavaScript エンジンによってはエラーが発生したり、意図しない挙動を引き起こしたりする可能性があります。
可読性の向上
変数の宣言が使用箇所よりも前にあることで、コードの流れが追いやすくなります。

設定方法

ESLint の設定ファイル（.eslintrc.js や .eslintrc.json など）の rules セクションで、"no-use-before-define" ルールを有効または無効にしたり、オプションを設定したりすることができます。

例えば、このルールを有効にするには、以下のように設定します。

{
  "rules": {
    "no-use-before-define": "error" // エラーとして報告
  }
}

または、警告として報告する場合は以下のように設定します。

{
  "rules": {
    "no-use-before-define": "warn" // 警告として報告
  }
}

例外

"no-use-before-define" ルールにはいくつかの例外があります。例えば、関数の宣言は巻き上げ（hoisting）されるため、宣言前に呼び出すことができます。しかし、関数式の場合は巻き上げられないため、宣言前に使用するとエラーになります。

// 関数の宣言（巻き上げられるため、宣言前に呼び出し可能）
greet("太郎");

function greet(name) {
  console.log(`こんにちは、${name}さん！`);
}

// 関数式（巻き上げられないため、宣言前に呼び出すとエラー）
// sayHello("花子"); // エラーが発生します

var sayHello = function(name) {
  console.log(`ハーイ、${name}!`);
};

sayHello("花子"); // これはOK

"no-use-before-define" でよくあるエラー

変数の宣言前に使用する
これが最も基本的なエラーです。var, let, const で宣言する前に変数を参照しようとすると、ESLint は "no-use-before-define" エラーまたは警告を表示します。
```
console.log(name); // エラー: 'name' は定義される前に使用されました。
var name = "一郎";
```
関数式を宣言前に呼び出す
関数宣言は巻き上げ (hoisting) されますが、関数式は巻き上げられません。したがって、関数式を定義する前に呼び出すとエラーになります。
```
greet("さくら"); // エラー: 'greet' は定義される前に使用されました。

var greet = function(name) {
  console.log(`こんにちは、${name}さん`);
};
```
ブロックスコープ内の変数
let や const で宣言された変数はブロックスコープを持ちます。外側のスコープで定義されたとしても、内側のブロックスコープで再宣言する前に使用するとエラーになります。
```
let message = "初期メッセージ";

if (true) {
  console.log(message); // エラー: 'message' は定義される前に使用されました。
  let message = "ブロック内のメッセージ";
  console.log(message);
}
```
相互参照する変数
複数の変数が互いに依存し、宣言順序によっては一方の変数が他方より前に使用されることがあります。
```
const a = b + 1; // エラー: 'b' は定義される前に使用されました。
const b = 2;
```

"no-use-before-define" のトラブルシューティング

エラーメッセージをよく読む
ESLint が表示するエラーメッセージは、問題のある行番号と変数名を具体的に示しています。まずはこのメッセージを丁寧に読み解きましょう。
変数の宣言を先頭に移動する
最も簡単な解決策は、変数の宣言をその変数が最初に使われる場所よりも前に移動することです。
```
var name = "一郎";
console.log(name); // OK
```
関数宣言を使用する
関数式を宣言前に呼び出したい場合は、関数宣言を使用することを検討してください。関数宣言は巻き上げられるため、定義前に呼び出すことができます。
```
greet("さくら"); // OK

function greet(name) {
  console.log(`こんにちは、${name}さん`);
}
```
ブロックスコープ内の変数の宣言順序を見直す
let や const を使用している場合は、ブロックスコープ内での変数の宣言順序を確認し、使用する前に宣言するように修正します。もし、外側のスコープの変数を使用したい場合は、内側のスコープで再宣言しないように注意が必要です。
```
let message = "初期メッセージ";

if (true) {
  console.log(message); // OK (外側のスコープの message を使用)
  const innerMessage = "ブロック内のメッセージ";
  console.log(innerMessage);
}
```
相互参照を解消する
相互参照している変数の場合は、依存関係を整理する必要があります。変数の初期値を undefined などに設定し、後で値を代入するなどの方法が考えられます。場合によっては、設計を見直す必要があるかもしれません。
```
let b = 2;
const a = b + 1; // OK (b が先に定義されている)
console.log(a, b);
```
ESLint の設定を調整する (最終手段)
どうしても "no-use-before-define" ルールに合わないコードがある場合、ESLint の設定でこのルールを無効にするか、特定のケースを例外として許可することができます。しかし、これはコードの可読性や保守性を損なう可能性があるため、できる限り避けるべきです。

設定ファイル (.eslintrc.js など) で、以下のようにルールを調整できます。
```
module.exports = {
  rules: {
    'no-use-before-define': 'off', // ルールを無効にする
    // または、関数のみ例外を許可する
    // 'no-use-before-define': ['error', { functions: false, classes: true, variables: true }],
  },
};
```

重要なポイント

一時的にルールを無効にする場合でも、その理由を明確にし、後で再度有効にすることを検討してください。
"no-use-before-define" エラーは、多くの場合、コードの潜在的な問題を指摘しています。可能な限りルールに従ってコードを修正することを推奨します。

変数の宣言前に使用する

エラー例

console.log(message); // エラー: 'message' は定義される前に使用されました
var message = "こんにちは";

修正例

変数の宣言を、その変数が使用される前に移動します。

var message = "こんにちは";
console.log(message); // OK

let および const の場合

var と異なり、let および const は巻き上げ (hoisting) されません。そのため、より厳密に「定義前の使用」が禁止されます。

エラー例

console.log(count); // エラー: 'count' は定義される前に使用されました
let count = 10;

console.log(PI);    // エラー: 'PI' は定義される前に使用されました
const PI = 3.14;

修正例

let および const で宣言された変数も、使用前に宣言する必要があります。

let count = 10;
console.log(count); // OK

const PI = 3.14;
console.log(PI);    // OK

ブロックスコープ内での再宣言

ブロックスコープ内で同じ名前の変数を再宣言する場合、外側のスコープの変数を内側のスコープで使用する前に再宣言するとエラーになります。

エラー例
```
let outerValue = 10;

if (true) {
  console.log(outerValue); // エラー: 'outerValue' は定義される前に使用されました
  let outerValue = 20;
  console.log(outerValue);
}
```
修正例

内側のスコープで同じ名前の変数を宣言する場合は、そのスコープ内で使用する前に宣言します。外側のスコープの変数を使用したい場合は、再宣言しないようにします。
```
let outerValue = 10;

if (true) {
  console.log(outerValue); // OK (外側の outerValue を使用)
  let innerValue = 20;
  console.log(innerValue); // OK (内側の innerValue を使用)
}
```

関数式

関数式は、変数への代入として定義されるため、変数の巻き上げと同様のルールが適用されます。

エラー例

sayHello("太郎"); // エラー: 'sayHello' は定義される前に使用されました

var sayHello = function(name) {
  console.log(`こんにちは、${name}さん！`);
};

修正例

関数式を使用する前に、その関数が代入された変数を宣言します。

var sayHello = function(name) {
  console.log(`こんにちは、${name}さん！`);
};

sayHello("太郎"); // OK

関数宣言 (巻き上げの例)

関数宣言は巻き上げられるため、定義前に呼び出すことができます。これは "no-use-before-define" ルールのデフォルトの挙動ではエラーになりません。
```
greet("花子"); // OK (関数宣言は巻き上げられる)

function greet(name) {
  console.log(`ようこそ、${name}さん！`);
}
```
ただし、ESLint の設定によっては、関数宣言に対しても "no-use-before-define" を適用することができます。
```
// .eslintrc.js の設定例
module.exports = {
  rules: {
    'no-use-before-define': ['error', { functions: true, classes: true, variables: true }]
  }
};
```
この設定の場合、上記の greet 関数の呼び出しはエラーになります。

クラス

クラスも巻き上げられませんが、クラス式と同様に、定義前に使用するとエラーになります。

エラー例

const myCar = new Car("赤"); // エラー: 'Car' は定義される前に使用されました

class Car {
  constructor(color) {
    this.color = color;
  }
}

修正例

クラスを使用する前に、そのクラスを定義します。

class Car {
  constructor(color) {
    this.color = color;
  }
}

const myCar = new Car("赤"); // OK

"no-use-before-define" に抵触しにくいコーディングパターン

関数宣言を優先する
関数式ではなく関数宣言を使用することで、巻き上げ (hoisting) により定義前にその関数を呼び出すことが可能になります。ただし、ESLint の設定で関数宣言に対しても "no-use-before-define" を有効にしている場合はこの限りではありません。
```
// 関数宣言（巻き上げられる）
function greet(name) {
  console.log(`こんにちは、${name}さん！`);
}

greet("ゆみ"); // 定義前に呼び出し可能
```

モジュールやクラスの構造を活用する
ES Modules (import/export) やクラスを使用することで、コードの依存関係が明確になり、変数のスコープも管理しやすくなります。これにより、異なるモジュールやクラス間で意図しない変数の事前使用を防ぐことができます。

// moduleA.js
export const message = "こんにちは";

// moduleB.js
import { message } from './moduleA.js';
console.log(message); // moduleA.js で export された message を使用

class Logger {
  log(message) {
    this.printTimestamp(message); // クラス内のメソッドを呼び出す
  }

  printTimestamp(msg) {
    console.log(`${new Date().toISOString()} - ${msg}`);
  }
}

const logger = new Logger();
logger.log("ログメッセージ");

意図的な事前使用を明確にするためのパターン (注意が必要)

以下の方法は、"no-use-before-define" ルールを意識的に回避する、あるいは特定の状況下で許容される場合がありますが、コードの可読性を損なう可能性もあるため、慎重に使用する必要があります。

後で値を代入することを明示する
変数を最初に undefined や null で宣言し、後で値を代入することで、変数が存在することは事前に示唆できます。ただし、型推論が難しくなるなどのデメリットもあります。
```
let config = undefined;

function initializeConfig() {
  config = { apiKey: 'your_api_key' };
}

initializeConfig();
console.log(config.apiKey);
```
循環参照を扱うための工夫
相互に依存する変数や関数が存在する場合、即時実行関数式 (IIFE) や遅延評価などのテクニックを使って、定義順序の問題を回避することがあります。しかし、これは複雑なコードになりがちです。
```
let a;
let b;

a = function() {
  return b ? b() + 1 : 1;
};

b = function() {
  return a ? a() * 2 : 2;
};

console.log(a()); // 相互参照が可能になる
console.log(b());
```

ESLint の設定による調整

"no-use-before-define" ルール自体を完全に無効にする ('off') ことは、コードの品質を低下させる可能性があるため推奨されません。しかし、ルールのオプションを調整することで、特定の状況下でのエラーを抑制できます。

// .eslintrc.js の設定例
module.exports = {
  rules: {
    'no-use-before-define': ['error', { functions: false, classes: true, variables: true }]
    // 関数宣言は許可し、クラスと変数は定義前に使用するとエラーにする
  }
};

重要な考慮事項

ESLint の設定を安易に変更するのではなく、なぜそのルールに抵触するコードになっているのかを理解し、可能な限りコードの構造を見直すことが重要です。
原則として、変数は使用する前に宣言するという基本的なルールを守ることが、最も理解しやすく、エラーの少ないコードにつながります。
これらの代替方法は、"no-use-before-define" ルールのエラーを回避するためのテクニックですが、コードの可読性や保守性を損なわないように注意深く使用する必要があります。