JavaScript入門講座③ - DOMを理解してページを操作しよう

2020年6月4日 06:00

今日の講座の重要性

今日の入門講座は今後あなたが【稼げるエンジニア】になるためにめちゃくちゃ大事なJavaScriptの基礎を話します。

何度も見返して、無意識レベルで理解できるまで刷り込んでおいてください。

想像してください。

あなたは、30万円でECサイトを構築する案件を受注しました。
クライアントから、検索結果にフィルターを付けてほしいとのオーダーが。jQueryを使って意気揚々と実装しますが、うまくいきません。
調べても原因がよく分かりません。途方にくれますが、ググってなんとか乗り越えました。
しかし3日後、クライアントから「うまく動かないんだけど」とクレームが...

jQueryはとても便利です。今後きっと使う機会が増えるでしょう。

(もちろん、vueやreactかもしれませんが)

その時、今日の話を理解してない人は上のようなケースに巻き込まれる可能性があります。

ちゃんと理解しないまま先に進めば、後々苦労する部分です。

将来の自分を楽にさせる為にしっかりと今日の話を理解しておきましょう！

DOMとは何か

さて、前回と前々回で、JavaScriptという初めて出会ったプログラミング言語で「変数」と「関数」について学んできましたね。

これであなたは、HTML/CSSのマークアップエンジニアから、立派なエンジニアへの仲間入りを果たしました。

そして今日は、JavaScriptを使うには避けては通れないDOMの話をします。

一度は聞いたことがあるのではないでしょうか？DOM。でもよく分かってないんじゃないでしょうか？

今日はここを初心者でも分かりやすく。しっかりと解説していきます。

分からないことはTwitterで気軽に質問して下さい。

さて、DOMとは「Document Object Model」の略称です。

意味が分かりませんね。大丈夫。次の分かりやすい解説をみて下さい。

Document Object Model (DOM) は HTML や XML 文書のためのプログラミングインターフェイスです。ページを表現するため、プログラムが文書構造、スタイル、内容を変更することができます。 DOM は文書をノードとオブジェクトで表現します。そうやって、プログラミング言語をページに接続することができます。
参照 : https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction

？？？？？？

僕が初めてみた時はこれで挫折しました。

超噛み砕いて説明し直してみます。

DOMとは、JavaScriptからHTMLを自在に操作する仕組みです。
具体的には、JavaScriptを使って、HTMLの画像を切替えたり、ボタンがクリックされたらアラートを出したり。
そういったことを実現するための仕組みです。

どうでしょうか？意外と簡単じゃないですか？
すでにやってる人もいるんじゃないでしょうか？
サムネイル画像をクリックしたら、その上の画像を切替える。とか。

そういったことを実現するための仕組みがDOMだった。というだけです。

DOMには3つの特徴があります。

ツリー構造と呼ばれる階層構造があり
それぞれの階層のことを「ノード」という言葉で表現し
WEBページとJavaScriptなどのプログラミング言語とを繋ぐ役割を持つ

この3つです。順番に説明していきましょう。

DOMの階層構造とは

まず、この図を見てください。

何となく見覚えがありますね。

そう、これまで書いてきたHTMLの構造です、htmlの中にheadとbodyを書いて、headの中にはtitleタグがあって、、、
実はこのように階層構造になっていたんですね。

スクリーンショット 2020-06-03 21.36.46

よく思い返してみてください。
HTMLを書くときのことを。これをHTMLで書くとどうなるでしょうか？

<html>
 <head>
   <title>このページのタイトル</title>
 </head>
 <body>
   <h1>金を稼ごう！</h1>
   <div>
     <p>月収で300万はほしいですね</p>
     <img src="./img/money.jpg" alt="">
   <div>
 </body>
</html>

こんな感じですね。上の図と合わせてみるとどうでしょうか？実は、今まで書いていたHTMLのコードも、<html> ~ </html>の中に、<head>,<body>があり、<head> ~ </head>の中に<title>タグがあり。。

