イベントリスナーで
ボタンに命を吹き込む

HTMLにJSを書くのはイケてない？

ボタンをクリックした時の処理を作る時、最初はこんな風にHTMLに直接書いていました。

<!-- 少し古い書き方 -->
<button onclick="doSomething()">決定</button>

これで全く問題なく動くのですが、大規模なアプリになってくると「見た目（HTML）」と「動き（JavaScript）」が混ざってしまい、保守が大変になると気づきました。

JavaScript側で「見張る（Listen）」

そこで学んだのが、イベントリスナーという概念です。HTMLはただボタンを表示するだけにしておき、JavaScript側から「このボタンがクリックされるのを監視してね」と指示を出します。

// 1. ボタン要素を取得する
const btnDone = document.getElementById('btn-done');

// 2. 「クリックされたら」動く関数をセットする（アロー関数を使用）
btnDone.onclick = () => {
    // 確定ボタンが押された時の画像処理などをここに書く
    renderOutput('web');
};

// または、複数登録できる addEventListener を使う
// btnDone.addEventListener('click', () => { ... });

ユーザーの行動を「拾う」楽しさ

クリックだけでなく、「画像がドラッグ＆ドロップされた時（ondrop）」や「ファイルが選択された時（onchange）」など、ユーザーの様々なアクションをJavaScriptで拾い上げて処理を繋げていく。このパズルを組み立てるような感覚が、フロントエンド開発の醍醐味だと感じています。