【JavaScript】「is not defined」エラーの原因と解決方法｜ReferenceError完全解説

この記事で学べること

• 「ReferenceError: X is not defined」エラーメッセージの正しい読み方
• 変数の宣言忘れ・タイポ・スコープ問題の特定と修正方法
• scriptタグの読み込み順序・defer/asyncによるエラーの原因と対策
• jQuery「$ is not defined」をはじめとするライブラリ関連エラーの解決
• ES Modules（import/export）関連のエラーパターンと修正
• Node.js環境での「document/window is not defined」への対処
• 非同期処理でのスコープ問題と解決策
• デバッグテクニックとエラーを未然に防ぐベストプラクティス
• 実務で頻出する10のパターンと即座に使える解決コード

Uncaught ReferenceError: myVariable is not defined
    at script.js:5:1

// 変数 message は宣言されていない
console.log(message);
// Uncaught ReferenceError: message is not defined

変数解決の流れ

1. コード内で変数名（例: message）が参照される
2. JavaScriptエンジンが現在のスコープで変数を探す
3. 見つからなければ外側のスコープを順番に探す（スコープチェーン）
4. グローバルスコープまで探しても見つからない場合、ReferenceErrorを投げる

注意：「X is not defined」と「X is undefined」は全く別のエラーです。前者は変数自体が存在しないことを意味し（ReferenceError）、後者は変数は存在するが値がundefinedであることを意味します。

// ReferenceError: x is not defined（変数が存在しない）
console.log(x);

// undefined（変数は存在するが値が未設定）
let y;
console.log(y); // undefined（エラーにはならない）

開発者ツールの開き方

• Windows / Linux: F12 キー、または Ctrl + Shift + I
• Mac: Cmd + Option + I
• 右クリック → 「検証」（Inspect）
• Consoleタブを開くとエラーメッセージが赤字で表示されている
• エラーメッセージの右側にあるファイル名:行番号をクリックすると、エラー箇所のソースコードにジャンプできる

Uncaught ReferenceError: userName is not defined

// 変数を宣言せずに使用
userName = "田中太郎";
console.log(userName);
// strict mode の場合: ReferenceError: userName is not defined

// const または let で宣言する
const userName = "田中太郎";
console.log(userName); // "田中太郎"

注意：strict mode（"use strict"）を使用していない場合、宣言なしの代入はグローバル変数として作成されてしまいます。これはバグの原因になるため、常にstrict modeを使うか、let/constで宣言しましょう。ESモジュールは自動的にstrict modeになります。

Uncaught ReferenceError: Username is not defined

const username = "田中太郎";

// 大文字・小文字を間違えている
console.log(Username);  // ReferenceError: Username is not defined
console.log(userName);  // ReferenceError: userName is not defined
console.log(USERNAME);  // ReferenceError: USERNAME is not defined

const username = "田中太郎";

// 宣言時と同じ名前を使う
console.log(username); // "田中太郎"

Uncaught ReferenceError: result is not defined

function calculateTotal(price, tax) {
  // result を宣言し忘れている
  result = price + (price * tax);
  return result;
}

// strict mode では ReferenceError
calculateTotal(1000, 0.1);

function calculateTotal(price, tax) {
  const result = price + (price * tax);
  return result;
}

calculateTotal(1000, 0.1); // 1100

// 以下は予約語のためエラーになる
const class = "初級";     // SyntaxError
const return = 42;       // SyntaxError
const function = "test"; // SyntaxError

// 修正: 予約語を避けた変数名を使う
const className = "初級";
const returnValue = 42;
const funcName = "test";

ポイント：VSCodeなどのエディタを使用していれば、予約語を変数名にしようとすると即座にハイライトされます。エディタの警告機能を活用しましょう。

Uncaught ReferenceError: localVar is not defined

function greet() {
  const localVar = "こんにちは";
  console.log(localVar); // OK
}

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

let localVar;

function greet() {
  localVar = "こんにちは";
}

greet();
console.log(localVar); // "こんにちは"

function greet() {
  const message = "こんにちは";
  return message;
}

const result = greet();
console.log(result); // "こんにちは"

Uncaught ReferenceError: message is not defined

const score = 85;