実は無意識のうちにこの階層構造に沿って書いてた訳です。

そして、DOM(HTMLをJavaScriptで操作する場合)では、これらを【ノード】と呼びます(上の図でピンクの点線で囲んでるものです)

DOMのノードとは

ノードは上の階層構造を表す一つ一つのことですが、実はいくつかの種類があります。

・親ノード
・子ノード
・兄弟ノード

詳しくみてみましょう。先程のbodyの中をみてみると分かりやすいです。

スクリーンショット 2020-06-03 21.47.44

上下関係の階層にある場合、上のノードが【親ノード】で、下のノードが【子ノード】です。
上下両方に階層を保つ場合(divのように)は、上(bodyタグ)から見ると自分は【子ノード】となり、下(pタグ)から見ると【親ノード】となります。
また、左右の階層にノードたちは【兄弟ノード】となります。

結局ノードって何者なのか？

この各々のノードたちの実態がよく分かりませんよね。
実はこれ、Elementオブジェクトなんです。

やばいですね。「オブジェクト」なにそれ？状態ですよね。

安心してください。超簡単です。

これまで、【変数 = 箱】【関数 = 役割を持った小さなおじさん】とか解説してきましたね。

オブジェクトは、この変数と関数の集まりと考えて下さい。

つまり家みたいなものです。Elementオブジェクト家を表すとこんな感じです。

スクリーンショット 2020-06-03 21.57.11

Elementオブジェクトの中には、親ノードが入ってる「parentNode」という変数や、一番最初の子ノードが入ってる「firstChild」という変数。

また、nodeのテキストを返すおじさん。などが入ってます。

これまではこれらを「変数」と「関数」と呼んでいましたが、メソッドの中では、「変数 = プロパティ」「関数 = メソッド」と呼びます。

また、プロパティを呼び出すときには、「プロパティにアクセスする」などと無駄にかっこよく呼んだりします。難しく聞こえますが、単純に変数を呼んでる。と思えばOKです。

「DOMを扱う」とは？

DOMを扱うとはどういうことでしょうか。

実際、例えば上の図、もう一回見てみましょう。

スクリーンショット 2020-06-03 21.47.44

例えば、このHTMLの中のdivの【子ノード】である、一番最初のpタグに対して、テキストの色を変えるとか、アニメーションをつけるためには、この3つある最初のpタグ【のElementオブジェクト】にアクセスしなきゃいけません。

実際、このElementオブジェクトがpタグの色を変えたり、テキストを変えたり、色を変えたりということをできるメソッド(これらを全うする小さなおじさん)が入っているんです。

つまり、DOMを扱うとは、何か変化を付けたいHTMLの要素のElementオブジェクト(家)を手にすること。なわけです。

実際にDOMを扱ってみる

じゃあ、まずは最初のpタグにアクセスしてみましょう。
上の図のコードを書きましょう。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>このページのタイトル</title>
 </head>
 <body>
   <h1>金を稼ごう！</h1>
   <div>
     <p>月収で300万はほしいですね</p>
     <p>いや、やっぱ500万！</p>
     <p>もっと！！1000万ほしいなぁ！</p>
     <div>
 </body>
</html>

pタグの中は適当にお金のことを書いてみましたｗ
まず「 pタグの1つ目の要素として手に入れる」としてやってみましょう。

そもそもどうやってこのpタグのElementオブジェクトを手に入れればよいのでしょうか。

最初の図を思い出してください。

スクリーンショット 2020-06-03 21.36.46

この図を見ると、最上位に【document】というノードがいますね。
実はこいつ、僕らが書くHTMLのすべてを司る【documentオブジェクト】だったのです。

オブジェクトってなんでしたっけ？

そう。変数(箱)と、関数(小さなおじさん)を持った家でしたね。

このdocumentオブジェクトさんは、家の中に「配下のHTMLのタグのElementオブジェクトを取得する関数(小さなおじさんん)を持っているのです」

