【初心者向け】JavaScript無料学習（後編） | ペイヴメントのエンジニア塾

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

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

エンジニア

JavaScriptの基礎を知りたい。

こんな悩みを解決します。

環境

Windows10 Home（64bit）1903

DOM操作とイベント処理の基本
JQueryによる開発効率向上
WEBの世界を変えたAjax
まとめ
ITスキルを身につけると条件の良い転職が可能になる

短時間で読めるように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を使うとJavaScriptのXHR（XML Http Request）というオブジェクトを使ってサーバと通信ができ、JavaScriptがDOMを更新できるため、ページ全体の更新が要りません　これによりGoogleMapなどのリアルタイム性があるアプリを構築できます。（Ajaxについては詳しく別の記事に書こうと思うので、本記事ではこのくらいに留めておきます）。