住所を非同期処理で入力
今回は、JavaScriptを使って郵便番号を入力し、カーソルが離れたタイミングで自動的に住所が入力される仕組みを実装したので、その内容について説明します。
そもそも同期処理、非同期処理ってなに？
プログラミングを勉強していると、必ず耳にする「同期処理」と「非同期処理」という言葉ですが、これを理解するのは少し難しいかもしれません。私もまだ完全には理解できていない部分があります。
同期処理とは
- 同期処理とは、プログラムが上から順番に実行されることです。
例1
a = 1
print(a)
このコードでは、まず変数 a に 1 が代入され、その後 print(a) が実行されます。処理は1行目が完了してから次の行に進み、順番通りに実行されます。これがまさに同期的な処理です。
例２
count = 0
while count < 100:
print(count)
count += 1
このコードでは、count が 100 未満である限り、以下の処理が繰り返されます：
print(count) が実行されて、現在の count の値が表示されます。
count の値が 1 増えます（count += 1）。
これらは順番に実行され、print(count) が終了してから count += 1 が実行されます。ループ内で処理が1つずつ順番に行われ、非同期的に他の処理（別のタスク）は実行されないので、これはまさに同期的な処理です。
同期処理の特徴は、命令が上から順番に、順次実行されることです。
以上が同期処理についての説明になります！
非同期処理とは
ここからは、今回の本題である非同期処理について説明します。今回は、blurイベントを使用して、郵便番号を入力した後にカーソルが離れたタイミングで自動的に住所が入力される仕組みを説明します。
非同期処理とは、特定の処理を待たずに他の処理を並行して実行することです。
では、実際に実装したコードを見ていきましょう。以下は、郵便番号を入力し、カーソルが離れたタイミングで自動的に住所を取得する処理のコードです。
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("post-data").addEventListener("blur", function() {
const postCode = document.getElementById("post-data").value; // 郵便番号を取得
fetch(`/get_address/${postCode}`)
.then(response => {
if (!response.ok) {
throw new Error('住所が見つかりませんでした。');
}
return response.json(); // JSON形式でレスポンスを取得
})
.then(data => {
// 住所を表示
document.getElementById("address").value = data.ken + data.shiku + data.jyusyo || '情報なし';
})
.catch(error => {
console.error('エラー:', error);
alert(error.message);
});
});
});
このプログラムでは、fetch APIを使ってサーバーから住所データを非同期で取得しています。fetch は非同期APIであり、HTTPリクエストが完了するまでプログラムの実行をブロックしないので、他の処理が進行します。
非同期処理の流れ
非同期処理の流れは以下のようになります。
ユーザーが郵便番号入力欄からフォーカスを外す（blur）と、住所取得のリクエストが始まります。
あらかじめデータベースに追加してある住所の郵便番号を入力してカーソルを外すと、、、
このように自動で住所が入力されます！！！
fetch は非同期関数で、/get_address/{postCode} のAPIエンドポイントにリクエストを送信します。この処理は非同期で行われるため、リクエストが完了するまで他のコードが実行され続けます。
レスポンス待機（then）
サーバーからのレスポンスを受け取るのは非同期で行われます。response.ok でレスポンスが正常かどうかを確認し、response.json() でレスポンスをJSON形式で解析します。これらの操作はすべて非同期で行われます。
エラーハンドリング
もしエラーが発生した場合（たとえば、住所が見つからなかった場合など）、.catch() でエラーメッセージが処理されます。
非同期のメリット
非同期処理の利点は、リクエストを待っている間も他の操作がブロックされずに進行することです。例えば、ユーザーインターフェースがフリーズせず、他の操作を行うことができます。
非同期処理の特徴として、fetch でリクエストが送られると、その後のコードは待機せずに即座に次の処理へ進みます。レスポンスが返ってくると、then メソッドでそのデータを扱うことができます。
非同期処理のメリット
非同期処理の最大の利点は、リクエストを待つ間も他の処理が進行できることです。例えば、ユーザーインターフェースがフリーズせず、他の操作を行うことができます。
まとめ
このコードは、非同期処理を使用して郵便番号に基づいて住所を非同期で取得し、その結果を自動的に入力する仕組みを実装しています。非同期処理を使うことで、待機時間を有効活用し、ユーザーインターフェースをスムーズに保つことができます。