Elementオブジェクトを取得する関数は5種類あります。

↑ 詳しくはこちらを参照して下さい。

・ getElementById() → ID名から取得する
・ getElementsByClassName() → クラス名から取得する
・ getElementsByName() → name属性から取得する
・ getElementsByTagName() → タグ名から取得する
・ getElementsByTagNameNS() → タグ名からNodeListを取得する

これだけ見てもピンと来ないと思うので、実際にこれらを使ってpタグのElementオブジェクトを取得してみましょう。

※ ちなみに、みんなメソッド名が【getElementsXXXXX】になってますが、ID名から取得するメソッド名だけ【getElemetbyID】と、Elementが単数になってるのは、idは同じページの中で重複が許されてないからです(HTML/CSSの基礎を学んだ人なら分かるハズ..!)

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>このページのタイトル</title>
 </head>
 <body>
   <h1>金を稼ごう！</h1>
   <div>
     <p>月収で300万はほしいですね</p>
     <p>いや、やっぱ500万！</p>
     <p>もっと！！1000万ほしいなぁ！</p>
     <div>
 </body>

 <script>
   // タグ名からpタグのElementオブジェクトを取得する
   const p = document.getElementsByTagName('p')
   console.log(p)

 </script>

</html>

今回は、「 1. pタグの1つ目の要素として手に入れる」なので、純粋にまずpタグのElementオブジェクトを取得して、pという変数(箱)に入れてみました。

pという箱の中身をあけてみましょう。

DOM操作.mov

画質が悪くて恐縮ですが、、

pタグのElementオブジェクトの中には、3つのpタグのElementオブジェクトがそれぞれ入ってるみたいです(これを配列といいますが、それは後日詳しく説明します)

この早すぎるgif画像の中で表示してるのが、それぞれのpタグのElementオブジェクトのプロパティです。

p[0], p[1], p[2]となっていますが、この[]は、添字と言って、配列の中身を表すものです。(プログラミングの世界では、順番という概念は、1から始まらず、0から始まるのです)

例えば、p[0] (最初のpタグのElementオブジェクトの中身)はこんな感じになっています。

スクリーンショット 2020-06-03 23.53.53

この紫？のがすべてElementオブジェクトのプロパティ(変数 = 箱)です。Elementオブジェクトってたくさんのプロパティを持ってるんですね。

例えば、innertTextを見ると、「月収で300万はほしいですね」と、3つあるpタグのテキストが取れてるのが分かると思います。

では本題。この3つあるpタグの最初のpタグのテキストを表示してみましょう。

ちなみに、変数のときは、宣言した変数名をそのまま使えば箱の中身が取得できましたが、オブジェクトのプロパティ(変数)を出すには「オブジェクト.プロパティ名」として使います(アクセスします)。

  <script>

   // pタグのElementオブジェクト
   const p = document.getElementsByTagName('p')

   // 3つあるうち、最初のpタグのElementオブジェクトからinnerTextプロパティを表示
   console.log(p[0].innerText)

 </script>

今、3つあるpタグの最初のpタグのElementオブジェクトはp[0]という箱に入ってるので、これに.(ドット)を付けて、innerTextプロパティを取り出しています。

スクリーンショット 2020-06-04 00.01.27

Consoleに1つ目のpタグの「月収300万はほしいですね」が出力されています！おお！

これで、今、【p[0]】を使えば、このpタグを自在に操れる力を持ったといっても過言ではありません。

DOMを使ってテキストの色を変えてみよう

例えば、Elementオブジェクトには、sytleというプロパティ(これはCSSStyleDeclationオブジェクト)を持っており、そのプロパティにcssTextというものがあります。

スクリーンショット 2020-06-04 00.06.24

これを活用して、色を変えてみましょう。

まずは、1つ目のpタグのElementオブジェクトのstyleプロパティにアクセスしてみましょうか。

