JavaScriptで変数の値が「勝手に」変わる？思わぬ副作用の原因と対策を徹底解説💻

はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptで開発を行う中で「あれ？この変数の値、いつの間にか変わってるぞ？」と頭を抱えた経験のある方を対象にしています。特に、意図しない変数の変更によって発生するバグの特定に時間がかかっている方や、JavaScriptの変数の挙動についてより深く理解したいと考えている方に役立つでしょう。

この記事を読むことで、JavaScriptにおける変数の参照と値の挙動、そして変数の値が「勝手に」変わるように見える主な原因（参照渡し、スコープ、クロージャ、非同期処理など）を具体的に理解できるようになります。さらに、これらの問題に遭遇した際のデバッグ方法から、将来的な発生を防ぐための予防策までを習得し、より堅牢なJavaScriptコードを書くための実践的な知識が得られます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

• JavaScriptの基本的な文法と構文
• 変数宣言 (var, let, const) の違い
• 関数とスコープの基本的な概念

JavaScriptで変数が「勝手に」変わる？その現象と背景

JavaScriptでプログラムを書いていて、特定の変数の値が自分が変更した覚えのないタイミングで変わっている、という経験はありませんか？多くの場合、これは「勝手に変わった」のではなく、JavaScriptの特定の性質や、私たちのコードの書き方によって意図せず変更されてしまった結果です。この現象は、特に複雑なアプリケーションや大規模なプロジェクトでデバッグを困難にし、予期せぬバグの温床となることがあります。

なぜこのようなことが起こるのでしょうか？その背景には、JavaScriptがデータを扱う際の特性が深く関わっています。JavaScriptのデータ型は大きく「プリミティブ型」と「オブジェクト型」に分けられます。

• プリミティブ型 (Primitive Type): number, string, boolean, null, undefined, symbol, bigint など。これらは変数に「値そのもの」が直接格納されます。
• オブジェクト型 (Object Type): object (オブジェクト、配列、関数など)。これらは変数に「値が格納されているメモリ上のアドレス（参照）」が格納されます。

この「参照」の概念が、変数が「勝手に」変わるように見える現象の主な原因の一つとなります。特にオブジェクト型を扱う際に、ある変数に代入したオブジェクトが、別の場所でその参照を共有しているために、片方を変更するともう片方も影響を受けてしまう、という事態が発生するのです。このセクションでは、このような混乱がなぜ起こるのか、その根本的な背景を深掘りしていきます。

変数の意図しない変更、その犯人を特定せよ！主な原因と対策

変数の値が意図せず変更される原因は多岐にわたりますが、主に以下のパターンが挙げられます。それぞれの原因と、具体的な対策、そして役立つデバッグ方法を詳しく見ていきましょう。

1. 参照渡しによるオブジェクトの副作用

JavaScriptでは、オブジェクト（配列、関数も含む）を変数に代入したり、関数の引数として渡したりする場合、「値そのもの」ではなく「そのオブジェクトがメモリ上のどこにあるかという参照（ポインタのようなもの）」が渡されます。これを「参照渡し」と呼びます。

問題の例

Javascript

// 例1: 変数同士の代入
const originalObject = { name: "Alice", age: 30 };
const copiedObject = originalObject; // 参照がコピーされる

copiedObject.age = 31; // copiedObjectを変更すると...

console.log(originalObject.age); // => 31 (originalObjectも変更されている！)

// 例2: 関数への引数渡し
function updatePerson(person) {
  person.age += 1; // 引数として渡されたオブジェクトのプロパティを変更
}

const personData = { name: "Bob", age: 25 };
updatePerson(personData);

console.log(personData.age); // => 26 (関数内で元のオブジェクトが変更されている！)

解決策

元のオブジェクトに影響を与えずにオブジェクトを変更するには、新しいオブジェクトを作成し、そこにプロパティをコピーする必要があります。これを「コピー」と呼びます。

