JavaScriptのDOM操作、覚え方のコツ

Webコーディング

2023.01.04

2024.02.10

コーディング初学者の方が難しいと感じる “JavaScript”。

HTML/CSSはマークアップだけだったのに、急に変数やら条件分岐、繰り返しなどのロジックが入ってきて混乱することでしょう。

そんなあなたのためにJavaScriptが楽しくなるちょっとしたコツを紹介します。

そもそもDOM操作って何？

JavaSciptではDOM操作という概念があります。

「DOM」とは「Document Object Model」の略。

Webサーバー上にあるHTML（PHP）をブラウザで表示する際にデータ構造に変換します。

この「データ構造」のことを「DOM」といいます。

その「DOM」を「操作する」ので「DOM操作」。そのままですね。

分かりづらい人はとりあえず「HTMLを変更する」くらいで覚えておけば大丈夫。

JavaScriptの役割はページの表示内容を変えることです。

HTML/CSSで表示させたページに対してロジックを付け足すことで表示を変更することができる優れものです。

このJavaScript、書き方は少し難しいですが「◯を△した時に×を□する」という構文さえ頭に入れておけばなんとなく書けちゃうんです。

実際に例を見てみましょう。

「背景を変更」ボタンをクリックしてみてください。色が変わります。

「リセット」ボタンをクリックすると元に戻ります。

「ボタンをクリックした時に四角形の背景の色を変更する」をJavaScriptの構文に変換すると以下のような形になります。

document.querySelector("ボタンを").addEventListener("クリックした時に", function(){
  // 四角形の背景の色を変える（処理）;
});

これを詳しくすると

「◯を△した時に×を□する」なんとなくお分かりいただけましたでしょうか？

jQueryはJavaScriptを省略した書き方をする事ができるJavaScriptライブラリです。

$('.box').on('click', function(){
    $('.other').fadeToggle();
});

「document.querySelector」を「$」に、「addEventListener」を「on」に変更したと覚えておけばOK。

その他にも、fadeInやfadeOutなどのアニメーションを含んだ関数やtoggleなどの繰り返しの関数が用意されているので便利です。

「◯を△した時に×を□する」をなんとなく理解したとしても調べ方がわからないことも。

「ググればいいじゃん」と言われることもありますが、初学者の段階ではそう単純にはいきません。

調べる時も「◯を△した時に×を□する」を意識してみましょう。

例えば、「ボタンをクリックしたら青い四角を赤くする」が要件であれば、「JS ボタンクリックした時色変更」とキーワードを分割すれば該当の記事が出てきます。