Endo Tech Blog

Techブログと言う名のただのブログです。

さりげなくJavaScriptとDOMの働きを学ぶ

JavaScript

f:id:kikuchi1201:20160811130148p:plain

JavaScriptを学んでいる。
本来ならばもう少しPHPの文法を使った、オブジェクト指向とか、クラス設計をがっつりやろーかなぁと思っていたんだが、今取り組んでいるアルバイトで今後JSのコードと嫌でも向きあわないといけない時期がくるので、今の内に基礎の基礎を学んでいる....訳です。

ほんでこれが人間に優しくない文章で書かれた成果物になります。

github.com

今みたらMarkdownが適応されていない箇所もあって、非常に雑なので、後で修正しときます。

で、本題です。

JavaScripって何?

よく言われている説明としては

  • ブラウザ上で実装されるスクリプト言語
  • 動きのあるウェブサイトを作れる。

と言われていますが、厳密にはWEB上でインタラクティブな表現をする為に開発されたオブジェクト指向のスクリプト言語（簡易プログラミング 言語）とか言われています。なんかかっこいいですけど、要はいい感じにイケイケなwebサイト作ってくれるプログラミング言語ですね。もっと知りたかったらここをクリックすれば基本的な概要は理解できます。

で、僕はこの説明がいまいちピンとこなくて、インタラクティブって何? 動きのあるウェブサイト作れる具体的に何さ?となって、色々と自分の中で消化しながら一つの解釈を立てました。

こんな事をかくと、まさかりが振ってきそうですが、何故この考えに至ったか図を使って説明しましょう。

DOMの働き

f:id:kikuchi1201:20160810200401j:plain
(このドムじゃない)

DOMとは「Document Object Model」の略で、HTMLドキュメントやHTML要素とJavaScriptなどの外部世界とのインターフェースをオブジェクトで表現したものです。
また、難しい単語が出てきましたが、何を言ってるかというと、以下の簡単なHTMLコード(ドキュメント)があるとします。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JabaScript</title>
</head>
<body>
    <h1>Hello Enod!</h1>
</body>

</html>

これをブラウザで見ると実行結果は以下の様に出力されます。

f:id:kikuchi1201:20160810201850p:plain

いいですね。
では、次にこのHello Endo!はどのように出力されているのか?を考えてみます。 通常よくある、HTMLコードを書くと「<h1></h1>で囲む→大見出しになると」と考えますが、この→こそがDOMの働きになります。 f:id:kikuchi1201:20160811112947p:plain

つまり、DOMとはHTMLコードを解析した結果を元にブラウザに出力する仕組みを提供していると考えられます。では次にその仕組みについてもう少し詳しく見ていきましょう。

HTMLパーサーとDOMの関係

f:id:kikuchi1201:20160810214220p:plain

ブラウザの仕組み: 最新ウェブブラウザの内部構造より　　

オレンジで囲まれ部分に注目して下さい。先ほどの説明でHTMLを解析してとありましたが、これを行っているのがHTMLパーサです。ここではHTMLパーサの詳細な説明は省きますがやっている事は以下の2つです。

DOMはこの解析ツリーを元にDOMツリーを生成します。このDOMツリーこそが、DOMの仕組みになります。例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JabaScript</title>
</head>
<body>
    <div>
        <h1>Hello Wold!</h1>
        <b>My Name is Endo!</b>
        <p>Have a Nice day!</p>
    </div>
</body>
</html>

このHTMLコードをDOMツリーに変換すると以下のような図になります。

f:id:kikuchi1201:20160811095803p:plain

DOMツリーを調べると、こんな感じの図が沢山出てきて、色んな人の見方がありますのでどれが正解とも言えないですが概要的にはどれも同じだと思います。こんな感じにHTMLパーサで処理した結果を元に階層構造のDOMツリーを生成すると理解しておいて下さい。

ノードとは