• シャローコピー (浅いコピー): オブジェクトの第一階層のプロパティのみをコピーします。ネストされたオブジェクトがある場合、そのネストされたオブジェクトは参照渡しになります。

  • スプレッド構文 (...) の利用: ```javascript const originalObject = { name: "Alice", age: 30, address: { city: "Tokyo" } }; const newObject = { ...originalObject }; // シャローコピー

    newObject.age = 31; newObject.address.city = "Osaka"; // ネストされたオブジェクトは参照が共有される

    console.log(originalObject.age); // => 30 console.log(originalObject.address.city); // => Osaka (参照が共有されているため変更される) * `Object.assign()` の利用:javascript const originalObject = { name: "Alice", age: 30 }; const newObject = Object.assign({}, originalObject); // シャローコピー

    newObject.age = 31; console.log(originalObject.age); // => 30 ```

• ディープコピー (深いコピー): オブジェクトの全ての階層のプロパティを再帰的にコピーします。ネストされたオブジェクトも新しい参照として作成されます。

  • JSON.parse(JSON.stringify()) の利用 (簡易的で注意が必要):

    • 関数、undefined、Symbol、BigInt、Dateオブジェクトなどは正しくコピーされません。
    • 循環参照がある場合はエラーになります。 ```javascript const originalObject = { name: "Alice", age: 30, address: { city: "Tokyo" } }; const deepCopiedObject = JSON.parse(JSON.stringify(originalObject)); // ディープコピー

    deepCopiedObject.age = 31; deepCopiedObject.address.city = "Osaka";

    console.log(originalObject.age); // => 30 console.log(originalObject.address.city); // => Tokyo (元のオブジェクトは変更されていない) `` * **ライブラリの利用 (Lodashの_.cloneDeep` など):** 複雑なオブジェクト構造を扱う場合は、専用のライブラリを使用するのが最も安全で確実です。

2. スコープとクロージャの誤解

JavaScriptの変数の有効範囲（スコープ）や、クロージャの挙動を誤解していると、意図しない変数の変更を引き起こすことがあります。

問題の例

Javascript

// 例1: varによるグローバルスコープ汚染、または関数スコープの誤解
for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 常に '3' が出力される (ループが完了した時点のiを参照するため)
  }, 100);
}

// 例2: クロージャにおける外部変数のキャプチャ
function createCounter() {
  let count = 0; // このcountはcreateCounterが呼び出されたときに一度だけ定義される
  return function() {
    count++; // 外部スコープのcountを参照・変更
    console.log(count);
  };
}

const counter1 = createCounter();
const counter2 = createCounter();

counter1(); // => 1
counter1(); // => 2
counter2(); // => 1 (counter1とは別のcount変数を参照している)

解決策

