Webデザイン学科
授業資料

2022前期

2022後期

About

JavaScript演習
非同期通信解説とPOSTMAN活用

概要解説

非同期通信を使った Web サイトシステムが普及してきました。
気象庁の天気予報 API から値を取得する方法も非同期通信を利用します。
非同期通信の仕組みの理解と、天気予報 API を活用した作品制作を行います。

内容

  • JavaScript クイズ ③
  • 非同期通信（Ajax)
  • POSTMAN
  • WS1（前期 4 月）自己評価アンケート

JavaScript クイズ

15 分以内に回答して、送信してください。

授業資料

同期と非同期

HTTP とは

URL をリクエストして、Web ブラウザに表示されるまでの短時間に、様々なやりとりがされています。
この様々なやりとりがされる HTTP 通信することを同期と言います。

XMLHttpRequest

XMLHttpRequest という JavaScript の組み込みオブジェクトを利用します。
XMLHttpRequest とは、ブラウザが行う HTTP 通信を、JavaScript から非同期で行うことができるインターフェースです。
XMLHttpRequest では非同期で HTTP 通信が行えるため、通信中でもブラウザがロックされません。
そのため、ユーザーの操作を妨げることなく、ブラウザとサーバー間でデータの送受信を行えます。
Ajax(Asynchronous JavaScript And XML)  というのは、この XMLHttpRequest を使って非同期で HTTP 通信を行い、そのレスポンスを元に処理を行う一連の技術の総称です。

Ajax による HTML の読み込み

Ajax で HTML を読み込みます。
「ajax」フォルダ内に info.html を作成します。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8" />
		<title>お知らせ</title>
	</head>
	<body>
		<p>4/29～5/6まで閉館日です。</p>
	</body>
</html>

同じように「ajax」フォルダ内に load.html を作成します。
MAMP の Document Root の中に「ajax」フォルダをおきます。
VS Code の拡張機能（プラグイン）Live server でもいいのですが、自動でリロードされてしまいますので、今回は MAMP を利用します。

<iframe src="./info.html" frameborder="0"></iframe>
<div id="text"></div>
<button id="reload">再読み込み（リロード）</button>
<button id="load">再読み込み（非同期）</button>

<script>
	function htmlload() {
		let xhr = new XMLHttpRequest();
		xhr.addEventListener('load', function () {
			document.querySelector('#text').innerHTML = xhr.responseXML.body.innerHTML;
		});
		xhr.open('GET', 'info.html');
		xhr.responseType = 'document';
		xhr.send();
	}

	htmlload();
</script>

同期と非同期の違い

同期（リロード）と非同期の動作の違いを体験してみます。
load.html を書き換えます。

htmlload();
document.querySelector('#reload').addEventListener('click', function () {
	//リロード
	location.reload();
});
document.querySelector('#load').addEventListener('click', function () {
	//非同期 ※関数の実行をコピペ。
	htmlload();
});

ブラウザでリロードして、エラーがないか確認します。
info.html を書き換えて、保存します。
今回は、なにもせずブラウザに画面を移してください。

<ul>
	<li class="newyear">オンライン授業を開催します。</li>
	<li>HTMLの検定があります。</li>
</ul>

ここで「再読み込み（非同期）」ボタンを押します。
XMLHttpRequest で読み込まれた部分が更新されますが、iframe 部分は変更されません。
リロードすると同期して、画面が変更されます。

jQuery で Ajax

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
	//東海4県のコード番号をオブジェクトの配列にしておきます。
	const codeNums = [{ 愛知県: 23 }, { 岐阜県: 21 }, { 三重県: 24 }, { 静岡県: 22 }];

	//天気予報概要
	const url = `https://www.jma.go.jp/bosai/forecast/data/overview_forecast/${codeNums[0]['愛知県']}0000.json`;

	$.ajax({
		url: url,
		dataType: 'json'
	}).done(function (data) {
		console.log(data);
	});

	//天気予報（三日・週間）
	const weekUrl = `https://www.jma.go.jp/bosai/forecast/data/forecast/${codeNums[0]['愛知県']}0000.json`;

	$.ajax({
		url: weekUrl,
		dataType: 'json'
	}).done(function (data) {
		console.log(data);
	});
</script>

axios で Ajax

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
	//東海4県のコード番号をオブジェクトの配列にしておきます。
	const codeNums = [{ 愛知県: 23 }, { 岐阜県: 21 }, { 三重県: 24 }, { 静岡県: 22 }];

	//天気予報概要
	const url = `https://www.jma.go.jp/bosai/forecast/data/overview_forecast/${codeNums[0]['愛知県']}0000.json`;

	axios.get(url).then(function (response) {
		console.log(response.data);
	});

	//天気予報（三日・週間）
	const weekUrl = `https://www.jma.go.jp/bosai/forecast/data/forecast/${codeNums[0]['愛知県']}0000.json`;

	axios.get(weekUrl).then(function (response) {
		console.log(response.data);
	});
</script>

こうやって、jQuery と axios を紹介しましたが、fetch()と比較してそれほど大きな差はありません。
jQuery は、他の DOM 操作やアニメーションなども利用する場合、axios は、node.js を使う場合に使ってみましょう。

POSTMAN

Postman は、Web API のテストクライアントサービスのひとつです。
色々なクライアントの動きをテストできるようスクリプト拡張や、テストスイートシナリオの作成などの機能があります。
アプリ版とWeb サイト版があり、どちらを利用しても構いません。

アカウント作成とログイン

Web サイト版で解説します。
アカウントは、Google アカウントでログインできます。

  1. ログインをすると HOME が表示されます。
    メニューの Workspace で「Create Workspace」をクリックします。
    postman手順1
  2. 新しい Workspace の名前と説明を明記します。
    postman手順2
  3. Workspace 画面で新しい接続先を設定するために「New」を押します。
    postman手順3
  4. Ajax は HTTP Request を利用していますので「HTTP Request」をクリックします。
    postman手順4
  5. エンドポイントを入力します。
    今回は天気の概要のエンドポイントhttps://www.jma.go.jp/bosai/forecast/data/overview_forecast/230000.jsonを入力して、Send（送信）を押します。
    postman手順5 返ってきた json が表示されます。Save で保存しておくことも可能です。
  6. ソースコード</>ボタンを押すと、各プログラミング言語での接続コードが表示されます。
    コピペするだけで利用ができます。
    postman手順6 認証機能の設定や確認もできます。

参考資料

授業資料にある通り、WordPress を API として利用することもできます。

自己評価アンケート

2022-04-26
Hideo kawaguchi