サンプル・プログラム
郵便番号→住所検索
Ajax（Asynchronous JavaScript + XML）とは、ページ遷移せずに（リロードすることなく）データを読み込むための非同期通信の仕組みで、XMLと付いているものの、JSONやJSONP、テキストや画像データを非同期で受信することができる。
1: <!--
2: /** zip2address2.html
3: * プログラミング入門 - 7.2 jQueryによる実装
4: *
5: * @copyright (c)studio pahoo
6: * @author パパぱふぅ
7: * @動作環境 JavaScript ES6(ES2015)
8: * @参考URL https://www.pahoo.org/e-soul/webtech/js00/js00-07-02.html
9: */
10: -->
11: <!DOCTYPE html>
12: <html lang="ja">
13: <head>
14: <meta charset="UTF-8">
15: <title></title>
16: <script src="./pahooClipboard.js"></script> <!-- クリップボード・クラス -->
17: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- jQuery -->
18: <script>
72: /**
73: * 検索ボタン押下処理
74: * @param なし
75: * @return なし
76: */
77: function zip2address2() {
78: //エラー・クリア
79: let errmsg = '';
80: $('#error').html(errmsg);
81:
82: //変換後テキスト・クリア
83: $('#state').val('');
84: $('#city').val('');
85: $('#street').val('');
86: $('#dest').val('');
87:
88: //検索郵便番号
89: let zip = $('#zip').val();
90: //空白除去
91: zip = zip.trim();
92: //バリデーション
93: const regex = new RegExp('^[0-9]{3}\-[0-9]{4}$')
94: if (! regex.test(zip)) {
95: errmsg = '郵便番号が間違っています．'
96: console.error(errmsg);
97: $('#error').html('エラー：' + errmsg);
98: return;
99: }
100: //郵便番号をハイフンで分離
101: let zips = zip.split('-');
102:
103: //WebAPI呼び出し
104: $.ajax({
105: url: 'https://api.thni.net/jzip/X0401/JSONP/' + zips[0] + '/' + zips[1] + '.js',
106: type: 'GET',
107: async: true, //非同期通信フラグの指定
108: timeout: 1000, //タイムアウト時間（ミリ秒）
109: dataType: 'jsonp', //Access-Control-Allow-Origin対策
110: jsonpCallback: 'ZipSearchValue' //JSONP関数
111: })
112:
113: //WebAPI接続成功
114: .done(function (result) {
115: console.log(result);
116: $('#state').val(result.stateName);
117: $('#city').val(result.city);
118: $('#street').val(result.street);
119: $('#dest').val(result.stateName + result.city + result.street);
120: })
121:
122: //WebAPI接続失敗
123: .fail(function (data) {
124: console.error(data);
125: errmsg = '郵便番号が間違っているかWebAPIに接続できません．'
126: console.error(errmsg);
127: $('#error').html('エラー：' + errmsg);
128: });
129: }
jQuery には多彩なセレクタが用意されている。たとえば、$('#error') は document.getElementById('error') と書くのと同じ意味である。セレクタを活用することで、キー入力を省力化できる。
| セレクタ | 意味 |
|---|---|
| $('title') | タグ <title> を指す |
| $('.className'); | クラス名 className を指す |
| $('#error'); | ID名 error を指す |
document.getElementById('error').innerHTML = errmsg;のようにメソッドも変わる。
⇒ $('#error').html(errmsg);
document.getElementById('state').value = '';
⇒ $('#dest').val('');
Ajax通信 は $.ajax ではじめる。
URLには、クラウドサービス の呼び出しURLを記述する。typeはGETを、async（非同期）をtrueに。timeoutにはタイムアウト時間（ミリ秒）を、SOP（Same-Origin Policy；同一生成元ポリシー）対策のため、dataTypeにJSONPを指定する。今回利用する ZIP SEARCH API SERVICE では、JSONP関数名があらかじめ決められているので、jsonpCallbackに決められた関数名 'ZipSearchValue' を指定する。
クラウドサービス 接続に成功したときは、.done 以降に処理関数を記述する。
この部分は、前回作成したものを jQuery のセレクタに焼き直しただけである。
クラウドサービス 接続に失敗したときは、.fail 以降に処理関数を記述する。
こちらも、前回作成したものを jQuery のセレクタに焼き直しただけである。
ユーザー関数の行数は XMLHttpRequest オブジェクトを使った前回のものと大差ないのだが、1行の長さが短くなっており、スクリプトを appendChild するという強引なコードもないので読みやすくなっている。
Wikipedia検索
69: /**
70: * 検索ボタン押下処理
71: * @param なし
72: * @return なし
73: */
74: function wikisearch2() {
75: //エラー・クリア
76: let errmsg = '';
77: $('#error').html(errmsg);
78:
79: //検索結果クリア
80: $('#dest').val('');
81:
82: //検索キーワード
83: let query = $('#query').val();
84: //空白除去
85: query = query.trim();
86: //入力文字のエスケープ
87: query = specialCharacters2HTMLentities(query);
88: //URLエンコード
89: query = encodeURI(query)
90:
91: //WebAPI呼び出し
92: $.ajax({
93: url: 'https://ja.wikipedia.org/w/api.php',
94: type: 'GET',
95: async: true, //非同期通信フラグの指定
96: timeout: 1000, //タイムアウト時間（ミリ秒）
97: dataType: 'jsonp', //Access-Control-Allow-Origin対策
98: data: {
99: format: 'json',
100: action: 'query',
101: prop: 'extracts',
102: exintro: '',
103: explaintext: '',
104: redirects: 1,
105: titles: query
106: },
107: })
108:
109: //WebAPI接続成功
110: .done(function (result) {
111: console.log(result);
112: let key = Object.keys(result.query.pages)[0];
113: let summary = result.query.pages[key].extract;
114: //応答結果あり
115: if (typeof summary != 'undefined') {
116: document.getElementById('dest').value = summary;
117: //応答結果なし
118: } else {
119: errmsg = '検索キーワードが見つかりません．'
120: console.error(errmsg);
121: $('#error').html('エラー' + errmsg);
122: }
123: })
124:
125: //WebAPI接続失敗
126: .fail(function (data) {
127: console.error(data);
128: errmsg = 'WebAPIに接続できません．'
129: console.error(errmsg);
130: $('#error').html('エラー' + errmsg);
131: });
132: }
Wikipedia API では、いくつかのパラメータをGETで渡すので、渡す内容をdateに記述する。
あとは zip2address2 関数の時と同じである。
コラム：jQueryのメリットとデメリット
また、ブラウザに依存するコードを減らすこともできる。jQuery 利用者は多く、豊富なプラグインが出回っており、使いやすくアクセントのあるGUIを作るときの役にも立つ。
コーディングの手間を省いたとはいえ、大規模なフロントエンド開発には向いていないし、大規模な開発ではかえって実行速度を低下させることがある。
$ で始める独特な記述のため、prototype.js や Vue.js などの他のライブラリやフレームワークと競合することがある。
そして、これが一番大きなデメリットなのだが、JavaScript の基本知識を学ぶことができないということが挙げられる。
本シリーズでは、jQuery の解説はここで止め（ピンポイントで使用することはあるかもしれないが）、これ以降は再びネイティブな JavaScript でプログラムを紹介することにする。
参考サイト
- ZIP SEARCH API SERVICE 「JIS X0401」対応版
- API:メイン ページ：MediaWiki
- PHPで「Wikipedia API」を利用する：ぱふぅ家のホームページ
- PHPで郵便番号から住所を求める：ぱふぅ家のホームページ
前回作成した、郵便番号→住所検索プログラム、Wikipedia検索プログラムの2つを、jQuery を使ったプログラムに移植する。