【初心者向け】JavaScript無料学習（後編）| DOM・イベント・JQuery

【※ 当記事は2020年7月2日時点の情報です】

ペイヴメント（@pavement1234）です。

エンジニア

JavaScriptの基礎を知りたい。

環境
Windows10 Home（64bit）1903

DOM操作とイベント処理の基本
JQueryによる開発効率向上
WEBの世界を変えたAjax
まとめ

短時間で読めるようにJavaScriptで出来ることを広く浅くご紹介します。
【後編】ではDOMの操作、イベント処理、JQuery、Ajax（紹介のみ）をご説明します。

DOM操作とイベント処理の基本

DOMとは、Document Object Modelの頭文字を取った略語です。
HTMLやXMLのようなツリー構造を持つ文書をオブジェクトとしてメモリ上に展開し、
プログラムから扱えるようにします。

DOM操作の例

dom.htmlというファイルを作成。
エディタで以下の内容を入力し保存。

<!DOCTYPE html>
<html lang="Ja">
    <head>
    </head>
    <body>
        <p id="elem"></p><!-- 何も書かれていないパラグラフ -->
        <script type="text/javascript" src="./dom.js"></script>
    </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

dom.jsというファイルを作成
エディタで以下の内容を入力し保存。

var elem = document.getElementById('elem');
elem.innerHTML = "JavaScriptからテキストを書き込みました";

1 2	var elem = document.getElementById('elem'); elem.innerHTML = "JavaScriptからテキストを書き込みました";

dom.htmlをブラウザで開くとブラウザに
「JavaScriptからテキストを書き込みました」という文字列が表示されます。

どういう仕組みかと言うと、
まずHTMLドキュメントに空のパラグラフ<p>を作成し、
idに“elem”という名前を付けます。
次にJavaScriptから
var elem = document.getElementById(‘elem’)というメソッドを呼び出し、
パラグラフ<p>のエレメントを取り出します。
最後にパラグラフのエレメントのプロパティinnerHTMLに文字列を代入することで、
パラグラフ<p>に動的に文字列を設定できました。

次にWEBブラウザ上のイベントについてご説明します。
WEBブラウザ上でユーザがボタンをクリックしたり
マウスを通過させるなどの操作を行うことをユーザイベントと呼びます。

ボタンのクリックイベント

event1.htmlというファイルを作成。
エディタで以下の内容を入力し保存。

<!DOCTYPE html>
<html lang="Ja">
    <head>
    </head>
    <body>
        <button id="button_event">ポップアップメッセージ</button>
        <script type="text/javascript" src="./button_event.js"></script>
    </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<button id="button_event">ポップアップメッセージ</button>

</body>

</html>

button_event.jsいうファイルを作成。
エディタで以下の内容を入力し保存。

var elem = document.getElementById('button_event');
elem.addEventListener('click', function(){ alert("ボタンが押されました") } );

1 2	var elem = document.getElementById('button_event'); elem.addEventListener('click', function(){ alert("ボタンが押されました") } );

event1.htmlをブラウザで開き「ポップアップメッセージ」というボタンを押すと
「ボタンが押されました」というポップアップメッセージが出ます。
どういう仕組みかと言うと、
まずHTMLドキュメントにボタンを作成し、
idに“button_event”という名前を付けます。
次にJavaScriptから
var elem = document.getElementById(‘button_event’)
というメソッドを呼び出し、ボタンのエレメントを取り出します。
最後にそのエレメントのメソッドaddEventListenerにイベント名（ ‘click’ ）と
イベントが発生したときに実行したい関数
（ function(){ alert(“ボタンが押されました”) } ）を渡すことで、
ボタンを押したときにポップアップメッセージが表示されるようになりました。

タイマーによる非同期イベント

JavaScriptではタイマーによる非同期イベントも扱えます。
以下の例に示しましたが1秒毎に時計を更新するみたいな使い方ができます。

event2.htmlというファイルを作成。
エディタで以下の内容を入力し保存。