• let と const の積極的な利用: var は関数スコープまたはグローバルスコープを持ち、巻き上げ (hoisting) の特性も相まって予期せぬ挙動を生み出しやすいです。 let と const はブロックスコープを持つため、変数の有効範囲をより限定し、意図しない変更のリスクを減らします。 javascript for (let i = 0; i < 3; i++) { // letを使用 setTimeout(() => { console.log(i); // => 0, 1, 2 と順番に出力される (各ループイテレーションで新しいiが作られるため) }, 100); }
• IIFE (即時実行関数) の利用 (旧来の var 環境でスコープを閉じたい場合): javascript for (var i = 0; i < 3; i++) { (function(j) { // IIFEでjを定義し、iの値をその時点の値でキャプチャ setTimeout(() => { console.log(j); // => 0, 1, 2 }, 100); })(i); }
• クロージャの理解: クロージャは「関数が、その関数が定義されたスコープ（環境）を記憶している」という強力な機能です。外部の変数を変更したいのか、それともその時点の値をコピーしたいのかを意識してコードを記述することが重要です。

3. 非同期処理の影響

JavaScriptはシングルスレッドで非同期処理を行います。setTimeout, setInterval, Promise, async/await などの非同期処理内で変数を操作する際、処理が完了するまでの間に変数の値が他の場所で変更されてしまい、予期せぬ結果を招くことがあります。

問題の例

Javascript

let data = "initial";

function fetchData() {
  setTimeout(() => {
    // 1秒後にこの処理が実行される
    console.log("非同期処理内のdata:", data); // その間にdataが変更されていると...
  }, 1000);
}

fetchData();
data = "updated"; // fetchDataが呼び出された直後にdataが変更される

// 1秒後には "updated" が出力される

解決策

• 変数のライフサイクルとスコープを意識する: 非同期処理が実行されるタイミングで、その変数がどのような状態になっているかを常に意識しましょう。
• コールバックやPromiseの引数で値を渡す: 可能な限り、非同期処理が必要とする変数は引数として渡すか、非同期処理のスコープ内で定義する。
• 不変性 (Immutability) の意識: 非同期処理で扱うデータは、できる限り不変（変更されない）に保つことを検討する。新しいデータを作成して返す。
• 状態管理ライブラリの検討: 複雑な非同期処理やアプリケーションの状態管理が必要な場合は、Redux, Vuex, Zustandなどの状態管理ライブラリが役立ちます。

4. DOM操作やイベントハンドラによる意図しない変更

Webアプリケーションでは、DOM要素やイベントリスナーを介して変数を操作することがよくあります。しかし、複数のイベントリスナーが同じ変数を操作したり、DOM要素の属性として保持していたデータが意図せず変更されたりすることがあります。

問題の例

Html

<button id="myButton" data-count="0">Click me</button>
<script>
  const button = document.getElementById('myButton');
  let clickCount = parseInt(button.dataset.count); // 初期のカウントをDOMから取得

  button.addEventListener('click', () => {
    clickCount++; // グローバル（または外部スコープ）のclickCountを変更
    button.textContent = `Click me (${clickCount})`;
    // button.dataset.count = clickCount; // これを忘れるとDOMと変数の値が同期しない

    // 別関数が同じ変数を変更する可能性がある
  });
</script>

解決策

• 変数のスコープを限定する: イベントハンドラ内で必要となる変数は、可能な限りハンドラ関数内で定義するか、クロージャを使って特定のインスタンスに閉じ込める。
• DOMとJavaScript変数の同期を意識する: DOM要素の属性値としてデータを保持する場合、JavaScript側で変更した場合は必ずDOM側も更新するようにする。
• データ属性 (data-*) の活用: 単純なデータであれば、dataset を通じてDOM要素に直接関連付けることで、グローバル変数の使用を減らすことができます。

ハマった点やエラー解決

ハマった点1: constを使っているのにオブジェクトの中身が変わる！

「constは定数だから変更できないはずなのに、オブジェクトのプロパティをいじったら中身が変わってしまった！」という経験はありませんか？ const は変数の「再代入」を禁止するものであり、その変数が参照している「オブジェクトの中身」の変更までは禁止しません。

Javascript

const myObject = { value: 10 };
myObject.value = 20; // これはOK！myObjectが指すオブジェクトの中身が変わる
// myObject = { value: 30 }; // これはNG！再代入しようとしている

解決策1: イミュータブルなデータ設計を心がける

オブジェクトや配列を変更するのではなく、変更された新しいオブジェクトや配列を生成するように意識しましょう。これにより、元のデータが意図せず変更されることを防ぎ、コードの予測可能性が高まります。Object.freeze() を使うことで、オブジェクトを浅く（第一階層のみ）凍結し、プロパティの変更や追加を防ぐこともできます。

Javascript

const original = { value: 10 };
// Object.freeze(original); // これでoriginal.value = 20; もエラーになる（厳格モード）

// 新しいオブジェクトを作成して変更を反映
const updated = { ...original, value: 20 };
console.log(original.value); // => 10
console.log(updated.value);  // => 20

ハマった点2: ループの中の非同期処理で、期待と違う値が使われる！

上記「スコープとクロージャの誤解」の例1 (setTimeoutとvarの組み合わせ) が典型です。ループが完了してから非同期処理が実行されるため、その時点で var で宣言された変数はループの最終的な値になっています。

解決策2: letを使うか、クロージャで値をキャプチャする

最も簡単な解決策は var を let に置き換えることです。let はブロックスコープを持つため、ループの各イテレーションごとに新しい変数が作成され、その時の値が非同期処理に「閉じ込められ」ます。

デバッグ手法の活用

変数の意図しない変更を特定するには、効果的なデバッグ手法が不可欠です。

• console.log() を戦略的に使う:
  • console.log("変数名:", 変数名); のように、何の値を出力しているかを明示する。
  • オブジェクトを出力する際は console.log(JSON.parse(JSON.stringify(myObject))); のようにディープコピーして出力すると、その時点のスナップショットを確認できます。（ただし、関数などJSON化できないものは除外されます）
  • console.trace() で関数の呼び出しスタックを確認する。
  • console.time() / console.timeEnd() で処理時間を確認する。
• ブラウザの開発者ツールを活用する:
  • ブレークポイント (Breakpoints): コードの特定の位置で実行を一時停止させ、その時点での変数の状態を確認できます。
  • ステップ実行 (Step Over, Step Into, Step Out): コードを1行ずつ実行し、変数の変化を追跡できます。
  • スコープ (Scope) パネル: 現在のスコープにある全ての変数の値を確認できます。
  • ウォッチ式 (Watch Expressions): 特定の変数を登録し、コードの実行中にその値がどのように変化するかをリアルタイムで監視できます。
  • コールスタック (Call Stack): 現在実行中の関数がどのように呼び出されたかの履歴を確認し、どの関数が変数を変更した可能性があるかを推測できます。

まとめ

本記事では、JavaScriptで変数の値が「勝手に」変わるように見える現象について、その主な原因と具体的な解決策、デバッグ方法を解説しました。

• JavaScriptのデータ型を理解する: プリミティブ型は値渡し、オブジェクト型は参照渡しであるという根本的な違いが、意図しない変更の主要因です。
• 参照渡しによる副作用に注意: オブジェクトや配列を操作する際は、元のデータを変更するのか、新しいコピーを作成するのかを明確に意識し、必要に応じてシャローコピーやディープコピーを適切に使い分けましょう。
• スコープとクロージャを正しく理解する: letやconstのブロックスコープを活用し、varの予期せぬ挙動から回避すること、クロージャが変数をどのようにキャプチャするかを理解することが重要です。
• 非同期処理での変数のライフサイクルを意識する: setTimeoutやPromiseなどの非同期処理が絡む場合、処理が実行される時点での変数の状態を予測し、同期を取る必要があります。
• 開発者ツールを最大限に活用する: console.logはもちろん、ブレークポイント、ステップ実行、ウォッチ式、スコープパネルなど、ブラウザの強力なデバッグ機能を使いこなしましょう。
• 予防策としての設計原則を意識する: 可能であればイミュータブル（不変）なデータの利用を心がけ、副作用のない純粋関数を意識したコード設計を目指すことで、バグを未然に防ぐことができます。

この記事を通して、JavaScriptの変数の挙動に対する理解が深まり、予期せぬ変数の変更に遭遇した際に、原因を特定し、効果的にデバッグ・解決できる能力が向上したことを願っています。

今後は、より発展的な内容として、大規模アプリケーションにおける状態管理ライブラリ（Reduxなど）の活用や、関数型プログラミングの概念をJavaScriptにどう適用するかといったテーマについても記事にする予定です。

参考資料

• MDN Web Docs: JavaScript のデータ型
• MDN Web Docs: var と let と const
• MDN Web Docs: クロージャ
• MDN Web Docs: Object.assign()
• MDN Web Docs: スプレッド構文