if (score >= 80) {
  const message = "合格です！";
}

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

const score = 85;
let message;

if (score >= 80) {
  message = "合格です！";
} else {
  message = "不合格です";
}

console.log(message); // "合格です！"

for (let i = 0; i < 5; i++) {
  const doubled = i * 2;
}

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

const results = [];

for (let i = 0; i < 5; i++) {
  results.push(i * 2);
}

console.log(results); // [0, 2, 4, 6, 8]

Uncaught ReferenceError: Cannot access ‘greeting’ before initialization

console.log(greeting); // ReferenceError: Cannot access 'greeting' before initialization
const greeting = "Hello";

var / let / const のホイスティングの違い

• var: ホイスティングされ、undefinedで初期化される → エラーにならないが意図しない動作の原因に
• let: ホイスティングされるが、TDZがあるため宣言前のアクセスはReferenceError
• const: letと同様にTDZがある。加えて、必ず初期化が必要

// var の場合: undefinedになる（エラーにはならない）
console.log(a); // undefined
var a = 10;

// let の場合: ReferenceError
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(count);     // ReferenceError: count is not defined

const SECRET_KEY = "abc123";
const API_URL = "https://api.example.com";

// moduleA.js の変数は見えない
console.log(SECRET_KEY); // ReferenceError: SECRET_KEY is not defined

// moduleA.js（export追加）
export const SECRET_KEY = "abc123";
export const API_URL = "https://api.example.com";

// moduleB.js（import追加）
import { SECRET_KEY, API_URL } from './moduleA.js';
console.log(SECRET_KEY); // "abc123"

Uncaught ReferenceError: utils is not defined

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <!-- app.js が先に読み込まれてしまう -->
  <script src="app.js"></script>
  <script src="utils.js"></script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <!-- 依存されるスクリプトを先に読み込む -->
  <script src="utils.js"></script>
  <script src="app.js"></script>
</body>
</html>

Uncaught TypeError: Cannot read properties of null (reading ‘textContent’)

<html>
<head>
  <script>
    // DOM構築前に実行される
    const title = document.getElementById("title");
    title.textContent = "Hello"; // title は null → TypeError
  </script>
</head>
<body>
  <h1 id="title">タイトル</h1>
</body>
</html>

<head>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const title = document.getElementById("title");
      title.textContent = "Hello"; // 正常に動作
    });
  </script>
</head>

<body>
  <h1 id="title">タイトル</h1>
  <!-- DOM要素の後にスクリプトを配置 -->
  <script src="app.js"></script>
</body>

<head>
  <!-- defer: DOMの解析完了後に実行される -->
  <script src="app.js" defer></script>
</head>

注意：async属性を使うと、スクリプトの実行順序が保証されません。依存関係のあるスクリプトにはdeferを使用するか、asyncは使わないようにしましょう。

<!-- async は読み込み完了順に実行されるため、順序が保証されない -->
<script src="large-library.js" async></script>
<script src="app.js" async></script>
<!-- app.js が先に読み込み完了すると、library の関数が未定義でエラーに -->

GET http://localhost/js/utlis.js 404 (Not Found)
Uncaught ReferenceError: formatDate is not defined

<!-- パスのスペルミス -->
<script src="js/utlis.js"></script>  <!-- utils.js のスペルミス -->

<!-- 相対パスの間違い -->
<script src="utils.js"></script>  <!-- 実際は js/ ディレクトリ内 -->

<!-- 修正 -->
<script src="js/utils.js"></script>

ポイント：ブラウザの開発者ツールの「Network」タブを確認すると、スクリプトファイルの読み込み状態（200 OK / 404 Not Found）を確認できます。ファイルが404になっていないか必ずチェックしましょう。

<!-- CDNから読み込み -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js"></script>

<!-- CDN失敗時のフォールバック -->
<script>
  if (typeof _ === "undefined") {
    // CDN読み込み失敗時、ローカルファイルを読み込む
    document.write('<script src="/js/vendor/lodash.min.js"><\/script>');
  }
</script>

Uncaught ReferenceError: $ is not defined

<!-- jQueryのscriptタグがない！ -->
<script>
  $("#myButton").click(function() {
    alert("クリックされました");
  });
</script>

