関数とイベント駆動

JavaScriptで「動き」を作るための基本です。ボタンのクリックなどをきっかけに処理を実行します。

HTML側 (スイッチ)

<input type="button" value="実行" onclick="updateText()">

JavaScript側 (処理)

function updateText() {
    // IDで要素を取得し、文字を書き換える
    document.getElementById('p1').textContent = 'ボタンが押されました';
}

変数のスコープと初期状態の保存

ページ読み込み時の状態を「グローバル変数」に保存しておくことで、高度なリセット機能などを実装できます。

初期状態のバックアップ

// 関数の外で定義することで、初期状態を1回だけ保存
let initialP1 = document.getElementById('p1').textContent;

function resetToDefault() {
    // 保存しておいた初期値を使って書き戻す
    document.getElementById('p1').textContent = initialP1;
}

設計の考え方：単純なリセット vs 賢いリセット

単純なリセット

特定の文字（例：'あ。'）を直接代入する。HTMLが変わると修正が必要。

賢いリセット

変数に元の文字を記憶させておく。HTMLの変更に強く、汎用性が高い。

重要語句

• document.getElementById(): HTML要素を探す命令
• .textContent: 要素内のテキスト情報を読み書きするプロパティ
• グローバルスコープ: 関数の外で変数を宣言し、状態を維持する仕組み