プロパティへアクセスする(オブジェクト(家)の変数を取得する)には、ドットでつなげればOKでしたね。

  <script>

   // pタグのElementオブジェクト
   const p = document.getElementsByTagName('p')

   // 3つあるうち、最初のpタグのElementオブジェクトのstyleプロパティにアクセス
   console.log(p[0].style)

 </script>

スクリーンショット 2020-06-04 00.12.43

cssTextを始めとして、bacgroundや、backGroundImageなど、CSSを学んだ時の懐かしいプロパティの数々が見えますね。

では、色を変える為にこのcssTextを指定して色を赤色にしてみましょう。

問題です。「このcssTextって何でしょうか？」

ちょっと難しかったかもしれませんが、答えは「pタグのElementオブジェクトのstyleプロパティの中のcssTextプロパティ」です。笑

要は、オブジェクトの中のプロパティ(変数=箱)にも、オブジェクト(変数=箱)が入る階層構造になってるってことです。ひたすらドットでつなげていけばOKです。

スクリーンショット 2020-06-04 00.19.07

こんな感じになってる訳です。

で、cssTextには文字列として、CSSの時に指定した文字列をそのまま入れます。

  <script>

   // pタグのElementオブジェクト
   const p = document.getElementsByTagName('p')

   // 3つあるうち、最初のpタグの文字色を赤色にしてみる
   p[0].style.cssText = "color: red"
 </script>

スクリーンショット 2020-06-04 00.20.37

お見事！！！3つあるpタグのうち、最初のpタグの文字色を赤くできました。

ここまで難しかったかもしれませんが、今後あなたが作るサイトで「カルーセルを実装する」とか「カートに入れるをクリックしたら、カートの中身を+1する」とか「画像のサムネをクリックしたら大きく表示する」とかやりたいですよね？？

これは、全ての基本はこのDOMを操作して行われてるということなんです。

これを理解して作ってる人と、理解せずにコピペだけで何となく作ってる人では、ハマったときや、バグを起こした時の解決スピードに雲泥の差があります。ガチです。

僕がDOMのこと理解せずにjQueryのプラグインを使いまくってバグ出して解決できず、先輩に泣きついたので間違いないです。笑

問題 : 3つ目のpタグの文字サイズを36pxにしてみましょう

さて、毎度同じみの理解度チェックです。

今回は、p[0]として1つ目のpタグのElementオブジェクトを手に入れて、その中のstyleプロパティのcssTextに【color: red】を入れることで赤色にすることに成功しました。

問題です。

今度は、以下のコードを書いて、Twitterで#スキプラチャレンジを付けてツイートしてみてください。(※ 回答のコードはスクショとかでもOKです！必ずコメント返します)

3つ目のpタグの文字サイズを36pxにしてください。

最後にお願い

ぜひぜひ、今後のモチベーションのためにもお願いします！！

もしこのnoteが参考になったら....

■ 最後にたった2つのお願い
① このnoteを「スキ」してください 🙇‍♂️
② このnoteの感想、何でも良いので @riman_skillplus 宛にください 🙇‍♂️

次回予告！！

もっとDOMを使いこなしてレベルアップしつつ、そもそもなんでみんなjQuery使ってんの？ってところをちゃんと自分の言葉で話せるようになるまで成長させます💪💪

(こちらも理解度チェックの練習問題多めにする予定です😎

お楽しみに！！

Step0: JavaScriptのイベントを理解しよう！
Step1: クリックしたら色が変わるようにしてみよう！
Step2: クリックしたら、文字を非表示にしてみよう！
Step3: カーソルを乗せたら色を変えてみよう！
Step4: 【ちょい難】カーソルが外れたら計算結果を表示してみよう！
番外編: jQueryって何なの？

実践編で利用するための基礎編はすべて無料公開してます。基礎編のモチベーション向上のためにサポートして頂けるとめちゃくちゃ喜びます！！だいたい作業工数は1記事あたり4-5時間程度かけて【分かりやすい】【知識が身につく！】を意識して作っておりますので、今後も頑張っていきます！