<!-- jQueryを先に読み込む -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $("#myButton").click(function() {
    alert("クリックされました");
  });
</script>

<!-- 自分のスクリプトが先 -->
<script src="app.js"></script>
<!-- jQueryが後 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

// 方法1: jQuery を使う
jQuery("#myButton").click(function() {
  alert("クリック");
});

// 方法2: 即時実行関数で $ を使えるようにする（推奨）
(function($) {
  $("#myButton").click(function() {
    alert("クリック");
  });
})(jQuery);

// 方法3: jQuery(document).ready のコールバックで $ を受け取る
jQuery(document).ready(function($) {
  $("#myButton").click(function() {
    alert("クリック");
  });
});

Uncaught ReferenceError: React is not defined

<!-- React本体を先に読み込む -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<!-- その後にアプリケーションコード -->
<script src="app.js"></script>

// React 17以前: import が必須
import React from 'react';

// React 17以降: 新しいJSXトランスフォームを使えばimport不要
// ただし、babel/tsconfig の設定が必要

ポイント：React 17以降では、新しいJSXトランスフォーム（react-jsx）を使用すれば、import React from 'react'を省略できます。ただし、React.createElementなどを直接使う場合は引き続きimportが必要です。

Uncaught ReferenceError: Vue is not defined

<!-- Vue.js を先に読み込む -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return { message: "Hello Vue!" };
    }
  }).mount("#app");
</script>

Uncaught ReferenceError: _ is not defined

<!-- CDN読み込み → グローバルに _ が定義される -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js"></script>
<script>
  _.chunk([1, 2, 3, 4], 2); // [[1, 2], [3, 4]]
</script>

// npm install lodash 後
import _ from 'lodash';

_.chunk([1, 2, 3, 4], 2); // [[1, 2], [3, 4]]

// または必要な関数だけimport（バンドルサイズ削減）
import { chunk } from 'lodash';
chunk([1, 2, 3, 4], 2);

Uncaught ReferenceError: formatDate is not defined

export function formatDate(date) {
  return date.toLocaleDateString("ja-JP");
}

// import文が書かれていない
const today = formatDate(new Date());
// ReferenceError: formatDate is not defined

import { formatDate } from './utils.js';

const today = formatDate(new Date());
console.log(today); // "2026/3/8"

// utils.js - named export
export function formatDate(date) { ... }

// app.js - 間違い（{} がない）
import formatDate from './utils.js';
// formatDate は undefined になる（default exportがないため）

// app.js - 正しい
import { formatDate } from './utils.js';

Uncaught SyntaxError: Cannot use import statement outside a module

<!-- type="module" がない -->
<script src="app.js"></script>

<!-- type="module" を追加 -->
<script type="module" src="app.js"></script>

注意：type="module"を使うと、スクリプトは自動的にstrict modeになり、deferと同様にDOM解析後に実行されます。また、CORSの制約があるため、ローカルファイルをfile://で開くと動作しません。ローカルサーバーを使用してください。

ReferenceError: require is not defined in ES module scope

// package.json で "type": "module" が設定されている場合
// .js ファイルは ESM として扱われる

const fs = require("fs"); // ReferenceError: require is not defined

// 方法1: import を使う
import fs from 'fs';
import { readFile } from 'fs/promises';

// 方法2: createRequire で require を作る
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const pkg = require('./package.json');

// 方法3: ファイル拡張子を .cjs にする（CommonJSとして扱われる）

ReferenceError: document is not defined

// server.js（Node.js）
const title = document.getElementById("title");
// ReferenceError: document is not defined

// ブラウザ環境かどうかを判定
if (typeof document !== "undefined") {
  // ブラウザ環境でのみ実行
  const title = document.getElementById("title");
}

// npm install jsdom
import { JSDOM } from 'jsdom';

const dom = new JSDOM('<html><body><h1 id="title">Hello</h1></body></html>');
const document = dom.window.document;
const title = document.getElementById("title");
console.log(title.textContent); // "Hello"

ReferenceError: window is not defined

// エラーが出るコード
const width = window.innerWidth; // SSR時にエラー

// 修正方法1: typeof チェック
const width = typeof window !== "undefined" ? window.innerWidth : 0;

