最新Ajaxを理解しよう！JSON jQuery Axios Vue.js で非同期通信を体験！JavaScriptの基礎を始める
JavaScriptを学習していくうちに、Ajax（非同期通信）という学習の壁にぶつかりますよね？
学習ハードルを上げている理由としては、単純にAjax（非同期通信）ができる環境を整える必要があるため、触れる機会が減少する。
もしくは、ブラウザでダイレクトに動きを感じられるJavaScriptのコーディングとかけ離れてしまっている。
これらの理由からAjaxを敬遠していると考えられます。
ですが、基本を知っておけば「分かった！」につながると信じて分かりやすく実践的に解説いたします。
Ajax（非同期通信）とは？
AさんとBさんが2人働いているとします。
Aさんに沢山のタスクが来ました。
そこで、Bさんにタスクの一部を手伝ってもらうことにします。
ここからがAjax（非同期通信）と同期通信の説明が始まります。
Ajax（非同期通信）は近年のトレンドに従い、非同期通信と述べていきます。
非同期通信なら同時進行でタスクが終わる
Aさんがタスクをこなしているとします。
Bさんにタスクを手伝ってもらうのですが、非同期通信の場合、AさんとBさんが同時進行でタスクを進行しているという感じです。
つまり、Aさんがタスクを完了した頃にはBさんのタスクも終わっていて、完了！
という流れになります。
逆に同期通信とは？
同期通信は交互にタスクが行われる
AさんがBさんにタスクを渡します。
Bさんに渡したタスクが終わるのを待ってからAさんがタスクを進めます。
もしくは、Aさんが一部を進めてからBさんに渡して、Bさんのタスクが完了したらAさんが残りのタスクを完了させるということでもOKです。
つまり、同時進行では無いということです。
インターネット通信の世界では、
同期通信=リクエストを出してレスポンスが返ってくるまで待つ
非同期通信=リクエストした後のレスポンスを待たずに処理を進める
という概念となっています。
Ajaxと言われている理由
AjaxはAsynchronous JavaScript + XMLの略です。
Webブラウザ上で動作するJavaScriptでサーバからXMLデータを取得し、取得したデータをコンテンツに動的に反映するという定義がされています。
近年のトレンドとしては、XMLデータでは無く、JSONデータを使っています。
そして、Ajaxは非同期通信と言われるようになったのも、トレンドです。
Ajax（非同期通信）が凄いと言われている理由
今までの、ホームページなどは複数ページに渡って処理を完了させていました。
非同期通信を行うことで、1ページ内で表示の切り替えができるのです。
Web上で非同期通信が行える技術は近年のトレンドですよね。
例えば、AmazonPrimeやスプレッドシート、Twitterなども非同期通信が使われています。
ページ遷移を行わなくても、ヌルヌルサクサクと画面を自由に動かせます。
今回は、ページ内で非同期通信を行なって楽しんでみましょう！
Ajax（非同期通信）ができる環境を簡単構築！
え？htmlファイルにJavaScriptを記述するだけでは？
と思いがちですが、Ajax（非同期通信）をするためには必要な環境を用意しなければなりません。
ホームページをローカル環境で表示しながらコーディングを進めるかと思いますが、非同期通信はブラウザ上で通信が行える環境でなければ動きません。
そこで、非同期通信を簡単に行える環境を作ってしまいましょう！
Visual Studio Codeで楽々環境構築
Visual Studio Codeというテキストエディタを使うとスムーズに環境が作れます！
テキストエディタ紛争が起こっているので、AtomやDreamWeaverなどの好き好みがあるかと思いますが、ここでは便利なVScodeを使いましょう！
Visual Studio Codeをダウンロードしたら、拡張機能『Live Server』をインストールします。
Visual Studio Codeの画面下に『Go Live』が表示されます。
これだけで準備OK！
index.htmlファイルを作成しよう！
練習用のファイルとしてindex.htmlを作成します。
練習用ファイルを作成したら、いつものHTML5の記述を行います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax</title>
</head>
<body>
</body>
</html>非同期通信用のJSONデータを用意！
XMLデータはまだ使われているサービスもありますが、可読性の高さからJSONデータを用いることがトレンドになっています。
JSONデータは多くのサービスで現在もっとも使われている非同期通信用データ形式となっています。
JSONデータは作れますが、今回は練習用に最もスピーディーに用意します。
JSON GENERATORを使う！
https://www.json-generator.com/ (opens in a new tab)
こちらのサービスを使うことで、JSONデータの練習用が速攻で手に入ります。
開いた際に表示されているデータで画面上のGenerateを押すとJSONデータが出力されます。
出力されたJSONデータをコピペしてtest.jsonというファイル名として保存します。
超長いですが、以下が練習用JSONデータとなります。
test.json
\[
{
"\_id": "5f401f4a089e145df9a018bd",
"index": 0,
"guid": "77be13be-d191-45a0-ae16-133742a156c7",
"isActive": false,
"balance": "$3,604.10",
"picture": "http://placehold.it/32x32",
"age": 21,
"eyeColor": "blue",
"name": "Jarvis Bright",
"gender": "male",
"company": "REPETWIRE",
"email": "jarvisbright@repetwire.com",
"phone": "+1 (931) 450-2486",
"address": "421 Baltic Street, Utting, West Virginia, 7180",
"about": "Exercitation Lorem consectetur labore excepteur voluptate do aliqua amet nostrud sunt enim enim magna cillum. Ad fugiat officia ut commodo velit velit proident. Enim ut sit excepteur veniam esse esse aliqua qui commodo labore exercitation quis occaecat incididunt. Sint amet cupidatat eiusmod nisi consequat mollit quis esse veniam quis irure culpa culpa. Sint qui pariatur eiusmod esse Lorem eu.\\r\\n",
"registered": "2015-11-16T12:59:00 -09:00",
"latitude": -55.867345,
"longitude": -10.125661,
"tags": \[
"nisi",
"commodo",
"est",
"ut",
"velit",
"nulla",
"cillum"
\],
"friends": \[
{
"id": 0,
"name": "Rosalind Cleveland"
},
{
"id": 1,
"name": "Joyce Coffey"
},
{
"id": 2,
"name": "Wilcox Frazier"
}
\],
"greeting": "Hello, Jarvis Bright! You have 3 unread messages.",
"favoriteFruit": "banana"
},
{
"\_id": "5f401f4a1357792eb236e1d6",
"index": 1,
"guid": "71b221b1-2ff2-4d6d-a912-7c2482f8ab8c",
"isActive": false,
"balance": "$1,291.02",
"picture": "http://placehold.it/32x32",
"age": 30,
"eyeColor": "brown",
"name": "Laverne Scott",
"gender": "female",
"company": "EQUICOM",
"email": "lavernescott@equicom.com",
"phone": "+1 (889) 503-2547",
"address": "919 Morgan Avenue, Dundee, Vermont, 961",
"about": "Nulla fugiat adipisicing minim cillum minim nulla officia. Ea duis velit ex aute ipsum. Ea velit tempor consequat fugiat laboris incididunt culpa ad pariatur incididunt id laboris. Irure tempor aliquip aliquip tempor deserunt excepteur culpa ullamco irure adipisicing qui amet qui cupidatat. Ullamco dolore officia dolore incididunt ex. Eiusmod qui commodo culpa elit incididunt enim esse duis enim quis Lorem commodo aliqua nulla. Incididunt occaecat ullamco cupidatat ut eiusmod ut veniam.\\r\\n",
"registered": "2018-09-28T07:23:54 -09:00",
"latitude": 44.605092,
"longitude": 27.171018,
"tags": \[
"fugiat",
"amet",
"tempor",
"nostrud",
"minim",
"proident",
"pariatur"
\],
"friends": \[
{
"id": 0,
"name": "Beth Duke"
},
{
"id": 1,
"name": "Levy Villarreal"
},
{
"id": 2,
"name": "Mccall Norton"
}
\],
"greeting": "Hello, Laverne Scott! You have 6 unread messages.",
"favoriteFruit": "banana"
},
{
"\_id": "5f401f4a6dc32d9d8aba81b6",
"index": 2,
"guid": "b3b26cff-2114-4aa3-94c3-7b63611368fb",
"isActive": true,
"balance": "$1,574.10",
"picture": "http://placehold.it/32x32",
"age": 25,
"eyeColor": "blue",
"name": "Byers Lynch",
"gender": "male",
"company": "CIPROMOX",
"email": "byerslynch@cipromox.com",
"phone": "+1 (981) 435-3700",
"address": "616 Doscher Street, Freelandville, Kansas, 6578",
"about": "Qui laboris ullamco eu non eu id id. Nulla magna minim dolore excepteur excepteur anim aliqua dolor. Laborum tempor mollit anim qui consequat mollit aliquip.\\r\\n",
"registered": "2014-09-12T08:04:17 -09:00",
"latitude": 16.272286,
"longitude": 172.434131,
"tags": \[
"qui",
"aute",
"minim",
"ullamco",
"culpa",
"duis",
"duis"
\],
"friends": \[
{
"id": 0,
"name": "Hubbard Key"
},
{
"id": 1,
"name": "Giles Garner"
},
{
"id": 2,
"name": "Allen Kim"
}
\],
"greeting": "Hello, Byers Lynch! You have 9 unread messages.",
"favoriteFruit": "apple"
},
{
"\_id": "5f401f4af0b54fe330018e28",
"index": 3,
"guid": "c2861b3b-4223-4c26-bfdc-51df904a7350",
"isActive": false,
"balance": "$3,792.35",
"picture": "http://placehold.it/32x32",
"age": 36,
"eyeColor": "brown",
"name": "Marion Crawford",
"gender": "female",
"company": "REALMO",
"email": "marioncrawford@realmo.com",
"phone": "+1 (810) 525-3305",
"address": "175 Aitken Place, Sharon, Illinois, 3673",
"about": "Aute consectetur id nostrud dolore laboris amet veniam Lorem ut aute enim id. Magna do est excepteur adipisicing nostrud duis ullamco. Eu mollit ut fugiat exercitation eiusmod. Nulla tempor officia officia sint.\\r\\n",
"registered": "2015-04-28T09:09:12 -09:00",
"latitude": 0.168258,
"longitude": -106.586759,
"tags": \[
"nostrud",
"nostrud",
"sunt",
"Lorem",
"ipsum",
"dolore",
"veniam"
\],
"friends": \[
{
"id": 0,
"name": "Connie Kelley"
},
{
"id": 1,
"name": "Vicky Vinson"
},
{
"id": 2,
"name": "Alexandra Flores"
}
\],
"greeting": "Hello, Marion Crawford! You have 4 unread messages.",
"favoriteFruit": "banana"
},
{
"\_id": "5f401f4ab2ecdee4b3f9d0a3",
"index": 4,
"guid": "8dd7224d-2cf8-4e89-b135-56d85c9291f0",
"isActive": false,
"balance": "$3,956.33",
"picture": "http://placehold.it/32x32",
"age": 33,
"eyeColor": "blue",
"name": "Gwen Macias",
"gender": "female",
"company": "ACUMENTOR",
"email": "gwenmacias@acumentor.com",
"phone": "+1 (802) 490-2204",
"address": "492 Bulwer Place, Carlton, New York, 195",
"about": "Qui irure qui ad veniam occaecat elit amet. Lorem officia do ea dolor excepteur ullamco id irure nulla mollit excepteur reprehenderit adipisicing. Mollit est et occaecat tempor aute nisi cupidatat fugiat et id enim sit. Minim tempor proident do commodo cillum consequat sint. Ad anim aute est labore eu minim enim qui aute quis exercitation ad. Tempor reprehenderit ut veniam pariatur deserunt. Deserunt consequat laborum laboris consectetur.\\r\\n",
"registered": "2016-06-22T10:19:14 -09:00",
"latitude": -54.140298,
"longitude": -175.704844,
"tags": \[
"anim",
"quis",
"officia",
"labore",
"cillum",
"ut",
"nostrud"
\],
"friends": \[
{
"id": 0,
"name": "Sears Ochoa"
},
{
"id": 1,
"name": "Sweeney Wolfe"
},
{
"id": 2,
"name": "Price Roach"
}
\],
"greeting": "Hello, Gwen Macias! You have 8 unread messages.",
"favoriteFruit": "banana"
}
\]では、このJSONデータから最初の電話番号を取り出します。
JSONデータから値を出力！
まさしく、非同期通信の基礎をこれから行います。
この基礎が押さえられたら、応用をすることで様々な非同期通信ができるようになります。
試しに以下のキー『phone』の『+1 (931) 450-2486』をブラウザに出力してみます。
"phone": "+1 (931) 450-2486",先程HTMLファイルを作成したbodyタグ内に以下を記述します。
<div id="news"></div>
<script>
var ajax = new XMLHttpRequest();
ajax.open('GET', 'test.json', true);
ajax.onload = function(e) {
if (ajax.readyState === 4) {
if (ajax.status === 200) {
var json = JSON.parse(ajax.responseText);
console.log(json);
var html = '<ul>';
html += '<li>' + json\[0\]\["phone"\] + '</li>';
html += '</ul>';
document.getElementById('news').innerHTML = html;
}
}
}
ajax.send(null);
</script>ここまで記述ができたら、Visual Studio Codeの拡張機能『Go Live』を押して、ブラウザで確認してみましょう！
すると、liタグに囲まれた電話番号が表示されるかと思います！
コードの一つ一つを理解してみよう！
出力する箇所は
<div id="news"></div>divタグ内にテキストを出力する記述をしていきます。
JavaScriptはこうした書き方が一般的です。
非同期通信を行うためのおまじない。
var ajax = new XMLHttpRequest();非同期通信を行うためには、新しいオブジェクトを生成します。
JavaScript公式ドキュメント
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest (opens in a new tab)
ここで、用意していた練習用JSONデータのtest.jsonを呼び込みます。
ajax.open('GET', 'test.json', true);
JavaScript公式ドキュメント
https://developer.mozilla.org/ja/docs/Web/Guide/AJAX/Getting_Started (opens in a new tab)
『もし、ロードを完了したら』という記述をします。
if (ajax.readyState === 4) {}JavaScript公式ドキュメント
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/readyState (opens in a new tab)
次に。ステータス条件を追加します。
ステータス番号を返します. (例えば "Not Found" を示す "404" か "OK" を示す "200" です.)
if (ajax.status === 200) {}データを通信する際には以下のように、JSONデータとして整頓します。
var json = JSON.parse(ajax.responseText);
JSONデータを変数に入れて、そこから取り出したいデータを指定します！
json\[0\]\["phone"\] ブラウザ上にJSONデータが表示されます。
JSONを使った非同期通信の基礎完成です！
jQueryによる記述も！
$.ajax({
オプション
})
.then(成功時の処理, 失敗時の処理);以前からAjaxが行われていたjQueryによる記述方法。
vanilla JSでAjaxを記述した今回は、冗長化しやすいことも多いのですが、jQueryで記述することによってclassやidなどの指定が簡単。
しかし、トレンドからjQueryは引退をしようとしています。
というのも、jQueryを使うには大量のソースコードを読み込むことになるため、現在のスピードを重視したWeb制作においては要件が難しくなってくるからです。
とはいえ、jQueryはとても便利なので、適材適所で取り入れていくことでプログラミングしやすいですね！
最近はAXIOS Vue.jsがトレンド！
CDNによる読み込み、またはnpmによるインストールでパッケージを導入し、大きめな規模の開発では、AXIOS Vue.jsの組み合わせがトレンドになっています。
今回は、簡単なAjax（非同期通信）の基礎を味わっていただきました。
ここまでは、普通にデータを出力しただけですね。
さらに、JavaScriptを用いてボタンを押したらJSONからデータを出力するという記述をすると、非同期通信の面白さが味わえます。
次回は、もっと掘り下げて解説できたらと思います。