JavaScript

AJAXを使用してアプリケーションを作成してみる➀

ターミナルから新たなフォルダ、Appを作成します。

フォルダapp内にHTMLファイルを作成

index.html

<h1>地域選択</h1>
<div id="areaSelector">
<select class="prefectures"></select>
<select class="cities"></select>
</div>
<script src="main.js"></script>

次に都道府県のJSONを作成してみます。

city.json

[
{
"code":"001",
"name":"北海道"
},
{
"code":"002",
"name":"東京都"
},
{
"code":"003",
"name":"大阪府"
}
]

次はJavaScriptのコードを作成していきます。

main.js

async function getPrefs(){
const prefResponse = await fetch(city.json);
return await prefResponse.json();
}

async function displayPrefs(){
const result = await getPrefs();
console.log(result);
}
displayPrefs();

フォルダapp内に3つのファイルが用意できました。

では、コマンドプロンプトからhttp-serverを起動し、そこに表示されたhttp://127.0.0.1:8080にapp/index.htmlを追記してアドレスバーに入れてみましょう。

そして開発者ツールを開いて確認してみましょう。

下記のようにJSONの都道府県の情報が表示されていることを確認してみましょう。

JSONからoptionタグを生成

次は取得したJSONからoptionタグを生成し、セレクトボックスに反映させる作業をしてみましょう。

main.js

const rootElm = document.getElementById('areaSelector');

async function getPrefs(){
const prefResponse = await fetch('city.json');
return await prefResponse.json();
}

async function updatePref(){
const prefs = await getPrefs()
createPrefOptionsHtml(prefs)
}
function createPrefOptionsHtml(prefs){
const optionStrs = [];
for(const pref of prefs){
optionStrs.push(`
<option name="${pref.name}" value="${pref.code}")>
${pref.name}
</option>
`);
}
const prefSelectorElm = rootElm.querySelector('.prefectures');
prefSelectorElm.innerHTML = optionStrs.join('');
}
updatePref();

解説

const rootElm = document.getElementById('areaSelector');	都道府県のセレクトボックスを格納する要素を取得。
async function getPrefs(){	getPrefsという関数を定義してます。
const prefResponse = await fetch('city.json');	fetchメソッドを使いサーバーへ通信してレスポンスを受け取ります。それを変数prefResponseへ代入しています。
return await prefResponse.json(); }	jsonメソッドの実行結果をreturnで返します。prefResponse.jsonはレスポンスに含まれるJSONをObjectに変換します。
async function updatePref(){	updatePrefという関数を定義してます。ここでは先でのサーバーから取得したJSONでoptionタグを生成し、セレクトボックスへ反映させます。
const prefs = await getPrefs()	先のgetPrefsという関数の内容を変数prefsに代入しています。
createPrefOptionsHtml(prefs)	このあとの関数を反映させてます。
function createPrefOptionsHtml(prefs){	createPrefOptionsHtmlという関数を定義してます。引数の受け取ったprefsの中身は都道府県の情報（object）が格納された配列です。
const optionStrs = [];	optionタグの文字列を追加するための空の配列を作り、変数optionStrsに代入しています。
for(const pref of prefs){	for文でpref内の要素を一つずつ取り出します。
optionStrs.push(`	空の配列にpushで追加させます。
option name="${pref.name}" value="${pref.code}")	optionタグに追加させる内容です。
${pref.name}	optionタグに追加させる内容です。
const prefSelectorElm = rootElm.querySelector('.prefectures');	rootElm（id=areaSelector）の中のclass=prefecturesを取得します。それを変数prefSelectorElmに代入しています。
prefSelectorElm.innerHTML = optionStrs.join('');	joinメソッドで文字列化し、セレクトボックスの子要素となるようにprefSelectorElm.innerHTMLに代入しています。
updatePref();	updatePref関数の実行です。

では、コマンドプロンプトからhttp-serverを起動し、そこに表示されたhttp://127.0.0.1:8080にapp/index.htmlを追記してアドレスバーに入れてみましょう。

現時点でのJSONのデーターの内容が反映されました。

お疲れ様でした。今回はここまでにしましょう。ゆっくりマイペースで継続しましょう。

わからないことはプロフェッショナルから学ぶのが一番 | The best way to learn what you don't know is from professionals.

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー