エンジニア全般
Web開発において、ユーザー体験を向上させる技術の一つに「Ajax（エイジャックス）」があります。
Ajaxを用いることで、Webページの一部分だけを更新できるようになり、ユーザーに快適な操作性と高速なレスポンスを提供できます。
この記事では、Ajaxの概要や仕組み、メリット・デメリットについてわかりやすく解説していきます。
また、Ajaxを活用したWebアプリケーション開発におけるポイントも紹介するので、Webサイトの改善をしたい方はぜひこの記事をお読みください。
株式会社Jiteraでは、システムやアプリの開発を幅広く手がけています。
ユーザビリティの高いサービスをお求めの方は、どうぞお気軽にご相談ください。当社は独自のAI技術を活用して、高品質かつ迅速な納期での開発を得意としています。
近畿大学理工学部生命科学科を卒業後、独学でReactやNext.jsを中心としたフロントエンド開発に特化し、2022年10月よりフリーランスエンジニアとして活動。ヨーロッパや東南アジアを旅しながら、いろんな文化や人との出会いを楽しみつつ、クリエイティブなUI/UX設計に取り組んでいます。
Ajaxとは?
Ajax（エイジャックス）とは、WebページにJavaScriptを使って、ページ全体をリロードすることなくサーバーとデータをやり取りする技術のことを言います。
例えば、Webメールを利用しているときに、受信箱を開いている状態で新しいメールが届いたら、ページをリロードせずに新しいメールが表示されるようになっています。このように、ページの一部だけを更新できるのがAjaxの機能です。
従来のWebアプリケーションでは、ページ間の移動やデータの送受信のたびにページ全体を再読み込みしていました。すると表示のたびに白紙の画面が表示されるため、処理に時間を要し、ストレスを感じることがありました。
AjaxではJavaScriptを使ってページの一部だけを書き換えることができるので、サーバーとのデータ通信を行う間も画面がフリーズすることがなく、操作感とレスポンス性を大幅に改善できます。
このように、AjaxはJavaScriptを使ってサーバーとのやり取りを行う技術のことを指し、Webアプリケーションの操作性とパフォーマンスを向上させる手法の1つと言えます。
Ajaxの仕組み
AjaxはJavaScriptを使って、ページのリロードなしにサーバーとデータを送受信する仕組みです。画面の切り替えやサーバーとの通信がスムーズにできるのは、Ajaxならではの2つの技術に支えられています。その2つの技術について、以下に詳しく解説していきます。
XMLHttpRequestオブジェクト
1つ目は、JavaScriptのXMLHttpRequestオブジェクトです。これは、ページをリロードせずにHTTPリクエストを送信できる機能を提供します。
例えば、ユーザーがボタンをクリックしたら、そのたびにXMLHttpRequestでサーバーにデータをリクエストします。サーバーからのレスポンスをJavaScriptで処理をして、表示を更新できます。
XMLHttpRequestオブジェクトを使うことで、ページ内の任意のタイミングでHTTPリクエストを発行できます。サーバーとのデータ送受信をバックグラウンドで行うため、ユーザーは画面遷移なしでコンテンツの更新を体験できるのです。
またXMLHttpRequestオブジェクトには、リクエストの状態をチェックする機能があります。「未開始」「データ送信中」「完了」などの状態を見て、成功した場合だけ処理を進めたり、エラーの場合はメッセージを表示したりできます。
このオブジェクトによって、従来のWebアプリケーションにない柔軟な通信機能が実装できるようになりました。それにより、XMLHttpRequestオブジェクトはAjaxを支える根幹の技術だと言えます。
非同期通信
2つ目は、非同期通信です。リクエストを送信後、レスポンスを待たずに処理を進めることができるため、ユーザーの操作をブロックしません。
非同期通信と同期通信の違いは、次のように説明できます。
| 非同期通信 | 同期通信 | |
| 概要 | レスポンスを待たずに処理を進める | レスポンスを待ってから処理を進める |
| メリット | ユーザー操作のブロックがない | 処理の順序が保証される |
| デメリット | 処理の順序が保証できない | ユーザーが操作できなくなることがある |
Ajaxは非同期通信を利用することで、サーバーとのやりとりの影響を最小限に抑えられます。
例えば、ある商品の在庫状況を Ajaxでチェックする場合を考えてみましょう。在庫確認のリクエストを送信しても、レスポンスを待たずに次の処理を実行できます。
これによりユーザーは、在庫チェック中でもサイト内の他の要素を操作できます。同期通信だと、在庫の確認中は処理がブロックされ、サイトの操作自体ができなくなってしまいます。非同期通信はユーザー体験を大きく向上させる、Ajaxに欠かせない技術といえます。
Ajaxの使い方
Ajaxを利用する場合の基本的な手順とポイントを見ていきましょう。以下、詳しく解説していきます。
リクエストを送信する
Ajaxではまず、JavaScriptを使ってサーバーにデータを求めるリクエストを送信します。ボタンをクリックした時など、任意のタイミングでリクエストを発行できます。
よく使われるのは、JavaScriptのXMLHttpRequestオブジェクトを使ったHTTPリクエストの発行です。送信したいデータをリクエストに含める部分に設定し、アドレスと送信方法(GETあるいはPOST)を指定することで簡単にリクエストを実行できます。
リクエスト送信後は、レスポンスを受信するまで処理をストップさせずに、ウェブページの他の操作を可能にします。これがAjaxの非同期通信の仕組みです。リクエストのタイミングはボタンクリック以外にも、一定時間ごとの自動送信、スクロール位置に応じた送信など、UI上の様々な操作を処理の開始点として使えます。
このようにAjaxでは、JavaScriptで自由にサーバーにリクエストを送れるため、リアルタイムな通信を実現できます。
レスポンスを受け取る
次にサーバーから送られてくる結果をJavaScriptで受け取り、ページの更新といった処理を実行します。レスポンス形式はJSONなどが一般的です。
サーバーからレスポンスが返ってくると、XMLHttpRequestオブジェクトのonreadystatechangeイベントが呼ばれます。これを処理の開始点としてレスポンスデータを取得し、成功時の処理を記述します。
取得したデータをJavaScriptで直接HTMLに挿入する方法や、JavaScriptのテンプレートエンジンを利用する方法があります。レスポンス結果を確認し、成功時には新しいデータを画面に反映させます。エラーの場合は、エラー内容をダイアログに表示するなどの処理を実装します。
このようにAjaxではレスポンスを自由に取得・処理できるため、より自然な表示の更新が可能です。レスポンス結果に応じた柔軟な制御を行いましょう。
※onreadystatechangeイベント・・・XMLHttpRequestオブジェクトのイベントハンドラです。このイベントは、リクエストの状態が変化したタイミングで呼び出されます。レスポンスを受信した時などに発生するので、このイベントを処理することでAjaxの通信制御を実現できます。
通信トラブルへの対応
サーバーとの通信で、エラーが発生した場合の対処が必要です。ですから、「原因を特定して再試行する」、「エラーメッセージを表示する」などの処理を実装しましょう。
Ajaxではネットワークの障害やタイムアウト、サーバーのエラーレスポンスなど、通信に関するエラーが発生する可能性があります。これらのエラー要因をJavaScriptのtry-catch文で検知し、適切に対処する必要があります。
例えば、一定回数リトライした後も通信エラーが起きる場合は、ユーザーにエラーメッセージを表示し、処理の終了あるいは戻り処理を実行します。またサーバーエラーコードに応じて、詳細なエラー内容を画面に表示することも可能です。
このように、通信障害が起きた場合を想定した機能を実装することで、アプリケーションの安定性が向上します。
ブラウザの違いに注意する
Ajaxのコードはブラウザによって動作が異なることがあるので、主要なブラウザで動作確認が必要です。
特にモバイル端末のブラウザには独自の挙動があるため、スマートフォンでの動作を必ずテストする必要があります。iPhone（Safari）とAndroid（Chrome）ではJavaScriptの処理速度に差がでることがあるので、注意が必要です。
またブラウザのバージョンアップによっても、動作に影響が出る可能性があります。新バージョンで動作を確認し、必要に応じてAjaxのコードを最適化する作業も重要です。
ブラウザごとのJavaScriptエンジンの違いを理解した上で、クロスブラウザ対応のためのコーディングを心がけましょう。動作検証を怠らないことがスムーズなAjax実装の秘訣といえます。
Ajaxのメリット
Ajaxには、Webアプリケーションの使いやすさや開発効率を大幅に向上させる特徴があります。以下、Ajaxのメリットについて詳しく解説していきます。
操作の即時反映
Ajaxを使うと、ページをリロードせずに処理結果を反映できるため、操作がすぐに反映されます。
またGoogleマップなどの地図サービスでも、検索場所を変更するとすぐに、地図が自動的に更新されます。これはAjaxによって、サーバーから新しい地図データを読み込んでいるためです。
これらのようにAjaxなら、ボタンクリックや検索などのユーザー操作を画面遷移なしで反映できるため、アプリケーションの即時性とレスポンシブ性が大幅に向上します。
通信量の削減
Ajaxは必要なデータだけを通信できるので、サーバーとの通信量を少なく抑えられます。
商品一覧ページで、一部の商品データだけを更新することができれば、ページ全体のデータを再読み込みするより通信量が大幅に減ります。サーバーの負荷や通信コストを低減できます。
しかしAjaxなら、検索時は検索結果だけをサーバーから取得して表示を更新できます。共通部分はキャッシュされているので再通信の必要がありません。このため、通信データ量と通信回数が大幅に削減されるのです。
また、高速通信のためにデータ圧縮を行うこともできます。HTMLやXML、JSONなどのフォーマットでデータを圧縮して転送すれば、通信効率化になります。
このようにAjaxは、通信量の削減に大いに貢献しています。サーバーへの負荷が下がり、通信のコストカットにもつながるため、規模拡張しやすいWebアプリケーション構築に必須の技術といえます。
ユーザエクスペリエンスの向上
ページのリロードがない分、表示の遷移がスムーズになります。ストレスなく快適に操作できるため、ユーザエクスペリエンスが向上します。
またAjaxによって実現される自動更新機能も、ストレス軽減に役立っています。SNSのタイムラインやメールの受信箱などを自動更新することで、ユーザーは最新情報を得るために手動でリロードする必要がなくなります。
このようにAjaxは、視覚的、操作的にストレスなく情報を取得できるようにすることで、ウェブサイトの快適性と完全性を高めています。それによって、高度で満足度の高いユーザエクスペリエンスを実現しているのです。
開発効率の向上
Ajaxを使うことで、フロントエンドとバックエンドの開発を分離できます。効率的に並行作業が行えるため、アプリケーションの開発速度が上がります。
しかし、AjaxならJavaScriptを使ってフロントエンドのUIを実装できます。一方サーバー側は、APIを用意するだけで済むのです。フロントエンドエンジニアとバックエンドエンジニアが並行して作業できるため、開発スピードが格段に向上するのです。
また、アプリケーションの規模が大きくなっても、Ajaxなら画面とAPIの開発を分離しているので、それぞれのモジュールを拡張しやすくなります。段階的に機能を追加していけば、アジャイル開発が実現できるため、開発生産性と保守性が高まるというメリットもあります。
このようにAjaxは、開発プロセス全体の効率化に大きく貢献しています。Webアプリケーションの迅速な構築と進化を可能にする最重要技術の1つと言えます。
※モジュール・・・ソフトウェアを機能ごとに分割した部品のことです。例えば、掲示板サービスであれば、表示機能、書き込み機能、ユーザー管理機能などがモジュールとして分割されます。
Ajaxのデメリット
Ajaxにはメリットも多いのですが、利用するにあたっての注意点やデメリットもあります。以下、詳しく解説していきます。
ブラウザの互換性
AjaxはJavaScriptを使うため、ブラウザやバージョンによって動作が異なることがあります。SafariとChromeでは正常に動いても、他のブラウザではエラーが発生する可能性があります。そのため、互換性を確認することが大切です。
またHTML5のAPIを使った実装の場合、ポリフィル（Polyfill）と呼ばれる互換性ライブラリを使って対応する手法もありますが、コードが複雑化するという課題が残ります。
このように、Ajaxアプリケーションを開発する際はサポートブラウザの確認と、それに合わせたJavaScriptのコーディングが必要不可欠です。十分なブラウザ確認テストをするなどの対策が欠かせません。
エラー処理が複雑
ネットワークエラーやサーバーエラーなど、通信に関するエラー処理が発生します。これらを適切に処理するコードが必要で、アプリケーションが複雑化しがちです。
Ajaxでは、クライアントとサーバー間の通信をJavaScriptで制御しているため、通信エラーが発生した際のエラー処理もすべてJavaScriptで記述する必要があります。
またインターフェース上の表示制御も、エラーに応じて変化させる必要があるため、通信成功時とは異なるUIロジックを用意することになるため、コードが複雑化していく課題があります。
このようにAjaxアプリケーションでは、通信エラーが発生した場合の対処法となる処理コードが必要不可欠で、アプリケーションの保守性が低下するという懸念が残ります。
SEO対策が難しい
ページ遷移がないため、検索エンジンのクローラーが内容を正しく読み取れないことがあります。SEO対策のための工夫が必要になります。
Ajaxではページ内のコンテンツを自動的に更新しているため、検索エンジンはその変化を検知できません。
このため、サイトのコンテンツがインデックスされにくくなり、検索順位が下がるなどの弊害が生じます。これを回避するには、サーバーサイドで完全なHTMLを生成する、サイトマップの送信を行う、レンダリングしたコンテンツをクローラーに返すといった対策が必要です。
しかしながら、これらの実装はアプリケーションのコードを複雑化させがちです。効果的なSEO対策を行うには、Ajax特有の仕組みを理解した上での設計が不可欠であるといえます。
アクセシビリティの低下
画面リーダーなどの支援技術では、Ajaxで動的に変化する部分が読み上げられないことがあります。その結果として、アクセシビリティの低下が懸念されます。
画面リーダーでは、Ajax通信後に動的に内容を更新した部分を検知することが困難です。
このため、視覚障害者は画面の変化を認識できず、Webサイトの情報を取得できなくなる可能性があります。アクセシビリティを重要視する場合は、Ajax依存の実装は避けるべきであると言えます。
対策としては、ページの変更内容を画面リーダーで読み上げられるテキスト情報として追加する、現在の位置を画面リーダーに伝える設定を行う、アクセシビリティ対応の特別なHTML属性（ARIA属性）を用いるなどが必要です。
※ARIA属性・・・アクセシビリティAPIで画面リーダー用の情報を追加できるHTMLの属性です。
Ajaxの実用的な使い道
ページ遷移を伴わず、画面の一部分だけを更新したい場合にAjaxはとても有効です。
検索エンジン、地図アプリ、ECサイト、SNSサービス等々、ユーザーに対してレスポンシブなWebサービスを作るために様々な場面で活用できるため、登場シーンは多岐に渡ります。
ここからは、Ajaxを活用した具体的なメリットや利用例を紹介していきます。
Facebook や X（旧Twitter）、Googleの検索エンジンにも使用されている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名を指定します。
3.入力チェックの条件を記述
jQuery-Validation-Engineでは、input要素のclass属性値にチェック内容の指示を書き込むことで入力チェックを実施します。
上記の”validate”の文字列は固定で必ず記述します。それに続く”入力チェック指示”の部分に条件を記述することで入力チェックができます。
例えば、入力必須チェックでは”required”を記述します。
さらに、指定条件を追加する場合は、カンマでチェック条件を追記可能です。例では、入力内容がメールアドレスかどうかをチェックします。
class=”validate[required,custom[email]]”>
このほかにも、”required”を”optional”に書き換え任意入力としたり、入力された値のデータ型や日付であるかなど、様々な条件を指定することが可能です。
サジェスト機能の実装
次に、任意の値を入力すると入力候補が表示され、選択するとテキストフィールドに反映される入力補完(サジェスト)機能の実装例をご紹介します。
よくインクリメンタル検索とサジェストの違いはなにか？といわれますが、サジェスト機能はインクリメンタル検索の一種です。入力された値に対して検索処理を行うのに対し、入力候補のリストを表示することを、サジェスト機能、サジェスト候補と呼ぶことが多いです。
ここでは、jsライブラリである jQuery UI の ”Autocomplete” を利用します。
1.CDN経由で構成ファイルを読み込む
Autocompleteを使うための準備をします。
HTMLのhead要素内に jQuery UI Autocomplete の構成ファイルをCDNサーバから直接読み込みます。
<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関数を実行します。入力候補は配列、文字列、関数で指定することができます。
var words = [
“入力候補1”,
“入力候補2”,
];
$( “#フォームのid名” ).autocomplete({
source: words,
});
});
上記では、配列内に入力候補を格納して表示していますが、入力候補のリソースをリモートから取得することが可能です。
キー入力をトリガーとしてAjaxでサーバから検索結果を取得する実装例です。
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のまとめ
この記事では、Ajaxの基本的な概念から、特徴、仕組み、メリット・デメリット、実装方法について解説しました。
AjaxはJavaScriptを使って、ページ遷移なしにサーバーとデータ通信する技術です。高度な操作性と高速表示を実現し、Webアプリケーション開発に大きな進歩をもたらしました。
ただし、ブラウザ依存の問題や通信エラーへの対処などの注意点もあります。Ajaxのメリットを生かしつつ、欠点を理解して適切に活用していくことが重要です。
Ajaxを使って高機能なWebサービスを構築したい場合は、設計から実装まで専門知識が必要です。弊社ではAjaxを駆使したWebシステム開発を多数手がけています。
興味がある方はお気軽にお問い合わせください。貴社のWebサービス構築をアドバイスさせていただきます。
