JavaScript | 変数に値を代入するときの仕組み

では「値渡しと参照渡し」を 図でスライドしながら視覚的に理解できるアニメ解説 のイメージを紹介します。

---

値渡し（プリミティブ型）のアニメイメージ

1. 変数 a に値を代入

a → 10

2. b = a でコピー

a → 10
b → 10   ← aの値がコピーされた

3. b を変更

b = 20

アニメのイメージ：

a → 10   b → 20

💡 ポイント：aとbは独立。aは変わらない！

---

参照渡し（オブジェクト型）のアニメイメージ

1. 配列を作る

arr1 → [1, 2, 3]

2. arr2 = arr1 で参照をコピー

arr1 → [1, 2, 3]  ← メモリ上の同じ場所を指す
arr2 ↗

3. arr2[0] = 100 を変更

arr1 → [100, 2, 3]
arr2 → [100, 2, 3]

💡 ポイント：arr1とarr2は同じ配列を見ているので、どちらかを変えると両方に影響する！

---

視覚化アニメのイメージ

• 箱で表現：
  • プリミティブ型：値が箱の中に入っていてコピーされる
  • オブジェクト型：箱の中に矢印で「データの場所」を示す

プリミティブ型       参照型（オブジェクト型）
[10] a             a ──> [1, 2, 3]
[10] b             b ──┘

• スライドアニメ：
  1. aの値/参照がbにコピーされる
  2. bを変更するとどうなるかを色や矢印で動かす
  3. 変更の影響があるかないかを瞬時に見えるようにする

---

値渡しと参照渡しを視覚的に理解できるアニメ

See the Pen Animation of Pass-by-Value and Pass-by-Reference by MONO365 -Color your days- (@monoqlo365) on CodePen.

使い方

1. 「次のステップ」ボタンを押すとアニメーションが進む
   • プリミティブ型では値のコピーと独立を確認
   • オブジェクト型では参照共有と変更の影響を確認

See the Pen Animation of Pass-by-Value and Pass-by-Reference #2 by MONO365 -Color your days- (@monoqlo365) on CodePen.

---

「浅いコピー（コピーして独立） vs 参照共有（同じデータを共有）」 を視覚的に比較できるインタラクティブ版

See the Pen Shallow Copy vs Reference Sharing Animation by MONO365 -Color your days- (@monoqlo365) on CodePen.

✅ ポイント

1. 参照共有
   • arr1 と arr2 は同じ配列を指す
   • arr2 を変更すると arr1 も変わる
   • 黄色で変更した要素をハイライト
2. 浅いコピー
   • arr3 と arr4 は独立した配列
   • arr3 を変更しても arr4 は変わらない
3. スライドバー
   • 0: 初期状態
   • 1: コピー／参照作成
   • 2: 変更を加えた結果
4. 矢印アニメ
   • コピー／参照の流れを矢印で視覚化

---

「ネストしたオブジェクトの浅いコピー vs 深いコピー（deep copy）」のアニメ版

この教材では以下を示します：

• 浅いコピー（ネスト内部は参照が共有される）
• 深いコピー（ネスト内部も完全にコピーされる）
• スライドバーでステップ操作、変更の影響を確認
• 配列やオブジェクトの要素を色分けして可視化

See the Pen Shallow Copy vs Deep Copy of Nested Objects by MONO365 -Color your days- (@monoqlo365) on CodePen.

✅ このアニメでわかること

1. 浅いコピー
   • ネストした配列やオブジェクトは参照がコピーされる
   • obj1.scores[0] を変更すると obj2.scores[0] も変化
   • ただしトップレベルのプロパティ（name）は独立
2. 深いコピー
   • JSON.parse(JSON.stringify(...)) で完全コピー
   • obj3.scores[0] を変更しても obj4.scores[0] は変化しない
   • トップレベル・ネスト内部すべて独立
3. スライドバー
   • 0: 初期状態
   • 1: コピー作成
   • 2: ネスト内部変更
   • 3: トップレベル変更
4. 矢印アニメ
   • コピーの流れを矢印で視覚化

---

浅いコピー・深いコピーをすべてアニメで連動表示、変更の影響が矢印や色でリアルタイムに動く教材

特徴：

• 浅いコピーと深いコピーを左右に並べて比較
• ネストしたオブジェクトや配列の変更をリアルタイムで色分け
• 矢印でコピーの流れをアニメーション表示
• スライドバーでステップ操作（コピー作成 → ネスト変更 → トップレベル変更）

See the Pen Shallow Copy vs. Deep Copy Real-Time Animation Tutorial by MONO365 -Color your days- (@monoqlo365) on CodePen.

✅ 特徴

1. 浅いコピー vs 深いコピーを左右で同時表示
   • 左: 浅いコピー（ネスト内部は参照共有）
   • 右: 深いコピー（完全に独立）
