フロントエンド技術を学ぼう 2-13.DOM、BOM、jQueryについて学ぶ-もじゃげくらぶ

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

第23回はPart II: Learning Front-End Devから、13項のLearn DOM, BOM, & jQueryを紹介します。

DOM、BOM、jQueryについて学ぶの説明です。

DOM、BOM、jQueryについて学ぶ

DOM

Document Object Model(DOM)は、クロスプラットフォームかつ言語依存の無い、HTML、XHTML、XMLドキュメントのオブジェクトを表現し相互作用させる為の規約です。ドキュメント上にあるすべてのノードは、DOMツリーというツリー構造状に編成されます。DOMツリー内のオブジェクトはアドレス指定され、オブジェクトが持つメソッドを使用して操作することができます。DOMのパブリックインターフェイスは、Application Programming Interface(API)で指定されます。

参照元：英語版Wikipedia

BOM

ブラウザオブジェクトモデル(BOM)は、Webブラウザから公開されるすべてのオブジェクトを参照するブラウザ固有の規則です。ドキュメントオブジェクトモデルとは異なり、実装の標準もなく、厳密な定義もされていないため、ブラウザベンダーは自由にBOMを自由に実装できます。

参照元：英語版Wikipedia

jQuery

jQueryは、HTMLのクライアントサイドスクリプトを単純化するために設計された、クロスプラットフォームのJavaScriptライブラリです。jQueryは、現在使用されているJavaScriptライブラリの中で最も人気があり、Web上でトラフィックの多い上位1000万サイト中65％にインストールされています。jQueryは、MITライセンスの下で許可された無料のオープンソースソフトウェアです。

参照元：英語版Wikipedia

学習方法

理想的ですが最も難しいのは、JavaScriptを最初に学習し、次にDOMを、次にjQueryを学習することです。

しかし、効率的な方法があります。ほとんどのフロントエンドの開発者は、jQueryを最初に学ぶことによってJavaScriptとDOMについて学びます。

どのような方法をとったとしても、JavaScript、DOM、およびjQueryがブラックボックスにならないようにしてください。

jQueryを学ぶ

前述の通り、jQueryを学びながらDOMやBOMに触れていきましょう。CodeacademyのCodecademy.com jQueryなどを利用して、以下の様な基本を抑えましょう。

項目	内容
ファンクション	jQueryでのセレクタ、変数、ファンクションの使い方
ダイナミックHTML	動的にHTML要素を操作したり、CSSのクラスやプロパティを操作する
イベント	マウスやキーボードの操作に対応したイベントハンドラの使い方
エフェクト	アニメーションやイベントハンドラを応用してインタラクティブな要素を作る

Reference from : Codecademy.com jQuery [インタラクティブ]

jQueryを使用する際の一番基本的な状態は、ドキュメントが正常に読み込まれてからスクリプトを実行するということです。これをコードにすると以下になります。

$(document).ready(function(){
//write your code!
});

これは、ドキュメント$(document)が、読み込み完了したら.ready()実行することfunction(){}という意味です。

さてjQueryでは、セレクタによって色々なHTML要素を変化させることができます。
例：$('div').hidden()

この時セレクタで指定したHTML要素はDOMの一部の為、DOMツリーを意識できていれば柔軟に要素を指定、変化させることが出来ます。

<html>
<head>
</head>
<body>
<ol>
<li id="first"></li>
<li id="second"></li>
<li id="third"></li>
</ol>
</body>
</html>

上記のような場合、DOMツリー内で<li>要素は次のような階層に位置するということが出来ます。

<html>
<body>
<ol>
<li>
<li>
<li>

であれば、id="third"とIDタグが付いている3番目の<li>要素をセレクタで指定する方法は、$('#third')以外に$('li:last-child')とすることも可能です。

以下はjQueryを使用して動的にリストを追加削除するプログラムです。テキストボックスに文字を入力して増えるボタンでリストの最終行に追加します。消えるボタンはリストの最終行を削除します。

See the Pen jQuery test by mojage (@mojage) on CodePen.

その他の学習リソース

jQuery Enlightenment
The Document Object Model [読み物]
(ドキュメントオブジェクトモデル)
HTML/JS: Making Webpages Interactive [視聴]
(HTML/JS：Webページをインタラクティブにする)
HTML/JS: Making Webpages Interactive with jQuery [視聴]
(HTML/JS：WebページをjQueryを使用してインタラクティブにする)
jQuery Enlightenment [読み物]
(開眼 jQuery)
jQueryとDOM要素 [読み物][日本語]