JavaScriptの学習を始めると、必ず出てくるのがDOM操作。
特に「addEventListener」の仕組みを理解するのに、つまずく方が多いのではないでしょうか？
例えば、「どうやってクリックを検知するの？」「この記述の順番はどう覚えるの？」といった悩み。
そこで今回は、DOM操作を「日本語の文法」に置き換える方法で覚えるコツをご紹介します！
DOM操作とaddEventListenerの基本を押さえよう
DOM操作とは？
DOM操作は、JavaScriptを使ってHTMLの要素を取得したり、動きをつけたりする技術です。
例えば、ボタンをクリックしたときに動きを加えたり、テキストを変更したりすることができます。
addEventListenerの基本形
addEventListenerは、要素にイベントを追加するためのメソッドです。
以下の構文が基本形になります。
何を.addEventListener("どうした時に", () => {
どうなる
});これを日本語で考えると「何に」「どうした時に」「どうなるのか」の順番になります。
この考え方を使うと、初心者でも分かりやすく覚えられます！
日本語文法で覚えるaddEventListenerの使い方
フォーマットを使って考えよう
覚えるべき基本構文を、日本語のフレーズとして落とし込みます。
- 「何に」
どの要素に対してイベントを追加するかを指定します。
例: ボタン、入力フォームなど - 「どうした時に」
イベントの種類を指定します（例:click、mouseover）。 - 「どうなるのか」
イベントが発生したときに実行する処理を書きます。
これを日本語で考えると、例えば以下のようになります。
button.addEventListener("click", () => {
alert("ボタンがクリックされました！");
});「ボタンを、クリックした時に、アラートを表示する」
DOM操作の実践例で日本語に置き換えてみよう
事例1: ボタンをクリックして背景色を変更
以下のコードでは、ボタンをクリックするとページ全体の背景色が変更されます。
コード例
<button id="changeColor">背景色を変える</button>
<script>
const button = document.getElementById("changeColor");
button.addEventListener("click", () => {
document.body.style.backgroundColor = "lightblue";
});
</script>日本語文法で解釈
「ボタンを、クリックした時に、背景色を青に変える」
実際の動き
See the Pen JS_ExampleBgColor by WithWhiz (@withwhiz) on CodePen.
事例2: 入力欄に文字が入力されたときに表示
入力欄に文字を入力すると、画面にその内容がリアルタイムで表示されます。
コード例
<input id="textInput" type="text" placeholder="文字を入力してください">
<p id="output"></p>
<script>
const input = document.getElementById("textInput");
const output = document.getElementById("output");
input.addEventListener("input", () => {
output.textContent = input.value;
});
</script>日本語文法で解釈
「入力欄に、文字が入力された時に、その文字を表示する」
実際の動き
See the Pen JS_ExampleTextInput by WithWhiz (@withwhiz) on CodePen.
事例3: ボタンをクリックしてテキストを変更する
ボタンをクリックすると、画面に表示されたテキストが変更されるコードです。
コード例
<p id="text">このテキストを変更します。</p>
<button id="changeText">テキストを変更する</button>
<script>
const button = document.getElementById("changeText");
const text = document.getElementById("text");
button.addEventListener("click", () => {
text.textContent = "テキストが変更されました！";
});
</script>日本語文法で解釈
「ボタンに、クリックした時に、テキストを変更する」
See the Pen JS_ExampleChangeText by WithWhiz (@withwhiz) on CodePen.
まとめ：日本語文法でDOM操作をもっと楽しく！
DOM操作やaddEventListenerは、慣れるまで少し時間がかかりますが、日本語の文法で考えると分かりやすくなります。
- 「何に」＝対象の要素
- 「どうした時に」＝イベントの種類
- 「どうなる」＝実行する処理
この考え方を実際にコードに当てはめ、繰り返し練習してみてください！
