Webアプリで一番時間を費やす、JavascriptのAJAXについて学んでいきましょう。
AJAXは非同期とも言われ、通常プログラミングは書かれているコードの上から下に順番に処理をするところ、イベント発火という任意のタイミングで実行される処理の事を言います。
AJAXを使ったプログラムの本質を理解するとJavascriptのプログラミングに大きく役立つので、是非とも理解しておきましょう。
AJAXとは？
RestfulAPIや、単純なサーバーとの通信を行う場合に、Javascriptでは、AJAXという手法でデータのやり取りを行います。
解説サイト :
JavaScriptのFetchとAjaxとの完全比較｜2024年最新版
JavascriptのAJAX処理は、２つの方法でのプログラミングで実現できます。
XMLHttpRequest
// ajax処理の起動
ajax(){
// 必要なクエリ情報
const query = {
mode : 'test',
}
const xhr = new XMLHttpRequest()
xhr.open('POST' , 'APIサーバーのエンドポイント(URL)' , true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
xhr.onload = this.loaded.bind(this) // レスポンス処理
const query_string = Object.entries(query).map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&')
xhr.send(query_string)
}
// レスポンス処理
loaded(e){
console.log(e.target.response)
}
fetch
const options = {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
}
fetch(url, options)
.then(response => {
// レスポンス処理
})
.catch(error => {
// エラーハンドリング
});
学習ポイント
XMLHttpRequestに比べてfetch関数の方が見た目もわかりやすく、簡単に書く事ができます。
機能としても新しいfetch機能を使う方がオススメです。
ただし、古いブラウザ（最近ではあまり気にしなくてもいいですが）での使用を考える場合は、XMLHttpRequestを使って確実に処理するという場合もあります。
※XMLHttpRequestのことをAJAXとして、fetchをAJAXと分離するように書かれているリファレンスもありますが、このチュートリアルでは、非同期でのデータ通信処理として、fetchもAJAX処理をする機能として記載しています。
非同期について
非同期は、冒頭書いたとおり、順番に実行されず、特定のイベントのタイミングで実行されるプログラム処理の事です。
また、HTMLタグにも非同期が存在していて、Javascriptを読み込むscriptタグは、通常src属性のjavascriptファイルが読み込未完了してから、次のHTMLタグの処理を実行します。
<script src="sample.js"></script>
次のように書くと、非同期的にJavascriptファイルが読み込まれるようになります。
<script src="sample.js" async></script>
ただし、javascriptの読み込みが完了したタイミングで実行されるのでできればページの読み込みが完了したタイミング(DOMContentLoaded)で実行開始したい場合は、次のように記述します。
<script src="sample.js" async defer></script>
このように、非同期は、色々なファイルなどのデータの読み込みを完了したタイミングをイベントとして取得できるタイミングで、処理を実行する事を意味します。
scriptタグと同じように、画像ファイルや動画ファイルなどのデータも読み込みの完了を待つまでLoading表示をするとか、画面の特定のスクロールの値で読み込みを開始するなどの処理も非同期としてプログラミングする事が可能になります。
下記サイトに読み込みタイミングを図解してくれているので、理解しておきましょう。
<script> タグに async / defer を付けた場合のタイミング
AJAXのデメリット
AJAXベースのプログラミングをすると、目に見えない処理が裏側で実行されるため、
テストや検証、または不具合の原因調査などが困難になります。
適度にコンソール表示を行って、処理の実行を可視化する事で対応する事が必要です。
ただし、過度なコンソール表示は、処理スピードが劣化する原因にもなるので、検証時には、コンソール表示をして、本番環境では表示しないというような分岐処理も検討しましょう。
あとがき
jQueryを使うと$.ajax(...)という簡単な記述でプログラミングする事ができますが、最近脆弱性が多く見つかったため、Web開発現場では、jQuery離れが起きているようです。
人気のライブラリなどを使うと、流行り廃りや、バージョンアップによる記述の違いなどで、無駄な学習コストが掛かったり、バージョンアップによる不具合回収、またはライブラリのセキュリティホールなどによる防御不能の障害が発生することがあります。
個人的には、全て自己責任で行えるようにするために、ネイティブコードでキチンとプログラミングできるようにしておく事が重要だと考えています。
これまでの経験から、ネイティブコードで書いておくと、多くの場合に下位互換を担保してくれるので、長い目で見たプログラミング寿命はそちらの方がいいのではないかと思います。
0 件のコメント:
コメントを投稿