JavaScript - ハンドラ

JavaScript ハンドラの紹介

こんにちは、未来のプログラマーさんたち！今日は、JavaScriptのハンドラの面白い世界に飛び込んでみましょう。あなたの近所の親切なコンピュータ教師として、私は多くの例と説明を交えてこの旅を案内します。お気に入りの飲み物を手に取り、リラックスして、始めましょう！

JavaScriptでのハンドラとは？

JavaScriptでは、特定のイベントが発生したときに呼び出される関数をハンドラと呼びます。これを、いつも待機している特別な助っ人として考えてください。そのイベントが発生すると、私たちのハンドラが動作を開始します！

簡単な例から始めましょう：

let button = document.querySelector('button');
button.onclick = function() {
alert('Hello, World!');
};

このコードでは、「誰かがこのボタンをクリックしたら、'Hello, World!'というアラートを表示する」とJavaScriptに指示しています。button.onclickに割り当てられた関数が私たちのハンドラです。

一般的なハンドラの種類

JavaScriptには多くのハンドラがあります。最も一般的なものを見てみましょう：

ハンドラの種類	説明	例
onclick	要素がクリックされたときにトリガーされる	element.onclick = function() { ... }
onmouseover	マウスが要素の上に移動したときにトリガーされる	element.onmouseover = function() { ... }
onkeydown	キーが押されたときにトリガーされる	document.onkeydown = function(event) { ... }
onload	ページや画像が読み込まれたときにトリガーされる	window.onload = function() { ... }
onsubmit	フォームが送信されたときにトリガーされる	form.onsubmit = function(event) { ... }

ハンドラの作成と使用

方法1: HTML属性

ハンドラを作成する一つの方法は、HTML要素に直接属性として追加することです。以下はその例です：

<button onclick="alert('Clicked!')">クリックしてね</button>

このボタンをクリックすると、「Clicked!」というアラートが表示されます。簡単ですね？

方法2: DOMプロパティ

より柔軟な方法は、JavaScriptを使って要素のプロパティにハンドラを割り当てることです：

let button = document.querySelector('button');
button.onclick = function() {
console.log('ボタンがクリックされました！');
};

この方法を使うと、ハンドラを動的に変更し、関数内で要素にアクセスすることができます。

方法3: addEventListener

最も強力な方法はaddEventListenerを使うことです。これを使うと、同じイベントに複数のハンドラを追加できます：

let button = document.querySelector('button');
button.addEventListener('click', function() {
console.log('最初のハンドラ');
});
button.addEventListener('click', function() {
console.log('二番目のハンドラ');
});

今、ボタンをクリックすると、両方のメッセージがコンソールに表示されます！

イベントオブジェクト

イベントが発生すると、JavaScriptはその詳細についての「イベント」オブジェクトを作成します。私たちはハンドラ内でこのオブジェクトにアクセスできます：

document.onmousemove = function(event) {
console.log('マウスの位置:', event.clientX, event.clientY);
};

このコードは、マウスが動くたびにその位置をログにします。eventオブジェクトは、多くの便利な情報にアクセスする手段を提供します！

ハンドラの削除

時々、ハンドラを削除する必要があります。以下はその方法です：

let button = document.querySelector('button');
function handler() {
console.log('クリックされました！');
button.removeEventListener('click', handler);
}
button.addEventListener('click', handler);

このハンドラは一度だけ動作します。なぜなら、最初のクリックの後で自分自身を削除するからです！

実用的な例：シンプルなゲーム

これら全てを合わせて、楽しい小游戏を作ってみましょう。クリックしようとすると動くボタンを作ります：

<button id="catch-me">私を捕まえて!</button>

<script>
let button = document.getElementById('catch-me');
button.addEventListener('mouseover', function() {
let top = Math.random() * (window.innerHeight - this.offsetHeight);
let left = Math.random() * (window.innerWidth - this.offsetWidth);
this.style.top = top + 'px';
this.style.left = left + 'px';
});

button.addEventListener('click', function() {
alert('おめでとう！私を捕まえた！');
});
</script>

このゲームでは、ボタンをホバーしようとするとランダムな位置に移動します。それをクリックすることに成功すると、あなたの勝利！

結論

そして、ここまでが、JavaScriptのハンドラの基本です。基本的なことをカバーし、実際の状況でどのように使用するかを学びました。実践は完璧を生む、 therefore 実験を恐れずにこれらの概念を試してみてください。

いつも私の生徒たちに言うように、コードを書くことは自転車に乗るのと同じです。最初は揺れ揺れするかもしれませんが、練習を積むことですぐにスピードを出すことができるようになります！コードを書き続け、学び続け、そして、何より楽しんでください！

Credits: Image by storyset