DOMは階層構造を取ると同時にまた、もう一つ重要な働きがあります。それがノードです。ノードとは各要素(エレメントやタグ)を表す用語です。先ほどの図を使って説明しましょう。

f:id:kikuchi1201:20160811101752p:plain

ノードにはこの様にエレメントやHTMLタグ自体を表しています。先程のコードをこんな感じにJavaScriptを入れて変えてみます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JabaScript</title>
</head>
<body>
    <div id="d1">
        <h1 id="h1">Hello Wold!</h1>
        <b>My Name is Endo!</b>
        <p>Have a Nice day!</p>
    </div>
    <script>
        var div1 = document.getElementById("d1");
        var h1 = document.getElementById('h1')

        console.log(div1.nodeName);
        console.log(h1.nodeName);
    </script>
</body>
</html>

nodeNameとはノードの名前を文字列で返すメソッドです。

実行結果はこの様になります。

f:id:kikuchi1201:20160811103715p:plain

この様にJavaScriptはDOMで生成されるノードを用いる事でHTMLを動的に操作する事が事が理解できたと思います。

このノードには親子関係がおり、あるノードを基準Nodeとした時に上の階層にあるノードを親ノード、下の階層にあるノードを子ノードとも呼びます。

f:id:kikuchi1201:20160811105704p:plain

以下に子ノードを調べるコードがあります。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JabaScript</title>
</head>

<body>
    <div id="node">
        <h1>Hello Wold!</h1>
        <b>My Name is Endo!</b>
        <p>Have a Nice day!</p>
    </div>
    <form>
        <input type="button" id="myButton" value="Click" onClick="check()">
    </form>
    <script>
        function check() {
            var obj = document.getElementById("node");
            var child = obj.childNodes;
            console.log(child);
        }
    </script>
</body>

</html>

これを実行すると以下の結果が返ってきます。

f:id:kikuchi1201:20160811112356p:plain

子ノードの中に<p>,<h1>,<b>がちゃんと入っているのがわかると思います。そんな訳でHTMLタグをノードという形で操作できるようにDOMがその仕組を提供している事が理解できたと思います。最後にもっと重要(?)というかDOMの働きによる恩恵を見ていきましょう。

window.documentの正体

さっきから、なんとなくスルーしていましたが、document.getElementByIdで、先頭についているdocumentはwindow.documentを省略した形です。
widow.documentとは今開いているブラウザをオブジェクトで表したものです。と、まぁJavaScripを普段から触ってる方からしたら、「そんなの当たり前やん」ってなるかと思うんですけど、この説明をサラっと聞いた時の衝撃というか...

「えっ？ブラウザがオブジェクトになるの？？」

「なるなる」

「なにそれ怖い。って事はオブジェクトだから、色々操作できちゃうメソッドとかプロパティあるん?」

「あるある。console.dir(window)」

f:id:kikuchi1201:20160811115957p:plain

「ほんまやぁぁぁぁ沢山メソッド持ってたぁぁぁすげぇぇぇ」

「それで、このwindow.documentをJavaScriptで操作する事で動きのあるwebページ作れちゃう」

「なるほど。」

「さらにwindow.documentにアクセスするための色々な命令を document object modelとも言って、DOM をいじる、DOM を操作するとも言われています。」

「DOMすげぇー！」

f:id:kikuchi1201:20160811124054p:plain

みたいな感じで勝手に一人で感動して自己完結したのですが、ここまで理解できればDOMがどんな働きをして、JavaScriptが何であるのか?を全部とはいえないですが、さりげなく理解できたと思います。特にDOMについては学習しながら何度も躓いて理解したので、以下に資料をのせるのでこちらも見て理解を深めて行って下さい。

ブラウザの仕組み: 最新ウェブブラウザの内部構造
JavaScript初心者でもすぐわかる！DOMとは何か？
正しいHTMLとドキュメントツリーを理解しよう
JavaScript初級者から中級者になろう
DOMとは