Ne:Code道場~JavaScript DOM①(DOMとHTML)の巻~


Ne:Code道場~JavaScript DOM①(DOMとHTML)の巻~

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのDOMとHTMLの学習ポイントについて紹介します。

目次
  1. はじめに
  2. DOMって何ニャ?
  3. HTMLについて教えてニャ
  4. HTMLをJavaScriptから操作するにはどうするニャ
  5. 最後に

はじめに

image この記事ではJavaScriptのDOMについて、概要について取り上げつつ、躓きポイント を補足しています。 各節ごとに、Ne:Code道場(猫de道場)の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、まずはHTMLとDOMについて理解を深めてゆきましょう。

DOMって何ニャ?

漫画内でもありましたが、読み方は「ドム」です。JavaScriptのもっているオブジェクトの1つになり、HTML、及びHTML経由でCSSをJavaScript側から操作することができるようになります。今回の記事においては、HTMLについて触れつつ、それをJavaScriptで操作する方法について説明したいと思います。
Webサイトの枠組みを担当するHTML、デザインのことを全く無視してシンプルなサイトを作るならばこのHTMLの知識さえあれば作成可能です。
まずは、HTMLについて簡単に補足するところから始めます。
image

HTMLについて教えてニャ

今回はJavaScriptでのHTML操作に着目し、その話の導入として必要最低限の内容で説明してゆきます。
例えばシンプルなHTMLファイルの中身は下記のようになっています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>お試しHTMLニャ</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="script.js"></script>
  </body>
</html>

不等号が沢山書いてありますね。だた、そこに規則性があることに気づくと思います。
例えば、この内、Webサイトとしてブラウザに表示される部分は<body>から</body>の中身です。<body>と</body>違いは「/」だけですね。それ以外は一致しています。「/」がついていないものを開始タグと呼び、ついているものを終了タグと呼びます。
開始・終了の名前の通り、その範囲はbodyというエリアになりますよと意味付けしている書き方なのですね。
このような開始から終了の一塊を指して、要素と呼びます。
要素というキーワードはこの先のJavaScriptのDOMの説明の中でも出てきますので、是非このタイミングで抑えておきましょう。
 
今回は、body要素の中に、div要素とscript要素が入っています。
div要素は開始タグの中身がbody要素と違っていますね。「id=”app”」の部分です。HTMLの開始タグには追加の情報を付与することができるのでき、それらは「属性」と呼ばれます。ここではdiv要素にid属性を設定していることになります。
JavaScriptを学習した後だと、「id=”app”」は「idにappを設定している」と読むこともできるかと思いますが、まさにそのとおりです。
id属性という、社員IDや学籍番号のように一意に識別できる値を管理している要素の属性に、「app」という値を設定しています。
学籍番号1番の人が複数存在するのはおかしいですよね。それと同じ理由で、idの中の値は必ず一意(ユニーク)になるものを設定します。
上の例で言うならば、同じ「app」というidの値をもった要素は他に追加しない、というのがidの利用時の注意ポイントになります。
そしてscript要素でJavaScriptのファイルを読み込んでいますね。src(ソース)という属性にかかれているscript.jsから、htmlファイルと同じ場所にそのファイルを探しにゆき、読み込んでいます。
この後記載するJavaScriptのコードは、このscript.jsというファイルに書かれているものです。
 
HTMLのファイル内は結構ゴチャゴチャものが書いてありますね。でも、このファイルを実際にブラウザで表示してみたら真っ白な画面を確認できるかと思います。
タグ自体はブラウザでは表示されないのですね。
では、「<div id="app"></div>」の部分を以下のように変えてみましょう。(サンプルコードは省略して書いています)

    <div id="app">ここがブラウザに表示されるニャ!</div>

その上でブラウザで表示してみますと、「ここがブラウザに表示されるニャ!」と表示されるのを確認できるかと思います。
image

HTMLをJavaScriptから操作するにはどうするニャ

せっかく、div要素にこれ見よがしなid属性を設定しておきましたので、まずは、ベーシックに、id属性を用いて要素を見つけ出しJavaScriptで操作する方法からみてゆきましょう。
まずは、Chrome開発者ツールのConsoleを活用しながら確認してゆきたいと思います。
DOMのDは「ドキュメント」のDです。DOM操作の基本はdocumentオブジェクトを用いるところから始めてゆきましょう。
上記のHTMLファイルをブラウザで実行している状態でConsoleを開き、「documet.getElementById("app")」と書いて実行してみましょう。
divの要素がまるまる取得できるのを確認できますね。試しにそのConsole上のdivの要素にカーソルを当ててみたのが以下の画像です。画面上の該当する要素が青色にハイライトされているのを併せて確認できますね。
image getElementByIdを用いて要素を取得し、その要素内の文章を実行時に「JavaScriptで書き変えたニャ!」に変更するコードが下記になります。

// document.getElementByIdの実行結果をdom変数に入れているニャ
// Elementは要素って意味らしいニャ。
// idから要素を取得するという、直球なメソッド名になっているニャ!
// Consoleのイメージだと、このdom変数にはdiv要素がまるまる入っていることになるのニャ
let dom = document.getElementById("app");
 
// dom変数はHTML要素のオブジェクトとして便利な機能が沢山あるらしいニャ
// textContentというプロパティがタグの内部の文字をもっているようニャ
// ※このコードは画面上表示されず、コンソールにだけ出力されるニャ
console.log(dom.textContent);
 
// textContentに新しい値を代入することができるみたいニャ
dom.textContent = "JavaScriptで書き変えたニャ!";

上記を実行するとConsoleには、変更前の文字が表示され、そしてブラウザ上は変更後の文字に変わっているのが確認できると思います。
image

Webサイト担当者としてのスキルが身に付く

無料カウンセリングはこちら

最後に

HTMLとDOMについて、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

  1. 役割分担を意識しつつ、JavaScriptの本領発揮の知識を身に着けてゆくニャ
    1. 枠組みのHTMLと装飾のCSS、そして動き担当のJavaScript、まずはこの役割分担を意識してゆくことが重要になるニャ
  2. 今回は初回ということでid属性でHTML要素を取得するベーシックな方法を取り上げたニャ
    1. あわせて、HTMLの要素や属性についてもキーワードを抑えておくニャ
  3. Chrome開発者ツールを用いることで、操作しているDOMがどれかを視覚的に確認してゆくこともできるニャ
    1. 慣れないうちは、domとして要素を取得したら、その要素がまるまる入っているというイメージを確認できるのは直感的でわかりやすいと思うニャ

DOMに関連して、まずは1つ目の記事として、HTMLについての概要と、そのHTMLをDOMとして操作するベーシックな記載について学びました。JavaScriptの本領発揮としてのDOM関連の処理を学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
DOMに関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。
image


小泉七菜
この記事を書いた人
小泉七菜
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp