エンジニア全般
Googleマップなどにも使用されている「Ajax」という技術について、簡単に解説します。
Ajaxを使うことで、別ページへの遷移や再読み込みなどをせずに動的に表示内容を変更することができます。そのため、スムーズで応答性の高いページの実現、ひいてはUXの向上へ繋げることができます。
この記事では、さらにJavaScriptのライブラリであるjQueryを使用したAjaxの実装方法についても簡単に解説するので、ぜひ参考にしてください。
高校で情報技術科を卒業、大学ではゲーム制作やサークルで小説執筆などをした。SIerとして就職後、大規模な基盤刷新プロジェクトやコロナ禍真っ只中での大手海外旅行会社でWebフロント改修及びデータ移行業務に従事、物流システムの保守運用など多岐に渡り経験。現在はITコンサルとして企画・要求定義からリリース後の対応まで一貫した業務支援を行う。 QCD＋H(ホスピタリティ)がモットー。
JavaScriptでAjaxを処理する4つの方法
昨今、Webフロント技術のリッチ化に伴いReact、AngularJSやVue.jsが登場し、脱jQueryの時代なんていう言葉も見かけるため、Ajax通信をする際に jQuery を使用しないことも多くなりました。
ですが、ただ最新の技術を使うのではなく、どのような違いがあるかを比較し、自分にとって最良の選択ができることも重要です。
ここでは、Ajaxに関する技術にどのようなものがあるか簡単にご紹介します。
| 名称 | 概要 | メリット | デメリット |
| jQuery |
|
|
|
| SuperAgent |
|
|
|
| axios |
|
|
|
| fetch API ※非ライブラリ |
|
|
|
jQueryで使う方法
以下のように、純粋なJavaScriptで実装すると通信用のオブジェクトを用意して、イベントを拾うためのリスナーを用意して…といった記述が必要になります。
jQueryだと通信に必要な用意するための記述量が少なくなり、可読性が格段に上がります。
jQuery AjaxのGET処理
console.log(data); }) .fail(error => { console.log(error); });
jQuery AjaxのPOST処理
.done(data => { console.log(data); }) .fail(error => { console.log(error); });
SuperAgentで使う方法
SuperAgentはNode.jsとブラウザの両方で使用できる軽量のAjax APIライブラリで、シンプルなAPIを通じてHTTPリクエストの実行を簡単にし、プロミスベースではなくコールバックベースで動作しますが、プロミスをサポートするために.then()メソッドを提供しています。
SuperAgentはテスト目的で人気があり、リクエストやレスポンスを簡単に操作できるため開発者が簡単にHTTPリクエストを扱うことができます。
// SuperAgentの使用例
const request = require(‘superagent’);
request
.get(‘https://api.example.com/items’)
.then(res => {
console.log(res.body); // レスポンスボディの表示
})
.catch(err => {
console.error(err); // エラー処理
});
axiosで使う方法
axiosはPromiseベースのHTTPクライアントで、ブラウザとNode.jsの両方で動作します。
JSONデータの自動変換、リクエストとレスポンスのインターセプト、広範な設定オプションなど、豊富な機能を提供しています。
axios.get(‘https://api.example.com/items’)
.then(response => {
console.log(response.data); // レスポンスデータの表示
})
.catch(error => {
console.log(error); // エラー処理
});
fetch APIで使う方法
fetch APIはモダンブラウザに組み込まれているネイティブのAPIで、JavaScriptでHTTPリクエストを行うための一般的な方法です。
fetchはPromiseベースのAPIを提供しており、非同期のHTTPリクエストを簡単に扱うことができます。
fetch(‘https://api.example.com/items’)
.then(response => {
if (!response.ok) {
throw new Error(‘Network response was not ok’);
}
return response.json(); // JSON形式でレスポンスを解析
})
.then(data => {
console.log(data); // レスポンスデータの表示
})
.catch(error => {
console.error(‘There has been a problem with your fetch operation:’, error);
});
jQueryによるAjaxの使い方
jQueryとAjaxの連携
jQueryは基本的に「セレクタ」と「メソッド」で構成されており、次のように記述します。
$(‘セレクタ’).メソッド();
});
「セレクタ」・・・操作するHTML要素の対象を記述する
「メソッド」・・・操作する内容を記述する
また、冒頭の「＄」は関数を表し、Wordpressなどでは「jQuery」と記述することもあります。
jQuery Ajaxの基本的な使い方
scriptタグでjQueryのライブラリを読み込み、さらに別のscriptタグで以下のように処理を記述します。
<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などのメジャーなファイルを読み込むことができます。
jQueryでAjaxを処理する際の注意点
jQueryを使用してAjaxを処理する場合、効率的かつ安全にデータ通信を行うために、いくつかの重要な注意点があります。これらの注意点を実践することで、アプリケーションの堅牢性とユーザーエクスペリエンスを向上させることができます。
エラーハンドラを必ず使用する
Ajaxリクエストはネットワーク問題やサーバーエラーなどのさまざまな理由で失敗する可能性があるため、.done(), .fail(), および .always() メソッドを適切に使用して、成功時と失敗時の両方に対応するエラーハンドラを設定することが重要です。
url: ‘example.com/api/data’,
method: ‘GET’
}).done(function(data) {
console.log(‘データの取得に成功:’, data);
}).fail(function(jqXHR, textStatus, errorThrown) {
console.error(‘データの取得に失敗:’, textStatus, errorThrown);
});
レスポンスデータの形式を確認する
サーバーからのレスポンスが期待したデータ形式（JSON, XML, HTMLなど）であることを確認することも大切です。
dataTypeオプションをAjaxリクエストで明示的に指定することで、jQueryがサーバーからのレスポンスを適切に解釈し、自動的に変換することができ、データの取り扱い時の予期せぬエラーを防ぐことが可能になります。
url: ‘example.com/api/data’,
method: ‘GET’,
dataType: ‘json’ // レスポンスのデータ形式をJSONとして指定
});
キャッシュの扱いについて注意する
ブラウザは効率化のためにレスポンスをキャッシュすることがありますが、これによって古いデータが表示されることがあります。
特にGETリクエストで頻繁に内容が更新されるデータを扱う場合、cache: falseオプションを使用してキャッシュを無効にするのがよいでしょう。これによってjQueryがリクエストのURLにタイムスタンプパラメータを追加し、常に最新の情報を取得できるようになります。
url: ‘example.com/api/data’,
method: ‘GET’,
cache: false // キャッシュを無効化
});
最新のバージョンのjQueryを使用する
セキュリティ修正や新機能の追加が行われるため、常に最新のjQueryバージョンを使用してください。
古いバージョンのjQueryを使用していると未修正のセキュリティ脆弱性によりアプリケーションが攻撃を受けるリスクがあります。
定期的に公式サイトを確認し、アップデートがあれば速やかに対応しましょう。
jQueryでAjaxを処理する際のよくあるトラブル
jQueryを使ってAjaxを実装する際には、特に注意が必要な点がいくつかあります。
ここでは、そのようなトラブルとその回避方法について詳しく説明していきます。
通信エラー
jQueryを使用したAjax通信では、ネットワークの問題やサーバーのダウンなど様々な原因で通信エラーが発生することがあります。
このようなエラーを適切にハンドリングするためには、.ajax()メソッドのerrorコールバックをしっかりと設定する必要があります。
また、timeoutプロパティを設定して、特定の時間内にレスポンスがない場合にはエラーとして処理するようにすることも効果的です。
url: ‘example.com/api’,
timeout: 2000, // 2秒でタイムアウト
success: function(data) {
console.log(‘Success!’, data);
},
error: function(xhr, status, error) {
console.error(‘Failed to fetch data:’, error);
}
});
レスポンスデータの解析エラー
サーバーから返されるデータ形式が期待していたものと異なる場合、データ解析エラーが発生することがあります。
JSON形式のデータを期待しているのに実際はXMLやHTMLが返された場合で、これを避けるためにはdataTypeオプションを使用してレスポンスの形式を明示的に指定することが重要です。
url: ‘example.com/api/data’,
dataType: ‘json’, // レスポンスをJSONとして期待
success: function(data) {
console.log(data);
},
error: function() {
console.error(‘Invalid JSON data’);
}
});
クロスドメインリクエストエラー
異なるドメイン間でのデータやり取りは、CORSポリシーにより制限されることがあります。これを解決するには、サーバー側でAccess-Control-Allow-Originヘッダーを設定しましょう。
また、jQueryを使用したAjaxリクエストは、XSS攻撃に脆弱になる可能性があります。ユーザー入力を含む場合は、内容を適切にエスケープまたはサニタイズしましょう。データの送受信にHTTPSを使用することで、中間者攻撃（MITM）を防ぐことができます。
まとめ：JavaScriptでAjaxを処理するならjQueyが便利
jQueryでAjaxを使う方法やメリットについて、いかがでしたでしょうか？
近年では流行は落ち着いてきましたが、Webサイト制作では未だに根強い人気があります。jQueryが使われているWebサイトを刷新したいといった場合にも既存の挙動を理解する必要がありますから、この機に理解を深めるのもおすすめです。
また、自社内でWebサイトやアプリ開発を検討中であれば、システム開発会社に相談することもおすすめです。
Webアプリ開発会社の選定に迷った場合は、実績豊富な株式会社Jiteraに一度ご相談ください。貴社の要件に対する的確なアドバイスが提供されると期待できます。