// 修正方法2: useEffect 内で実行（Reactの場合）
import { useState, useEffect } from 'react';

function MyComponent() {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    // useEffect はクライアント側でのみ実行される
    setWidth(window.innerWidth);
  }, []);

  return <div>幅: {width}px</div>;
}

// 安全にnavigatorにアクセスする
function getUserAgent() {
  if (typeof navigator !== "undefined") {
    return navigator.userAgent;
  }
  return "";
}

// モバイル判定の安全な実装
function isMobile() {
  if (typeof navigator === "undefined") return false;
  return /Android|iPhone|iPad/i.test(navigator.userAgent);
}

ReferenceError: alert is not defined

// ブラウザの alert の代わりに console.log を使用
console.log("メッセージ");

// ユーザー入力が必要な場合は readline モジュールを使用
import readline from 'readline';

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

rl.question("名前を入力してください: ", (answer) => {
  console.log(`こんにちは、${answer}さん！`);
  rl.close();
});

ブラウザ固有オブジェクトまとめ

以下のオブジェクトはブラウザ環境でのみ利用可能です。Node.jsやSSR環境で使用する場合は、必ずtypeofチェックを行いましょう。

• window / self / globalThis（ブラウザではwindowを指す）
• document / DOM API全般
• navigator / location / history
• localStorage / sessionStorage
• alert / confirm / prompt
• fetch（Node.js 18以降では利用可能）

let userData;

fetch("/api/user")
  .then(response => response.json())
  .then(data => {
    userData = data;
  });

// fetchが完了する前に実行される
console.log(userData.name); // TypeError: Cannot read properties of undefined

fetch("/api/user")
  .then(response => response.json())
  .then(data => {
    // データの処理は then の中で行う
    console.log(data.name);
    updateUI(data);
  })
  .catch(error => {
    console.error("取得失敗:", error);
  });

async function loadUser() {
  try {
    const response = await fetch("/api/user");
    const userData = await response.json();
    console.log(userData.name); // 正常にアクセス可能
    updateUI(userData);
  } catch (error) {
    console.error("取得失敗:", error);
  }
}

loadUser();

// var はブロックスコープを持たない
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 3, 3, 3（全て3になる）
  }, 1000);
}

// let はブロックスコープを持つ
for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 0, 1, 2（期待通り）
  }, 1000);
}

async function fetchData() {
  const response = await fetch("/api/data");
  return response.json();
}

// 注意: async関数は常にPromiseを返す
const data = fetchData();
console.log(data); // Promise { <pending> }（データではない！）

// トップレベルawait（ES2022、モジュール環境で利用可能）
const data = await fetchData();
console.log(data); // 実際のデータ

// または別のasync関数内で使用
async function main() {
  const data = await fetchData();
  console.log(data);
}
main();

let message = "Hello";

setTimeout(() => {
  console.log(message); // "Goodbye"（変更後の値）
}, 1000);

message = "Goodbye"; // setTimeout実行前に変更される

let message = "Hello";

// 即時実行関数で現在の値を閉じ込める
(function(currentMessage) {
  setTimeout(() => {
    console.log(currentMessage); // "Hello"
  }, 1000);
})(message);

message = "Goodbye";

// どの環境でも動作する
const global = globalThis;

// グローバル変数の設定
globalThis.myConfig = {
  apiUrl: "https://api.example.com",
  debug: true
};

// ブラウザ: window.myConfig
// Node.js: global.myConfig
// 両方: globalThis.myConfig

ReferenceError: __dirname is not defined in ES module scope

import { fileURLToPath } from 'url';
import { dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

console.log(__dirname); // 現在のディレクトリパス
console.log(__filename); // 現在のファイルパス

Uncaught ReferenceError: process is not defined

// ブラウザではprocess は存在しない
const apiKey = process.env.API_KEY;
// ReferenceError: process is not defined

// Vite の場合: import.meta.env を使用
const apiKey = import.meta.env.VITE_API_KEY;

// webpack の場合: DefinePlugin で定義
// webpack.config.js
const webpack = require("webpack");
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_KEY': JSON.stringify(process.env.API_KEY)
    })
  ]
};

