😊

VanillaJSでAjax通信をしてみよう。(イベントハンドラー→ボタン実装編)

2022/10/11に公開

HTML

introduction

はじめに

以前の記事で、Ajax通信の基礎を語った。そこから実際にボタンを使ってAjax通信をしようやないか！ってのが今回の話題。んで、さぁボタンのイベント書こうぜ^^ってなった時に、自分がコピペ人間であったことに気づく。「え、ボタンのfunction全然かけへんねんけど、、、。」いやほんまに、以前の記事で
・Javascriptは使ったことがあるよ、ハンバーガーメニューとか実装できるよ、のレベル(てかそのレベルの実装出来ひん人がajaxの構造知りたいってどんなニーズやねん)
とかいうゴリゴリに傲慢なゴリラ発言をしたわけなんですけど、僕がそのニーズにどストライクの人間やったってことで…。初心に戻ろうやないかい！ってわけで、だいぶ初心者によった感じの内容になってます。ただajax通信に関しては記事書いたくらいには詳しいので、その辺は記事読んでもろて^^でいきますね。

対象

・仕事でAjaxを使う必要があって、でも基本コピペで成り立ってた、、、っていう俺みたいなやつ。
・ちょっとjsかじったけど、ajaxをVanillaJSでかけるくらいに強くなりたいっていう孫悟空みたいなやつ。

前提知識(経験)

・jsとか、jqueryとか使ったことあって、ハンバーガーメニューとかは50%以上コピペだけど実装したことあるよってレベル。

ボタンにイベントをつける

イベントとは

MDN公式ドキュメントには、イベントとは、
あなたがプログラムを書いているシステムで生じた動作、出来事を指す
と記述されている。例えば、ユーザーがクリックした、ユーザーがhoverしたなどだ。JSの面白い所は、そのそれぞれの動作に対して、プログラム側からリアクションを取ることができる。これがJSが動的な言語であるとよばれる所以であろう。

イベントハンドラーとイベントリスナー

イベントを行った際に、実行されるコードのブロックのことをイベントハンドラー event handlerと呼ぶ。また、イベントハンドラーをイベント発火時に実行されるようすることをイベントハンドラーを登録するという。イベントリスナーevent listerもほとんど同じように使われるが、イベントリスナーはイベントの発生を監視し、イベントハンドラーは発生したイベントの応答として動作するコードとして、一応区別はなされているらしい。

どんな動作？

じゃあ動作を見ようじゃないか。ということで、MDN公式ドキュメントを丸パクリでやってみる(というかこの章の内容はドキュメントのパクリであることをCOしておこう)。

index.html

<body>
    <button>Change color</button>
    <script>
        const btn = document.querySelector('button');

        function random(number) {
        return Math.floor(Math.random() * (number+1));
        }

        btn.onclick = function() {
        const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
        document.body.style.backgroundColor = rndCol;
        }
    </script>
</body>

これを実行すると、なんとbackground-colorが変わるではないか！！すごイイ！！ってなってるところに初心者みが漏れて恥ずかしい。いや記事を書くのだから気にしない！！！
ざっくりコードを説明しておくと、Math.ramdomメソッドで一旦0~1の数字の中でランダムに取得して、Math.floorで小数点以下を切り捨てる(数学やってるやつはガウス記号つけたんだって言ったほうがわかりやすいんじゃないか、しらんけど)。
その関数を用いて、buttonに対してonclickイベントハンドラーを登録してランダムにbodyのbackground-colorを変更しているってことだな。

イベントハンドラーとイベントリスナーの一覧

イベントハンドラーの一覧については、以下のサイトが非常に見やすい。on〜系が全てイベントハンドラーであることは伝わるだろうか(初めて知ったんだけど、、、)。

また、イベントリスナーの一覧については、以下のサイトを見よう(他にはQuitaもあったが、、まぁSEOがよく出来ているから「イベントリスナー　一覧」で一番上に表示されたんだろうな、、、)。

これはAddEventListenerで引数に使うことができる。

ま、ボタンいくつか作るか

実際の使われているところを見ないとわかんねえなってことで、他にも2つほど作ってみる(丸パクリ！！)

index2.html

<button>Click</button>
    <script>
        const button = document.querySelector('button');

        button.addEventListener('click', event => {
        button.textContent = `Click count: ${event.detail}`;
        });
    </script>
</body>

index3.html

<input type="button" value="button" onclick="buttonClick()">

<script>
function buttonClick(){
    alert('Click');
}
</script>

index4.html

<input type="button" value="button" id="xxx">

<script>
function butotnClick(){
    alert('Click');
}

let button = document.getElementById('xxx');
button.addEventListener('click', butotnClick);
</script>

インラインイベントハンドラーについて

あ、ちなみに、index3.htmlの記述方法についてはあんまりよろしくないらしい。htmlにjsを共存させる書き方は、htmlにcssを共存させるのと同じくらい意味がわかんないのでっていう意味らしい(タグの属性書くところにstyleを書くのは良くないよね)。

ほな、ボタンに実装していくで

ajax通信に関しては既に以下の記事で紹介してるで。みたいって人は見るんや。今すぐに。ほら。

ボタンへの実装はやり方知らなかったんで、jqueryで書かれている記事をvanilla化して語ろうやって戦略をとってこのサイトを参考にさせてもらいました。

index-btn.html

<body>
    <ul id="sample01"></ul>
    <p><a href="#" id="button01">ボタン</a></p>
<script>
    const ajax = new XMLHttpRequest();
    const sample01 = document.getElementById('sample01');
    const button = document.getElementById('button01');
    button.addEventListener('click', e => {
        ajax.open("get", "./external.html",true);
	ajax.send();
        ajax.addEventListener("load", function(){ 
        if(this.readyState===4){
            if(this.status === 200){
                    sample01.innerHTML = ajax.responseText;
            }
        }
        });
        
    })
</script>
</body>

めちゃくちゃ楽にいけるくない？Ajaxを使えることと、ボタンの実装方法の知識は完全に独立してる。でも、それぞれを組み合わせるとこんな面白いもんができるんですね(おもろいと思ってんの俺だけ？)。
んで、ajaxに用いるオブジェクトの内部構造も少し明らかになりましたね。上のコードでやってんのは、まずXHRオブジェクトを新規に作成する→関数内｛open()を用いてajaxでデータ取得する情報を取得する→send()を用いて通信→とってきた情報をfunctionでイベントリアクションとして反映するってやつですね。
ちなみにopenとsendに関してはこの順を逆にするとエラーが出ます。sendはopenで住所特定しないとどこにもいけないクロネコヤマトの宅急便みたいなやつなんですね^^。また、イベントリスナーに関してはclickイベントリスナーの関数内であればどこにぶち込んでもいいみたいです。イベントリスナーはイベントを監視するっていう感覚がよく見えるものですね。

最後に

Ajaxでボタンを実装することが出来ました。これで自分の仕事に必要な内容が揃ったので、一旦これで行こうと思います。やっぱり記事を書くことによって理解が深まりますね。みなさんも、情報の正確性を無視して一回書いてみてはいかがでしょうか。(間違いがわかったり指摘されたら変えろよ。みんなのために。)