2. ネスト配列の変更をリアルタイム色分け
   • 黄色: トップレベル
   • 緑: ネスト配列の要素
3. 矢印でコピーの流れをアニメ表示
   • ステップごとに矢印が右にスライド
4. スライドバーでステップ操作
   • 0: 初期状態
   • 1: コピー作成
   • 2: ネスト内部変更
   • 3: トップレベル変更

---

JavaScriptのコピー・参照パターンを1つの教材で統合し、色・矢印・スライドで全ステップ可視化できるインタラクティブ教材

特徴：

1. プリミティブ型（値渡し）
   • 独立コピーの挙動を可視化
   • スライドで値の変化を確認
2. オブジェクト・配列型（参照渡し）
   • 参照共有と浅いコピーの違いを色で強調
   • ネスト配列やオブジェクトの要素を緑でハイライト
3. 深いコピー（deep copy）
   • JSON.parse(JSON.stringify(…)) や structuredClone などで独立コピー
   • ネスト内部も変化しないことを色分け
4. 矢印でコピーの流れをアニメ表示
5. スライドバーでステップ操作
   • ステップ0: 初期状態
   • ステップ1: コピー作成
   • ステップ2: ネスト内部変更
   • ステップ3: トップレベル変更
   • ステップ4: 結果の比較

See the Pen JavaScript Copy and Reference Visualization Materials by MONO365 -Color your days- (@monoqlo365) on CodePen.

✅ この統合教材でわかること

1. プリミティブ型
   • 値渡しなので独立
   • b の変更は a に影響なし
2. オブジェクト・配列型（浅いコピー）
   • ネスト内部は参照共有
   • ネスト配列を変更するとコピー側も変化
   • トップレベルのプロパティは独立
3. 深いコピー
   • ネスト内部も完全にコピー
   • 変更の影響はコピー側に及ばない
4. スライドバー
   • 0: 初期状態
   • 1: コピー作成
   • 2: ネスト内部変更
   • 3: トップレベル変更
   • 4: 結果比較
5. 矢印 & 色分け
   • コピーの流れを矢印で可視化
   • ネスト配列の変更は緑でハイライト
   • トップレベル変更は黄色でハイライト

---

学習者が直接値や配列を変更できる完全インタラクティブ版

特徴：

• プリミティブ型・浅いコピー・深いコピー を同時表示
• 配列やオブジェクトの値を直接編集可能
• 変更が即座にコピー先や参照に反映される（浅いコピーは共有部分が変化、深いコピーは独立）
• 矢印と色でコピーの影響をリアルタイム可視化
• スライドバーでステップ操作も可能

See the Pen JavaScript Copy and Reference Interactive Tutorial by MONO365 -Color your days- (@monoqlo365) on CodePen.

✅ この教材で学べること

1. 参照共有
   • arr1 と arr2 は同じ配列を参照
   • ネスト・トップレベルの変更は両方に反映
2. 浅いコピー
   • [...arr] でトップレベルはコピーされるが、ネスト配列の内部は参照
   • ネストを変更するとコピー側にも影響する
3. 深いコピー
   • JSON.parse(JSON.stringify(...)) で完全コピー
   • ネストもトップレベルも独立
4. スライドバー操作
   • 0: 初期状態
   • 1: コピー作成
   • 2: ネスト内部変更
   • 3: トップレベル変更
5. 色分けによる視覚化
   • 緑色でネスト配列の変更箇所を強調

---

配列/オブジェクトを複数用意して「浅いコピー vs 深いコピー vs 参照共有」の違いを一目で比較

特徴：

• 左から右に「参照共有」「浅いコピー」「深いコピー」を並べる
• 複数オブジェクト／配列を用意して比較
• ネスト配列やオブジェクトの変更を色分けで視覚化
• 矢印でコピーの流れをアニメ表示
• スライドバーでステップ操作（コピー作成 → ネスト変更 → トップレベル変更 → 結果比較）

See the Pen Reference, Shallow Copy, Deep Copy Comparison Materials by MONO365 -Color your days- (@monoqlo365) on CodePen.

✅ この教材で学べること

1. 参照共有
   • arr1 と arr2 は同じ配列を参照
   • ネスト・トップレベルの変更は両方に反映
2. 浅いコピー
   • [...arr] でトップレベルはコピーされるが、ネスト配列の内部は参照
   • ネストを変更するとコピー側にも影響する
3. 深いコピー
   • JSON.parse(JSON.stringify(...)) で完全コピー
   • ネストもトップレベルも独立
4. スライドバー操作
   • 0: 初期状態
   • 1: コピー作成
   • 2: ネスト内部変更
   • 3: トップレベル変更
5. 色分けによる視覚化
   • 緑色でネスト配列の変更箇所を強調