<!DOCTYPE html>
<html lang="Ja">
    <head>
    </head>
    <body>
        <p id="clock"></p>
        <script type="text/javascript" src="./timer_event.js"></script>
    </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

timer_event.jsというファイルを作成。
エディタで以下の内容を入力し保存。

var elem = document.getElementById('clock');
setInterval( function() {
    var date = new Date();
    var hour= date.getHours();
    var min= date.getMinutes();
    var sec= date.getSeconds();
    elem.innerHTML = hour + ":" + min + ":" + sec;
}, 1000 );

var elem = document.getElementById('clock');

setInterval( function() {

var date = new Date();

var hour= date.getHours();

var min= date.getMinutes();

var sec= date.getSeconds();

elem.innerHTML = hour + ":" + min + ":" + sec;

}, 1000 );

event2.htmlをブラウザで開くと現在時刻が表示されます。

どういう仕組みかと言うと、まずHTMLドキュメントに空のパラグラフ<p>を作成し、
idに“clock”という名前を付けます。
次にJavaScriptから
var elem = document.getElementById(‘clock’)というメソッドを呼び出し、
パラグラフ<p>のエレメントを取り出します。
最後に1秒（1000msec）に1回、Dateオブジェクトで時・分・秒を取得。
パラグラフのエレメントのプロパティinnerHTMLに
時・分・秒の文字列を代入することで、
パラグラフ<p>に時計を表示することが出来ました。

余談

JavaScriptのデバッグに便利なツールを1つご紹介します。

例えば私はFirefoxを使っているのですが、
ブラウザに搭載されたJavaScriptデバッグ環境の開き方と
デバッグ方法をご紹介します。

手順①　メニューからWEB開発を選びます

手順②　次にウェブコンソールをクリックします

手順③　以下のように【コンソール】というタブが開きます

に続いてalert(“Firefoxって便利”)と入力しエンターを押すと、
ポップアップウィンドウが表示されます

手順④　JavaScriptコードからデバッグ情報を出力できます。

このHTMLを開くと以下のようにコンソールにデバッグメッセージが表示されます。
※本記事ではいろいろ端折っており
エンコード（UTF-8）をHTMLに書かなかったため
コンソール画面に警告メッセージが出てますが、
今回はあまり気にしなくて良いです。
逆にこういうエラーも検出できるのでコンソール画面は非常に便利です。

<!DOCTYPE html>
<html lang="Ja">
    <head>
    </head>
    <body>
        <script type="text/javascript">console.log("コンソールに文字を出します")</script>
    </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

JQueryによる開発効率向上

さてJQueryはJavaScriptのコードを簡潔に書くためのライブラリの1つです。
DOMの操作が楽になることと、ブラウザの方言を吸収できることの2つの利点があります。

インストール方法

2つのメリットについて説明する前に、
JQueryのインストール方法を説明します。
URL参照する方法とローカルファイルを参照する方法がありますので、
ご自身のサイトに合わせてお選びください
（例えばローカルファイル参照にすれば、
インターネットにつながっていないローカルPCでも動かせます）。

手順①　JQueryのCDN（コンテンツデリバリーネットワーク）に行く

≫jQuery CDN – Latest Stable Versions

手順②-1　JQueryコードをURL参照する場合

JQuery 3.xのminifiedを左クリック。

ポップアップの<script>~</script>をコピーする
（右上の青いボタンをクリックしても良い）。

HTMLに貼り付ける。

<!DOCTYPE html>
<html lang="Ja">
    <head>
    </head>
    <body>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">
        </script>
    </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="

crossorigin="anonymous">

</script>

</body>

</html>

手順②-2　JQueryコードをローカルに置く場合

JQuery 3.xのminifiedを右クリックし
「名前をつけてリンク先を保存」をクリック。

保存した「jquery-3.4.1.min.js」をHTMLと同じフォルダに置き、
HTMLに相対ファイル名を書く。

<!DOCTYPE html>
<html lang="Ja">
    <head>
    </head>
    <body>
        <script src="./jquery-3.4.1.min.js"</script>
    </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