// Create React App の場合: REACT_APP_ プレフィックス
const apiKey = process.env.REACT_APP_API_KEY;
// CRAのwebpack設定が自動的に置換してくれる

ポイント：環境変数をブラウザで使いたい場合は、ビルドツール（Vite, webpack, CRAなど）の仕組みを利用して、ビルド時に値を埋め込むのが一般的です。直接process.envをブラウザで参照することはできません。

// 直接参照するとエラー
if (myVar) { ... } // ReferenceError: myVar is not defined

// typeof を使えばエラーにならない
if (typeof myVar !== "undefined") {
  // myVar が定義されている場合のみ実行
  console.log(myVar);
}

// 実用例: jQueryの存在チェック
if (typeof jQuery !== "undefined") {
  jQuery("#app").show();
} else {
  console.warn("jQueryが読み込まれていません");
}

// 実用例: 環境判定
const isNode = typeof process !== "undefined" && process.versions != null;
const isBrowser = typeof window !== "undefined";

try {
  // ライブラリが読み込まれているか不明な場合
  const chart = new Chart(ctx, config);
} catch (error) {
  if (error instanceof ReferenceError) {
    console.error("Chart.jsが読み込まれていません。CDNを確認してください。");
  } else {
    throw error; // 他のエラーは再スロー
  }
}

// 方法1: window.onerror
window.onerror = function(message, source, lineno, colno, error) {
  console.error("エラー:", message);
  console.error("ファイル:", source, "行:", lineno);
  // エラーをサーバーに送信するなど
  return true; // trueでコンソールへのエラー表示を抑制
};

// 方法2: addEventListener（より詳細な情報）
window.addEventListener("error", function(event) {
  if (event.error instanceof ReferenceError) {
    console.warn("未定義の変数へのアクセス:", event.error.message);
  }
});

// 方法3: Promiseの未処理エラーもキャッチ
window.addEventListener("unhandledrejection", function(event) {
  console.error("未処理のPromise拒否:", event.reason);
});

{
  "rules": {
    "no-undef": "error",
    "no-use-before-define": "error"
  },
  "env": {
    "browser": true,
    "node": true,
    "es2022": true
  },
  "globals": {
    "jQuery": "readonly",
    "$": "readonly"
  }
}

ESLintの便利なルール

• no-undef: 未定義の変数の使用を禁止
• no-use-before-define: 宣言前の変数使用を禁止
• no-unused-vars: 未使用の変数を検出
• no-redeclare: 同じ変数の再宣言を禁止
• no-shadow: 外部スコープの変数と同名の変数宣言を禁止

デバッグ手順

1. Consoleタブ: エラーメッセージと発生場所（ファイル名:行番号）を確認
2. Sourceタブ: エラー行にブレークポイントを設定して、変数の状態を確認
3. Networkタブ: スクリプトファイルの読み込みが成功しているか（404になっていないか）確認
4. Consoleでテスト: typeof 変数名を実行して変数の存在を確認
5. Scope確認: ブレークポイントで停止中にScopeパネルで利用可能な変数を確認

// 変数の存在確認
typeof myVariable; // "undefined" なら未定義

// グローバル変数の一覧を見る
Object.keys(window).filter(key => !key.startsWith("webkit"));

// スクリプトが読み込まれているか確認
document.querySelectorAll("script").forEach(s => console.log(s.src));

// ブレークポイント: debugger文を使用
debugger; // ここで実行が停止し、DevToolsで変数を確認できる

Uncaught ReferenceError: $ is not defined

<!-- 1. jQueryを先に読み込む -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 2. その後に自分のスクリプト -->
<script src="app.js"></script>

Uncaught ReferenceError: gtag is not defined

<!-- Google tag (gtag.js) をhead内の上部に配置 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

<!-- カスタムイベントを送る場合は安全にチェック -->
<script>
  if (typeof gtag === "function") {
    gtag('event', 'click', { event_category: 'button' });
  }
</script>

ReferenceError: React is not defined

// 方法1: React をインポートする（React 17より前）
import React from 'react';

// 方法2: 新しいJSXトランスフォームを有効にする（React 17以降）
// tsconfig.json または babel設定で:
// "jsx": "react-jsx"

Uncaught ReferenceError: process is not defined

