仕組みの理解が実装を加速させる
今回は「Ajaxとは何か」です。JavaScriptを勉強しだすと必ずぶつかる壁がAjaxです。
「エイジャックスなんとかっこいい名前だ。よし寝よう」とならないように今日はわかりやすく解説します。
- Ajaxって何？
- Ajaxは知っているけど実は中身がわからない
- 実装はできるけど何をしているかわからない
このように悩んでいる方に向けた内容になります。
この記事を読めば、Ajaxがなぜ使われるようになったのか。その裏で動いている仕組みがわかるようになります。
仕組みが理解できると実装しているときに何をしているか理解できるようになるため、よく理解せずにコピーして実装している状態から使いこなせるようになります。
AjaxはJavaScriptの真骨頂の一つです。頻繁に使う技術ですので、Ajax恐怖症から脱却していきましょう。
Ajaxとは何か
Ajaxとは一言で言うと次のようになります。
ページの再読み込みをしないと何が便利なのか。ブラウザで他の処理をしながら、データの取得や更新ができることです。
まずは、具体例を見てイメージを掴みましょう。
Ajaxの利用例
ajaxはグーグルマップの表示、Twitterのいいね、などに使われています。
グーグルマップは移動させる時、画面が読み込まれて真っ白になることはありません。
Twitterのいいねをするときもハートマークを押した瞬間に画面が読み込まれることはありません。
このように、AjaxはWebアプリケーションの様々な場面で利用されています。
地図を動かすたびに画面を読み込んでたら使い物になりません。「いいね」する度に読み込まれていたら、イライラしてアプリごと削除したくなります。
なぜajaxが普及したのか
Ajaxが利用された背景にはJavaScriptの役割の拡大があります。
画面に動きをつけるのが最初のJavaScriptの役割でした。
しかし、アプリケーションの拡大とともにもっと便利に使いやすくが求められた結果、Ajaxが普及しました。
読み込みの時間をなくし、パソコンにダウンロードして使用するアプリと同様の感覚で使えるようにしたかったのです。
他にも、即時反映されるからできる機能の要望もありました。
Ajaxを使用しない場合、検索をするには一度データを読み取ってレスポンスが返ってきてから検索結果を表示していました。
Ajaxを使えばデータベースから同時に検索できるようになったため、検索ボタンをクリックする前に検索結果を表示できるようになり、ユーザー体験が向上しました。
Ajaxの仕組みを深ぼる
Ajaxは「ページを再読込せずに、データを取得して画面を更新する手法」だと説明しました。
この仕組を詳しく説明すると次のようになります。
む、難しい。。噛み砕いてポイントをまとめると次のとおりです。
- JavaScriptが使用できる機能でリクエストを送る
- レスポンスとしてJavaScriptが使いやすい形でデータ返している
- 取得したデータを使ってHTMLファイルの一部を書き換える
- この時取得したデータの形式はJSONという
まだわかりにくいですよね。Ajaxの仕組みを理解するために必要な言葉を分解していきます。
- リクエストとレスポンス
- 同期通信と非同期通信
- XMLHTTPRequest
- XMLとJSON
リクエストとレスポンス
リクエストとレスポンスがわからないと話が見えなくなるので以下の記事を参考にしてください。
同期通信と非同期通信
同期通信
画面を読み込みを伴う通信です。
クライアントがリクエストを送ると、サーバーはレスポンスを返します。サーバーからのレスポンスがあるまで、クライアントは待機状態になります。
通信状態が悪くて真っ白い画面とアイコンがグルグル回っている状態です。待機中であるため、クライアントは何もできません。
ポイントは「なぜ同期通信は待機状態になるか」です。
非同期通信
画面読み込みをせずにデータを取得する通信です。
クライアントが特別なリクエストを送ると、サーバーはレスポンスを返します。
しかし、クライアントは待機状態にならないため、レスポンスが返ってくるまでの間に他の作業をすることができます。
ポイントは「なぜ非同期通信は待機状態にならないのか」です。
- 画面に表示されているHTMLファイルはすでに読み込まれている
- データがレスポンスとして返ってきた時にHTMLの一部を書き換えているに過ぎないからです。
XMLHTTPRequest
XMLHTTPRequestとは「非同期通信をするときに、JavaScriptを使ってHTTPリクエストを送る手法」です。
この手法を使えばすでに読み込んだページからHTTPリクエストを送ることができるようになります。
なぜJavaScriptを使うのでしょうか。XMLHTTPRequestの機能がJavaScriptに搭載されているからです。
難しい言葉を使えば「XMLHttpRequestはJavaScriptの組み込みオブジェクトである」といいます。
他にも、JavaScriptでString.lengthというメソッドで文字列の長さを取得できるのも、StringオブジェクトとlengthプロパティがあらかじめJavaScriptの機能として用意されているからです。
XMLとJSON
XMLとJSONはデータの形式です。お金の形式にドルや円、ユーロがあるのと同じです。
非同期通信で取得したデータはXMLやJSONでクライアントに返されます。
XML（Extensible Markup Language）
XMLとはマークアップ言語で書かれたデータの形式です。マークアップ言語とは、一言で言えばHTMLのような書き方をする言語です。
タグ<></>に意味をもたせ、文章の構造を決めていく言語です。
特徴は入れ子構造になるところです。
HTMLとの違いはHTMLはWebページを作るものに対して、XMLはデータの形式である点です。
JSON（JavaScript Object Notation）
JSONとは「JavaScriptで使われるデータ形式」です。
なぜJSONの説明をするかというと、Ajaxでやり取りされるデータの形式はJSONが主流だからです。
なぜJSONが主流になったのでしょうか。２つの理由があります。
- マークアップ式のXMLでは複雑になると人間には理解しにくい
- JSONはJavaScriptで使われるデータ形式なので、他の言語からデータ送信されたときに変換せずにそのまま使うことができる
XMLだとXML構文を解析する必要が生じるので、その分パフォーマンスが下がってしまいます。
JavaScriptはクライアントサイドで必ず使われるのでJSONが広く使われるようになりました。
現在、JSONはサーバーサイドの言語でも幅広く使われるようになっています。
まとめ
最後にまとめていきましょう。
ページを再読み込みしない理由は、非同期通信によりHTMLファイル全体を読み込む必要がないからでした。
Ajaxの仕組みのポイントは以下の３点
- XMLHTTPRequestを利用してHTTP リクエストを送る
- レスポンスとしてJSONを返している
- 取得したJSONを使ってHTMLファイルの一部を書き換える
難しそうに見えて意外とシンプルなんです。
同期通信はHTML全体を再描画するから待機時間が発生する。非同期通信は、JSONを取得してJavaScriptを使ってHTMLの一部を更新するから待機時間が発生しない。
そのためブラウザの操作ができて様々機能を使えるようになったのです。
この記事がAjaxを積極的に使おうと思うきっかけになると嬉しいです。ではまた！
※わかりやすさを重視しているため正確性にかける部分があります。詳しくは書籍等学習してみてください。
コメント