DOMの操作が楽になること

先ほど「ボタンのクリックイベント」を例に挙げましたが、
JQuery版に書き換えてみます。
jqeryevent.htmlというファイルを作成。
エディタで以下の内容を入力し保存。

<!DOCTYPE html>
<html lang="Ja">
    <head>
    </head>
    <body>
        <button id="button_event">ポップアップメッセージ</button>
        <script src="./jquery-3.4.1.min.js"</script>
        <!--自作のJavaScriptコードを呼ぶ前にJQueryを読み込む必要あり-->
        <script type="text/javascript" src="./button_event.js"></script>
    </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<button id="button_event">ポップアップメッセージ</button>

</body>

</html>

button_event.jsというファイルを作成。
エディタで以下の内容を入力し保存。

var elem = $( '#button_event");
elem.on('click', function(){ alert("ボタンが押されました") } );

1 2	var elem = $( '#button_event"); elem.on('click', function(){ alert("ボタンが押されました") } );

jqeryevent.htmlをブラウザで開き
「ポップアップメッセージ」というボタンを押すと
「ボタンが押されました」というポップアップメッセージが出ます。

まずHTMLですがコメントにも書きましたが
自作のJavaScriptファイルより先にJQueryを読み込む必要があります。
JQueryを使わない場合を赤、使った場合を青で示すと、document.getElementById(‘button_event’)が
$( ‘#button_event”)という短い呼び方になり、
addEventListenerがonに置き換わります。

参考までにJQueryを使わない場合も載せておきます。

var elem = document.getElementById('button_event');
elem.addEventListener('click', function(){ alert("ボタンが押されました") } );

1 2	var elem = document.getElementById('button_event'); elem.addEventListener('click', function(){ alert("ボタンが押されました") } );

ブラウザの方言を吸収できること

JQueryは
uncomressed、minified、slim、slim minifiedの4種類ありますが、
それぞれ以下の位置づけになってます。

uncomressed	フル機能	読みやすいようにスペースとか改行がされている
minified	フル機能	ファイルサイズを削るためにスペースとか改行が削られている
slim	機能限定（Ajaxやアニメなどが削られてる）	読みやすいようにスペースとか改行がされている
slim minified	機能限定（Ajaxやアニメなどが削られてる）	ファイルサイズを削るためにスペースとか改行が削られている

slimが生まれた背景としては、
次の項で説明するAjaxがFetch APIというものに置き換わっていることと、
CSS3でアニメーションが便利になったことによります。
要はJQueryの代替手段が出来たということですね。
≫参考：Fetchを使う
≫参考：CSS3 アニメーション（使い方やサンプル）

あと、（現時点で）JQueryはバージョンが1、2、3の3種類ありますが、
IE8などの古いブラウザで動かしたい場合はVer.1。
そこそこの互換性を残しつつ高速に動かしたい場合はVer.2。
より高速かつ最新機能を取り込みたい場合はVer.3を選べばよいみたいです。

これらを自前のJavaScriptで実装しようとすると、
古いブラウザ用の処理を実装しなければならないので大変ですが、
JQueryを使うことでブラウザのバージョンなどを意識しなくてよい
（JQueryライブラリ側で隠蔽してくれている）そうです。

WEBの世界を変えたAjax

AjaxとはAsynchronous JavaScript + XMLの略語だそうです。
Ajaxを利用したサービスの代表はGoogleMapです。
Ajaxを使わない場合、
ページのコンテンツをUPDATEするときにページ全体を取り直す必要があり
DOMを作り直さなければならないため負荷が高いのですが、
Ajaxを使うとJ
avaScriptのXHR（XML Http Request）というオブジェクトを使って
サーバと通信ができ、JavaScriptがDOMを更新できるため、
ページ全体の更新が要りません
これによりGoogleMapなどのリアルタイム性があるアプリを構築できます。
（Ajaxについては詳しく別の記事に書こうと思うので、
本記事ではこのくらいに留めておきます）。