AJAXを使用してアプリケーションを作成してみる➁
市区町村の情報もセレクトボックスに反映させる
前回の「AJAXを使用してアプリケーションを作成してみる➀」の続きを行います。
まずはappファイル内に便宜的にcitiesというフォルダを作成します。
その次に市区町村のJSONファイルを作成していきます。 今回は以下のように３つのファイルを作成しました。
内容なこんな感じにしてみました。
それではJavaScriptを作っていきましょう。今回は結構長いので、大変ですが少しずつ学んでいきましょう。
| const rootElm = document.getElementById('areaSelector'); | HTMLでのid="areaSelector"を取得し、変数rootElmに代入しています。 |
| async function initAreaSelector() { await updatePref(); await updateCity(); } | 関数 initAreaSelectorを定義してます。asyncは後に出てくるawaitにおいて、それを呼び出している関数に付けます。そして後記している関数の内容を反映させます。 |
| async function getPrefs() { const prefResponse = await fetch('city.json'); return await prefResponse.json(); } | 関数getPrefsを定義してます。サーバーへの通信を行うfetchというメソッドを実行し、その結果を変数responseに代入しています。awaitをつけるのは、通信のような「待ち」が発生する処理につけます。fetchでのレスポンスとして受け取った情報をjsonメソッドでJSONをObjectに変換してます。 |
| async function getCities(prefCode) { const cityResponse = await fetch(`./cities/${prefCode}.json`); return await cityResponse.json(); } | 関数getCitiesを定義し、引数にprefCodeを設定。citiesフォルダの中の各jsonファイルの都道府県コード（prefCode）を取得し、変数cityResponseに代入しています。fetchでのレスポンスとして受け取った情報をjsonメソッドでJSONをObjectに変換してます。それを引数に返しています。 |
| async function updateCity() { const prefSelectorElm = rootElm.querySelector('.prefectures'); const cities = await getCities(prefSelectorElm.value); createCityOptionsHtml(cities); } | 関数updateCityを定義しています。変数にしたrootElm（id="areaSelector"）の中のclass="prefectures"を取得します。関数getCitiesを利用して市区町村を取得。後記する関数createCityOptionsHtml(cities)を呼び出してセレクトボックスにその内容を反映しています。 |
| 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(''); prefSelectorElm.addEventListener('change', (event) =>{ updateCity(); }); } | createPrefOptionsHtmlという関数を定義してます。引数の受け取ったprefsの中身は都道府県の情報（object）が格納された配列です。optionタグの文字列を追加するための空の配列を作り、変数optionStrsに代入しています。空の配列にpushで追加させます。後はoptionタグに追加させる内容を記述してます。 rootElm（id=areaSelector）の中のclass=prefecturesを取得します。それを変数prefSelectorElmに代入しています。joinメソッドで文字列化し、セレクトボックスの子要素となるようにprefSelectorElm.innerHTMLに代入しています。 セレクトボックスのchageイベントに関数updateCityを反映させて、都道府県を選択したタイミングで市区町村の内容が変わるようにしています。 |
| function createCityOptionsHtml(cities) { const optionStrs = []; for(const city of cities) { optionStrs.push(` <option name="${city.name}" value="${city.code}"> ${city.name} </option> `); } const citySelectorElm = rootElm.querySelector('.cities'); citySelectorElm.innerHTML = optionStrs.join(''); } | 関数createCityOptionsHtmlを定義して引数にcitiesをおいています。optionタグの文字列を追加するための空の配列を作り、変数optionStrsに代入しています。for文でcity内の要素を一つずつ取り出します。空の配列にpushで追加させます。optionタグに追加させる内容を書きます。 rootElm（id=areaSelector）の中のclass=citiesを取得します。それを変数citySelectorElmに代入しています。joinメソッドで文字列化し、セレクトボックスの子要素となるようにcitySelectorElm.innerHTMLに代入しています。 |
| initAreaSelector(); | 関数initAreaSelectorを実行させます。 |
結果、市区町村のデータを取得し、そして都道府県を選択したタイミングで市区町村の内容が変わるようにできました。
お疲れ様でした。今回はここまでにしましょう。ゆっくりマイペースで継続しましょう。
この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。
わからないことはプロフェッショナルから学ぶのが一番 | The best way to learn what you don't know is from professionals.
キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.
オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.
ぺージの先頭に戻る(Return to top of page)
©2020年9月 Challenge programming