LoginSignup
7
4

More than 3 years have passed since last update.

AjaxはGoogleMapとかで使われている

Posted at

概要

アプリ開発手法の一種であるAjaxについて簡単にまとめました。

と言っても、

A(Asynchronous)・・・非同期通信
ja・・・JavaScript
x・・・XML

このように分解した時に、つまりどういうこと?となるのはおそらく「非同期通信」ではないでしょうか。
それでこのタイトルをつけて簡単にまとめました。

Ajaxとは

アプリ開発手法の一つで、JavaScriptXMLを用いて非同期通信を実装する開発手法。

XMLはマークアップ言語の一種で、分かりやすく言うとHTMLのようなものです。
タグを使ってデータの構造を記述していくもので、プログラミング言語ではありません。

ちなみにデータ形式としてXMLを採用するメリットは、

  • 可読性が高い
  • 記述の順序に依存しない

などがあります。

XMLの例
<?xml version='1.0' encoding='utf-8'>
<root>
    <employee>
        <employ>
            <ID>111</ID>
            <Name>Mike</Name>
            <Country>USA</Country>         
        </employ>
        <employ>
            <ID>222</ID>
            <Name>Nancy</Name>
            <Country>Canada</Country>
        </employ>
    </employee>    
</root>

データ形式自体は他にも、CSVやJSONなどがよく使われるものとしてあります。
詳しい違いなどについては、こちらをどうぞ。

引用:【何が違う?】データ形式(CSV, XML, JSON)の特徴を知ろう


画面もいちいち消えないしずっと操作を受け付けているから便利

非同期通信を使えば、同期(画面の更新)することなくサーバからデータの取得ができます。
身近なものだとGoogleMAPなど地図アプリに使われているのが分かりやすいです。

例えばGoogleMapで地図を縮小すると建物、道、地形のディティールがアバウトになって代わりに都道府県、市区町村とか大きなエリアの情報が読み込まれて出てくると思います。

反対に拡大すると、先ほどの都道府県、市区町村とかの大雑把な情報が消えて建物、道、地形、店名、ランドマークとかのディティールが読み込まれて細かく表示されると思います。

GoogleMapでなくてもマップアプリならだいたい一緒です。

その時に、普段Googleで何か検索してWEBサイトを見るときのように、操作の受付・画面表示が中断(真っ白になる)して切り替わることってないですよね。
非同期通信を実装するとリアルタイムでデータを読み込むので、画面表示してる状態で操作も受け付けている状態で更新できます。

進むたびに操作を受け付けなく、画面が真っ白になって切り替わるナビがあったらとても使いづらすぎますね。

これが非同期通信の特徴でできることです。

逆に同期通信はWEBページを移動した時などに一瞬画面が白くなって切り替わるような通信方法で、その間は操作を受け付けません。

まとめ

AjaxのA(asynchronous)、非同期通信にとXMLについて簡単にまとめました。

今後、次世代通信規格である「5G」が民間向けに商用利用されるようになると、通信量が多くかつスピードも求められる非同期通信の活用の幅はさらに広がるので今後もアプリ開発をしていきたい人にとってはおさえておきたいですね。

参考

この記事は「CodeShip」内での実際の質疑応答や指導・アドバイスの一部を基に作成しています。

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4