最新！JavaScript入門講座非同期通信/Ajaxをコード付きでわかりやすく解説

非同期通信/AjaxはJavaScriptやDOMを学ぶ上で、絶対に外すことができない重要な概念です。前回の解説では、コードを用いず、概念をわかりやすく説明しました。
しかし、概念だけ説明しても実際にどうコードに書き起こすのかわからないと思います。そこで、今回は、非同期通信をコードを用いてわかりやすく解説していきます。

本記事のペルソナ

JavaScript初学者の方
DOMを学びたい方/学んでいる方
非同期通信/Ajaxについて学びたい方
Webアプリケーションを作りたい方

非同期通信の解説
まとめ
参考文献

非同期通信の解説

では、解説していきます。
非同期通信/Ajaxがどういったものなのか、概念については下記の記事でわかりやすく解説しています。本記事はあくまで、コードを使っているものですので、下記の記事を前提に解説していきます。

JavaScriptは主にWebサイトに使われているものですが、その中でも最も重要であり、必ず理解しておく必要がある概念があります。それが、非同期通信、Ajaxです。JavaScriptを学ぶのなら、これは必修事項です。Webアプ...

外部のAPIを使う

まず最初に、この講座で使用するAPIを使用するためにURLを取得します。
APIというのは、Application Programming Interfacesの略です。

Application Programming Interfaces (APIs) は、開発者が複雑な機能をより簡単に作成できるよう、プログラミング言語から提供される構造です。複雑なコードを抽象化し、それにかわる簡潔な構文を提供します。
https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction

MDNでは上記のように定義されています。
今回使うのは、APIの中でも、サードパーティーAPIを使用します。

APIについてはここでは詳しく説明しませんが、ひとまず他のアプリケーションに様々な情報を渡してくれる橋みたいなもの、という認識でここはオッケーです。

サードパーティーAPIは様々なものがありますが、アカウント登録が必要であったり有料のものもあるので今回は無料かつ登録なしで使える天気APIを使います。

天気予報 API（livedoor 天気互換）

気象庁が配信している各地の天気予報を livedoor 天気互換の JSON データで返す API です。livedoor 天気 API の代替として利用できます。

天気APIのサイトは上記になります。
上記サイトからAPIのURLを持ってきます。

Ajaxの解説

APIを取得したところで、解説に入ります。

今回使う構文

const func = async()=>{
    const res = await fetch("URL");
}

今回新たに登場するのが、async, awaitになります。これらは非同期通信を行うための構文になります。この予約語は比較的最近のJavaScriptに導入された機能になります。

HTMLファイルとJavaScriptファイルを用意します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>JavaScript入門</title>
        <link type="text/css" href="" rel="stylesheet" />
        </script>
    </head>
    <body>
        <div id="div1">
            <div>
                <h1>お天気API</h1>
            </div>
            <div>
                <p>
                    <button id="js-btn1">フェッチ</button>
                </p>
            </div>
        </div>

        <script src="script.js"></script>
    </body>
</html>


const doc = document;
const btn1 = doc.getElementById("js-btn1");
const URL = "https://weather.tsukumijima.net/api/forecast/city/";


const HttpFetchAPI = async () => {
    try{
        const cityId = "016010";
        const res = await fetch(`${URL}${cityId}`);
        const resJson =  await res.json();
        console.log(`地点${cityId} : 札幌市の情報を取得しました`);
        console.log(resJson);
    }catch(err){
        console.error(err);
    }
}

btn1.addEventListener("click",HttpFetchAPI);

これは札幌市の天気情報を取得するプログラムになります。
APIのURLの最後に決まったIDを連結させることで様々な地域の天気情報を取得できます。皆さんで天気APIのサイトを見ながら、IDを変えてみたりしてください。

うまく情報を取ってくることができると、その情報をJSON形式にします。前に解説した、JSONがここで使われます。JSON形式にすることで、JavaScriptで扱いやすくなります。
ここまで、うまく処理が進むとコンソールに出力されるはずです。

そして、これがポイントですが、try構文で処理を囲みましょう。もし、APIから情報を取得する処理でエラーになってしまったとき、そこで処理が止まることはまずいです。
なので、エラーが起こった時の処理も追加する必要があります。

DOMを使ったAjaxの実装

では、先ほどの例を少し発展させてみましょう。
下記のようなファイルを準備してみてください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>JavaScript入門</title>
        <link type="text/css" href="" rel="stylesheet" />
        </script>
    </head>
    <body>
        <div id="div2">
            <div>
                <p>
                    <button id="js-btn2">フェッチ</button>
                </p>
            </div>
            <div id="div3">

            </div>
        </div>

        <script src="script.js"></script>
    </body>
</html>

const doc = document;

const URL = "https://weather.tsukumijima.net/api/forecast/city/";

const div3 = doc.getElementById("div3");
const btn2 = doc.getElementById("js-btn2");



const displayJsonData = (resJson) => {
    const param1 = doc.createElement("p");
    const param2 = doc.createElement("p");
    const loc = resJson.location;
    const weather = resJson.forecasts[0].detail;
    param1.textContent = `場所 : ${loc.area+" " + loc.city+" "+loc.district}`;
    div3.appendChild(param1);
    param2.textContent = `天気 : ${weather.weather}`;
    div3.appendChild(param2);
    console.log(resJson.location);
}

const displayBody = async () => {
    try{
        const cityId = "017010";
        const res = await fetch(`${URL}${cityId}`);
        const resJson =  await res.json();

        console.log(resJson);
        displayJsonData(resJson);
    }catch(err){
        console.error(err);
    }
}


btn2.addEventListener("click",displayBody);

このプログラムを実行してみてください。
ボタンを押すと、新たに文字が表示されるはずです。

これは先ほどのプログラムに加えて、取得した情報をHTMLに表示します。

displayJsonDataメソッドに渡され、DOMを用いて新たに要素を作成してすでにある要素の子要素として表示します。
これが基本的なAjaxの使い方になります。

これはAjaxでも基礎のなかの基礎になります。ご自身で、GoogleAPIやTwitterAPIなどを登録して使ってみたりしてください。