Webアプリやサイトを作成してみたいけど、作るなら動的で応答性のよいページを作成したい。
UX（ユーザー体験）の品質が高いサイトを目指したい。
そんな方に、Googleマップなどにも使用されている「Ajax」という技術について、簡単に解説します。
Ajaxを使うことで、別ページへの遷移や再読み込みなどをせずに動的に表示内容を変更することができます。
そのため、スムーズで応答性の高いページの実現、ひいてはUXの向上へ繋げることができます。
この記事では、さらにJavaScriptのライブラリであるjQueryを使用したAjaxの実装方法についても簡単に解説します。
Ajaxとは
Ajaxとは、簡単に言えばJavaScriptとXMLを使って、非同期でサーバとの通信を行う方式です。
非同期とは、あるひとつの処理が終わるのを待たずに、別の処理を並行で実行することを指します。
画面表示している裏側で、ページ情報であるXML形式のデータをサーバとやりとりすることで動的ページを実現しています。
ちなみに、Ajaxは「Asynchronous JavaScript + XML」の略で直訳すると「非同期なJavaScriptとXML」です。
Ajaxの基本概念
非同期通信をJavaScriptの技術で実行すること、がAjaxの定義ですが、次にその仕組みについて説明します。
その前に、Webページが表示される仕組みについて理解します。
- ユーザーがブラウザを通して「Webサイトを閲覧しよう」とした場合、リンク押下等でサーバに対して「HTTPリクエスト」をします
- サーバ側は、受けた「HTTPリクエスト」に対してレスポンスを用意し、ユーザーのブラウザにWebページ情報を送信して表示させます
上記の方式は「同期通信」と呼ばれ、リクエストからレスポンスを返す処理まで、ユーザーは他の操作を行うことができません。
これに対し、レスポンスの処理中にもユーザーが操作できることを「非同期通信」といいます。
Ajaxではこの「非同期通信」をするためにXMLHttpRequestというオブジェクトを利用してサーバと対話します。
Ajaxの歴史と現代における重要性
Ajaxを採用した最初のサービスは、2005年に公開されたGoogleマップと言われています。
2000年代の前半までは、Webページへ埋め込む動的なデータを用意するのは、サーバー側で処理するのが主流でした。CGI全盛期と呼ばれています。
しかし、GoogleマップやiPhoneの登場、それに連なるサービスが続々と台頭し、Web 2.0 時代と呼ばれる頃にはソフトウェアのUXに求められる質は変化していきました。
特にGoogleマップは、マウスの操作だけで滑らかな移動や拡大縮小を可能とし、CGIではなくブラウザの標準機能だけで実現したため、その技術であるAjaxには大きく注目が集まりました。
その後、Ajaxを簡単に実装することができるjQueryが2006年に誕生し、数多くのWebアプリ制作で導入される技術となりました。
jQueryはCSSがわかるWebデザイナーやエンジニアが簡単に習得できるように設計されているため、現在でも広く使われています。
jQueryを使ったAjaxの基本
jQueryとAjaxの連携
jQueryは基本的に「セレクタ」と「メソッド」で構成されており、次のように記述します。 $(function() { $('セレクタ').メソッド(); });
「セレクタ」・・・操作するHTML要素の対象を記述する
「メソッド」・・・操作する内容を記述する
また、冒頭の「＄」は関数を表し、Wordpressなどでは「jQuery」と記述することもあります。
jQuery Ajaxの基本的な使い方
scriptタグでjQueryのライブラリを読み込み、さらに別のscriptタグで以下のように処理を記述します。 <script src="https://code.jquery.com/jquery-X.X.X.min.js"></script> //X.X.Xはバージョン <script> $( function() { $.ajax( { //実行する処理。 url: 'XXXXXX.html', dataType: 'html' }).done(function(html) { $('#text').html(data); }).fail(function() { alert('error'); } ); } ); </script>
”url”は読み込むURLを表します
”dataType”は読み込むデータの種類を記入します。(例は”html”）
”dataType”はhtmlの他にもjsonやcsvなどのメジャーなファイルを読み込むことができます。
Ajaxの実用的な使い道
ページ遷移を伴わず、画面の一部分だけを更新したい場合にAjaxはとても有効です。
検索エンジン、地図アプリ、ECサイト、SNSサービス等々、ユーザーに対してレスポンシブなWebサービスを作るために様々な場面で活用できるため、登場シーンは多岐に渡ります。
ここからは、Ajaxを活用した具体的なメリットや利用例を紹介していきます。
データの非同期通信
Facebook や X（旧Twitter）、Googleの検索エンジンにも使用されているAjaxの非同期通信について、メリットを簡単に列挙します。
- Webページ全体を更新することなく「一部分だけ情報を更新する」ことが可能
- リンクをクリックした際のレスポンス待ち時間の体感時間を少なくできる
- 必要な部分の情報のみを取得・変更し、必要なときに更新が可能なため、高速に動作する
上記のように、ユーザーのアクションに対してすぐにページの一部分だけを更新して応答することや、待ち時間を減らすことでレスポンシブなUX・操作性を実現できたり、非同期処理を行うことで全体の処理速度を高めることができます。
その反面、複数の処理を行うことで今現在は何の処理を行っているか？などのプログラムの全体像が複雑になりやすいというデメリットがあります。
実装時には、コードの記述方法を工夫しないと非常に複雑で全体像が把握しづらくなってしまうことが多いため、誰がみても分かりやすい記述を意識することが大切です。
ユーザインターフェースの向上
では実際に、Ajaxによるユーザー体験向上のための利用例として、「インクリメンタル検索」を紹介します。
インクリメンタル検索(インクリメンタルサーチ)とは、Googleなどの検索窓にキーワードを入力している最中に、検索窓の下に検索結果が表示される機能です。
入力の途中でどのような検索結果がどれくらい存在するかが把握できるため、UIの仕組みをユーザーに押し付けないモードレスインタラクションというコンセプトを実現できます。
実装例は以下です。
1.検索窓に入力された値を監視する
const searchBox = document.getElementById('search-box'); searchBox.addEventListener('keyup', function() {
// 検索窓に入力された値を取得する処理
});
JavaScriptの”onkeyup“イベントを使用して検索窓の入力値を監視します。
2.入力された値に応じて検索結果を表示する
const searchBox = document.getElementById('search-box'); searchBox.addEventListener('keyup', function() { const keyword = this.value;
// Ajaxで検索結果を取得する処理 const xhr = new XMLHttpRequest(); xhr.open('GET', '/search?q=' + keyword); xhr.onload = function() { if (xhr.status === 200) { const results = JSON.parse(xhr.responseText);
// 取得した検索結果を表示する処理 } }; xhr.send(); });
入力された値に対して、Ajaxによってリアルタイムに検索結果を取得し、表示します。
リアルタイムフォーム検証
次に、jQuery の Validation-Engine を利用してフォームの入力内容をリアルタイムで自動チェックする「リアルタイムフォーム検証」の実装例をご紹介します。
Webサービスの新規会員登録などでフォームに情報を入力するとき、全部入力したあとに送信してからエラーを表示して入力し直すよりも、入力中にリアルタイムで入力ミスを表示したほうが便利ですよね。
そんなことも jQuery-Validation-Engine でなら簡単に実装可能です。
1.CDN経由で構成ファイルを読み込む
jQuery-Validation-Engineを使うための準備をします。
HTMLのhead要素内にjQuery-Validation-Engineの構成ファイル4つをCDNサーバから直接読み込みます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js" type="text/javascript" charset="utf-8"></script>2.入力チェックする対象を指定
チェック対象を指定するために、以下のようにフォームのid名を指定します。
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#入力フォームのid名").validationEngine();
});
</script>3.入力チェックの条件を記述
jQuery-Validation-Engineでは、input要素のclass属性値にチェック内容の指示を書き込むことで入力チェックを実施します。
<input type="…" name="…" id="…" value="…"
class="validate[入力チェック指示]">上記の”validate”の文字列は固定で必ず記述します。それに続く”入力チェック指示”の部分に条件を記述することで入力チェックができます。
例えば、入力必須チェックでは”required”を記述します。
<input type="text" name="req" id="req" value="" class="validate[required]">
さらに、指定条件を追加する場合は、カンマでチェック条件を追記可能です。例では、入力内容がメールアドレスかどうかをチェックします。
<input type="text" name="email" id="email" value=""class="validate[required,custom[email]]">
このほかにも、”required”を”optional”に書き換え任意入力としたり、入力された値のデータ型や日付であるかなど、様々な条件を指定することが可能です。
サジェスト機能の実装
次に、任意の値を入力すると入力候補が表示され、選択するとテキストフィールドに反映される入力補完(サジェスト)機能の実装例をご紹介します。
よくインクリメンタル検索とサジェストの違いはなにか？といわれますが、サジェスト機能はインクリメンタル検索の一種です。入力された値に対して検索処理を行うのに対し、入力候補のリストを表示することを、サジェスト機能、サジェスト候補と呼ぶことが多いです。
ここでは、jsライブラリである jQuery UI の ”Autocomplete” を利用します。
1.CDN経由で構成ファイルを読み込む
Autocompleteを使うための準備をします。
HTMLのhead要素内に jQuery UI Autocomplete の構成ファイルをCDNサーバから直接読み込みます。
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /><script src="https://code.jquery.com/jquery-3.5.1.js"></script><script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
2.実装するフォームを指定して入力候補を用意する
実装方法はとても簡単で、HTML側で用意しているinputタグに対してautocomplete関数を実行します。入力候補は配列、文字列、関数で指定することができます。
$(function() { var words = [ "入力候補1", "入力候補2", ]; $( "#フォームのid名" ).autocomplete({ source: words, });});
上記では、配列内に入力候補を格納して表示していますが、入力候補のリソースをリモートから取得することが可能です。
キー入力をトリガーとしてAjaxでサーバから検索結果を取得する実装例です。
$('フォームのid名').autocomplete({ source: function (request, response) { $.ajax({ type: 'get', url: '/suggest_contents/?keyword=' + request.term, dataType: 'json' }).done(function (res) { response(res.list); }).fail(function (res) { console.error(res.responseJSON); response([]); }); }, delay: 300, //デフォルト値 minLength: 1, //デフォルト値});
ここでは、”json”形式のデータを取得しています。
”delay”オプションは、入力した指定ミリ秒後に検索を実行します。
”minLength”オプションは、指定した文字数以上の入力があった場合に検索を実行します。
検索後、”response”に入力候補の配列を格納します。
Ajaxと他のJavaScript技術との比較
昨今、Webフロント技術のリッチ化に伴いReact、AngularJSやVue.jsが登場し、脱jQueryの時代なんていう言葉も見かけます。そのため、Ajax通信をする際に jQuery を使用しないことも多くなりました。
ですが、ただ最新の技術を使うのではなく、どのような違いがあるかを比較し、自分にとって最良の選択ができることも重要です。
ここでは、Ajaxに関する技術にどのようなものがあるか簡単にご紹介します。
AjaxとJavaScriptの他の通信技術との比較
| ライブラリ名称 | 概要 | メリット | デメリット |
| jQuery |
|
|
|
| SuperAgent |
|
|
|
| axios |
|
|
|
|
fetch API ※非ライブラリ |
|
|
|
jQuery Ajaxと純粋JavaScript Ajaxの比較
jQueryを用いたAjaxと純粋なJavaScriptを使ったAjaxの違いをご紹介します。
以下のように、純粋なJavaScriptで実装すると通信用のオブジェクトを用意して、イベントを拾うためのリスナーを用意して…といった記述が必要になります。
jQueryだと通信に必要な用意するための記述量が少なくなり、可読性が格段に上がります。
純粋JavaScript AjaxのGET処理
var url = 'https://jsonplaceholder.typicode.com/posts';
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = function() {
if(xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.send();jQuery AjaxのGET処理
const url = 'https://jsonplaceholder.typicode.com/posts';
$.get(url)
.done(data => {
console.log(data);
})
.fail(error => {
console.log(error);
});純粋JavaScript AjaxのPOST処理
var url = 'https://jsonplaceholder.typicode.com/posts';
var params = {
name: '名前',
email: 'XXXX@example.com',
password: 'secret'
};
var queries = [];
for(var key in params) {
var query = key +'='+ encodeURIComponent(params[key]);
queries.push(query);
}
var queryString = queries.join('&');
var xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if(xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.send(queryString);jQuery AjaxのPOST処理
const url = 'https://jsonplaceholder.typicode.com/posts';
const params = {
name: '名前',
email: 'XXXX@example.com',
password: 'secret'
};
$.post(url, params)
.done(data => {
console.log(data);
})
.fail(error => {
console.log(error);
});jQuery Ajaxのよくある問題
jQueryはJavaScriptのコードを簡潔に書くことを目的に開発されたライブラリですが、それゆえに以下のような問題があります。
- 処理動作が遅い、重くなりやすい
- ほかのライブラリ・フレームワークと競合し、併用ができない
jQueryの動作速度については、単純な動作だと素のJavaScriptで記述したほうが速いことが多いため、jQueryを使用せずに書くという選択肢が効率的になる場合があります。
また、Web開発の現場ではReactやVue.jsなどの別のライブラリやフレームワークを採用しようとする場合、jQueryが使われていると予期せぬ動作をするケースがあります。そのため、共存させるための処理を別途行うか、jQueryを素のJavaScriptに置き換えるといった手間が生じます。
よくあるトラブルと解決策
よくあるトラブルに、jQueryが動作しないことがままあります。その原因や解決方法をご紹介します。
- jQuery本体または適したバージョンを読み込んでいない
- HTML内に使用するjQueryへの本体パスまたはCDNがないか確認しましょう。最新バージョンでサポートされていない関数やメソッドを使用していないかも要チェックです。
- また、jQueryの処理記述より前に読み込む記述がないと、正常に動作しません。
- jQuery以外のライブラリと競合している
- WordPress等で「Prototype.js」というライブラリを使用している場合、コードを記述するときに「$」を使用すると、Prototype.js も同じ記述方法のため競合します。$の代わりにjQueryと記述しましょう。
- jQueryのCSSが他のCSSと競合している
- 動作はしているが、表示がおかしい場合はCSSと競合している可能性があります。同じclass名を使っていないかなど確認しましょう。
その他、原因が特定できないといった場合は、コード内に”alert(‘OK’);”を追加してデバッグ調査がおすすめです。
ブラウザページを再読み込みしてアラートが出れば、アラート命令より後のスクリプトにミスがある可能性が高いです。
パフォーマンスとセキュリティにおける注意点
サイトの処理速度やパフォーマンスを重視したい、特に大規模なWebサイトやWebアプリであれば、jQueryよりもJavaScriptでの実装のほうが高速で処理することが可能です。
一方で、工数を抑えてなるべく早くリリースしたい、マルチブラウザでレスポンシブなWebサイト制作をしたい場合にはjQueryは強力に作用し、スピーディーに制作が可能でしょう。
サイズや動作が重いと言われていますが、パフォーマンスをそれほど重視しない小～中規模程度のプロジェクトであればjQueryの恩恵を受けやすくなります。
また、jQueryを使用したWebサイトを長年運用している場合、ライブラリが古くなっている可能性があります。
正しく動作していてもライブラリが古いと脆弱性が生じ、データ改ざんやサーバー情報の流出などセキュリティ問題に発展することがあるため、常に最新のものを利用するようにしましょう。
自分がどのようなWebサイト制作をしたいかでどのような実装にするか、ぜひ検討してみてください。
まとめ
jQueryでAjaxを使う方法やメリットについて、いかがでしたでしょうか？
近年では流行は落ち着いてきましたが、Webサイト制作では未だに根強い人気があります。jQueryが使われているWebサイトを刷新したいといった場合にも既存の挙動を理解する必要がありますから、この機に理解を深めるのもおすすめです。
また、自社内でWebサイトやアプリ開発を検討中であれば、システム開発会社に相談することもおすすめです。
Webアプリ開発会社の選定に迷った場合は、実績豊富な株式会社Jiteraに一度ご相談ください。貴社の要件に対する的確なアドバイスが提供されると期待できます。
メールマガジン登録