// 安全にprocess.envにアクセスする
const isProduction = typeof process !== "undefined"
  && process.env
  && process.env.NODE_ENV === "production";

Uncaught ReferenceError: module is not defined

// Node.js/CommonJS形式 → ブラウザでは使えない
module.exports = { myFunction };

// ES Modules形式に書き換え
export { myFunction };

// またはwebpack/Vite等のバンドラーでビルドする

ReferenceError: require is not defined in ES module scope, you can use import instead

// 変更前（CommonJS）
const express = require("express");

// 変更後（ESM）
import express from 'express';

ReferenceError: localStorage is not defined

// 安全なlocalStorageラッパー
function getFromStorage(key) {
  if (typeof localStorage !== "undefined") {
    return localStorage.getItem(key);
  }
  return null;
}

function saveToStorage(key, value) {
  if (typeof localStorage !== "undefined") {
    localStorage.setItem(key, value);
  }
}

ReferenceError: fetch is not defined

// 方法1: Node.js 18以降にアップグレード（fetch がビルトイン）
// node --version で確認

// 方法2: node-fetch パッケージを使用
// npm install node-fetch
import fetch from 'node-fetch';

const response = await fetch("https://api.example.com/data");
const data = await response.json();

Uncaught ReferenceError: regeneratorRuntime is not defined

// 方法1: @babel/plugin-transform-runtime を使用
// npm install -D @babel/plugin-transform-runtime
// npm install @babel/runtime

// babel.config.json:
{
  "plugins": ["@babel/plugin-transform-runtime"]
}

// 方法2: core-js をインポート
import 'core-js/stable';
import 'regenerator-runtime/runtime';

Uncaught ReferenceError: Buffer is not defined

// ブラウザではTextEncoderやUint8Arrayを使用
const encoder = new TextEncoder();
const data = encoder.encode("Hello World");

const decoder = new TextDecoder();
const text = decoder.decode(data);

// Base64 エンコード/デコード（ブラウザ）
const base64 = btoa("Hello World");
const original = atob(base64);

「is not defined」エラー解決フロー

1. エラーメッセージを確認: どの変数/関数が「not defined」なのか特定する
2. スペルチェック: 変数名にタイポ（大文字/小文字含む）がないか確認する
3. 宣言の確認: その変数は let/const/var で宣言されているか？
4. スコープの確認: 別のスコープ（関数内/ブロック内/モジュール内）で宣言されていないか？
5. 読み込み順序の確認: スクリプトの読み込み順序は正しいか？
6. Networkタブ確認: スクリプトファイルの読み込みが404になっていないか？
7. import/require確認: モジュールの場合、import文を書き忘れていないか？
8. 環境の確認: ブラウザ固有API（window/document）をNode.jsで使っていないか、その逆はないか？
9. TDZの確認: let/constを宣言前に使っていないか？
10. 非同期処理の確認: 非同期処理の完了前に変数にアクセスしていないか？

ベストプラクティス10選

1. 常に const / let で変数を宣言する（varは使わない）
2. ESLintの no-undef ルールを有効にする（実行前にエラーを検出）
3. scriptタグには defer 属性を使用する（読み込み順序の保証）
4. ES Modulesを使用する（import/exportでモジュール管理）
5. strict mode を有効にする（暗黙のグローバル変数を防止）
6. 環境固有のAPIにアクセスする前に typeof チェックする
7. 外部ライブラリの読み込み失敗に備えてフォールバックを用意する
8. TypeScriptを導入する（コンパイル時に未定義変数を検出）
9. VS Codeの IntelliSense を活用する（変数名の自動補完でタイポ防止）
10. コードレビューで変数のスコープを意識する

"use strict"; // strict mode を有効に

// 1. 常に const/let で宣言
const API_URL = "https://api.example.com";
let count = 0;

// 2. typeof で安全にチェック
if (typeof window !== "undefined") {
  // ブラウザ固有の処理
}

// 3. try-catch で保護
try {
  initLibrary();
} catch (e) {
  console.warn("ライブラリの初期化に失敗:", e.message);
}

// 4. オプショナルチェーンを活用
const value = obj?.property?.nested;

// 5. Nullish Coalescing でデフォルト値
const name = userData?.name ?? "ゲスト";