JavaScript 直感図解ガイド

1. DOM（ドキュメント・オブジェクト・モデル）の構造

HTMLはJavaScriptに届くと「ツリー構造のオブジェクト」に変換されます。

元のHTML

<body>
  <h1 id="title">Hello</h1>
  <button>Click Me</button>
</body>

window

document

body

h1#title
textContent: "Hello"

button
events: [click]

💡 直感的理解：

JavaScriptはHTMLを直接いじっているのではなく、ブラウザが作った「HTMLの操り人形（オブジェクト）」の糸を引いて操作しています。これがDOMです。

2. 変数とメモリ（スコープ）

変数は「名前ラベルのついた箱」です。

グローバルスコープ (宇宙)

const appId "999"

どこからでも見える、一番外側の大きな箱。

Function

計算する関数

let count 10

const temp ?

※関数の外側からはこの中の箱は見えません。

Val

プリミティブ値

数値・文字列などは箱に直接入る

Ref

オブジェクト・配列

箱には「住所」だけ入り、本体は別の大きな倉庫にある

3. イベントループと非同期処理

JSは「一人」しかいない超有能な店員さんです。一度に一つのことしかできません。

Stack (現在進行中)

fizzbuzz()

editList()

onsubmit()

下から順に積み上がり、上から順に片付ける

Queue (待機列)

setTimeout完了

「次、僕の番！」

Clickイベント

スタックが「空」になったら、ここから一人ずつ実行される

💡 直感的理解：

JavaScriptは「行列のできるラーメン屋のワンオペ店員」です。お客さん（処理）を一人ずつしかさばけません。時間がかかる注文（通信やタイマー）は、別の人に任せて、終わったらまた「待機列」の最後尾に並んでもらいます。これが非同期処理です。

4. 関数と引数・戻り値

関数は「材料を入れると、加工して返してくれる魔法の機械」です。

引数 (Argument)

15

function fizzbuzz(num) { ... }

加工中...

内部ロジック： 15 % 3 === 0 && 15 % 5 === 0 ?

"fizzbuzz"

戻り値 (Return Value)