はじめてAjaxを実装する人へ、効率的な学習方法について書きました

ajax

jQueryやJavaScriptを覚えて少し経ったくらいに、「よしAjaxでもやってみるかな」という気持ちに誰もがなるものです。すくなくとも私はそんな気持ちになりました。('∀`)

[スポンサーリンク]

Ajaxは「非同期通信」と呼ばれます。「通信」という文字が入っている通り、外部とのやり取りをするものです。直感的に難しさを感じさせる説明ですね。
わたしは最初やみくもにAjaxのロジックを書き殴っていたので、特に難しく感じました。

今になって考えると、ちゃんとした手順でAjaxを学習しておけば、意外と難しくなかったのでは?と思います。今回は過去の自分が苦労した経験を踏まえて、効率的な学習方法を自分なりに書いてみました。
これからAjaxをやってみよう!という方の参考になれば嬉しい限りです。('∀`)

もくじ

はじめてのAjax

Ajaxって何?
Ajaxを使うのに必要なモノ
まずはローカル内で完結するAjaxプログラムを書いてみる。

Ajaxの基本編

外部API(サーバサイド)は何を使えばいいの?
提供されている外部API(サーバサイド)の紹介
外部API(サーバサイド)に通信するAjaxプログラムを実装してみる

Ajaxの応用編

Ajaxで通信後、レスポンスJSONを解析して表示する方法
Ajaxで通信中、ローディング画像(クルクル回る画像)を表示する方法
Ajaxで通信後、エラー情報を取得する方法

Ajaxって何?

Ajaxとは、HTMLページ内(クライアント)から、外部API(サーバサイド)へ非同期通信するための実装形態のことをさします。
Ajaxは、プログラムやフレームワークの名前ではありません。あくまで仕組みの名前です。
banner1

簡単にいいますと、HTMLページでボタン(登録とか検索とか)を押すと、画面遷移せずにクルクル何かが回って、実行結果が表示されるアレです。(‘∀`)

Ajaxを使うのに必要なモノ

JavaScriptのみでAjaxを実装することも可能ですが、2014年の今はjQueryを使って実装することの方がメジャーとなっています。
今からAjaxを実装されるという方は、ぜひjQueryで実装することをオススメします。

biginer-start-up4

jQueryの導入方法は、以前書いたこちらのページを参考にして導入して下さい。
jQueryをGoogle Developersから読込む方法

こちらに実際に動かすことが出来る簡単なjQueryのサンプルソースを設置しました。
demo

まずはローカル内で完結するAjaxプログラムを書いてみる。

Ajaxとは外部システム(API)と通信するための仕組みですが、外部システム(API)を持っていないという人が多いと思いますので、まずはローカル内のみで完結するAjaxプログラムを作成しようと思います。

外部システム(API)をローカルファイルへ置き換えて、Ajaxプログラムを作成します。
具体的には、ローカルファイルをAjaxプログラムを使って読込むというプログラムです。
ローカルファイルを読込むプログラムの作成方法は、過去記事のこちらを参考に作って下さい。
Ajaxを使って非同期通信する。(ローカルファイルの読み込み)

こちらに実際に動かすことが出来る、Ajaxでローカルファイルを読込むサンプルソースを設置しました。
demo

外部API(サーバサイド)は何を使えばいいの?

おそらく大部分の方が、Ajaxの通信先である外部API(サーバサイド)を持っていないのではないでしょうか。
これでは、せっかくクライアント(HTML)部分を作っても、実際に動く環境がないのでは、テストになりませんし面白くありません。
biginer-start-up5

外部API(サーバサイド)を用意する手段は2つあります。
一つは、自分で作ることです。RubyでもPHPでもJavaでも言語は何でもよいので、サーバサイドで動くAPIを作れば、クライアント(HTML)との接続が可能です。

二つ目は、天気予報等のWebサービスでAPIを公開しているので、これを使うという方法です。基本的にはユーザ登録をすれば無料で使えるサービスも多数ありますので、これらを使うのも手段の一つです。

自分で外部APIを作成するのは敷居が高いと思いますので、次の章で外部APIを公開しているサービスを紹介します。

提供されている外部API(サーバサイド)の紹介

Find Job! Startupに、現在日本で提供されている外部API(サーバサイド)のリンクを一覧化したものがあります。
ここから自分の気になったAPIへピックアップしましょう。
大体のAPIは会員登録が必要になってきます。
オススメのAPIは、はてなブックマークやTwitterといった有名どころがオススメです。
今から初めてAjaxで実装するという方は、個人的にはレスポンスのフォーマットはJSONのAPIを使うことをオススメします。JSON形式を採用しているAPIが全体的に多いです。このページでもJSON形式のAPIで解説を進めていきます。

biginer-start-up2

会員登録なしで使えるAPI

面倒な会員登録無しで、試しにAPIを使ってみたいという人にはコチラがオススメです。
地域毎の天気予報をJson形式で返却してくれるAPIです。
無料で会員登録無しで使うことが出来ます。

biginer-start-up3

使い方は簡単です。
以下のURLをブラウザに入力して実行するとJSONで天気予報の結果が却ってきます。
city=400040は都市コードになります。

http://weather.livedoor.com/forecast/webservice/json/v1?city=400040

JSONの形を整えよう

先ほどのAPIの返却されるJSONは多少複雑です。
もしJSONを目視で読んでみたいという方はコチラのツールを使って、JSONを整形することをオススメします。
コチラは以前私が作ったアプリです。

biginer-start-up3

外部API(サーバサイド)に通信するAjaxプログラムを実装してみる

さて、前置きが長かったですが、いよいよ外部API(サーバサイド)と接続していきます。
外部API(サーバサイド)との連携が、Ajaxの醍醐味だと思います。

外部へ通信するロジックはこのような感じです。
3~6行目が接続の関する設定内容です。(接続先やその他オプションなど)
8行目は、接続後の後処理になります。
こちらのサンプルソースでは、自作APIへ接続するようにしています。

        function() {
            $.ajax({
              url: 'http://localhost:8080/AplExample/family',
              type:'GET',
              dataType: 'jsonp',
              timeout:1000,
              success: function(data) {
                           alert("ok");
                       },
              error: function(data) {
                           alert("ng");
                     }
            });
        });

こちらのサンプルソースの詳しい実装方法については、コチラのページを参考にしてください。
Ajaxで外部APIへ通信する方法

Ajaxで通信後、レスポンスJSONを解析して表示する方法

Ajax通信するだけでは、Webアプリとしては物足りませんね。
Ajax通信した後、APIのレスポンスデータを解析して、画面へ表示して初めてWebアプリとして機能すると思います。

こちらの記事で、レスポンスデータを解析して画面へ表示する方法を解説しています。
レスポンスデータはJSONであることを前提として解説します。
AjaxでJSON形式のデータを読み込みパースする方法

Ajaxで通信中、ローディング画像(クルクル回る画像)を表示する方法

Ajaxで通信している間、何も表示をしていないとユーザとしては「アレ?ちゃんと動いているのかな」と不安になってくるものです。
他のサイトでもよく見かけますが、Ajaxで通信している間クルクルと回る画像を表示して、現在処理中であることをアピールするとユーザにとっても安心です。

こちらの記事で、クルクル回る画像を表示する方法を解説しています。
クルクル回る画像自体を作る方法も紹介しています。
Ajaxで通信中にローディング画像を表示する方法

Ajaxで通信後、エラー情報を取得する方法

Ajax通信していると、エラーが発生することもあります。
エラー時には適切にメッセージを表示したり、クライアント(HTML)側でエラー処理を行います。
クライアント(HTML)側では、エラーが通信に関するエラーなのか、それともAPI自体のエラーなのかを切り分けて処理する必要があります。

API自体のエラーについては、各APIに依存しているためエラー処理もAPI毎で異なりますので、今回は省略します。
通信に関するエラーについては、どんなAPIでも共通です。
こちらの記事で、通信エラー情報を取得する方法を紹介しています。
Ajaxの通信エラー情報を表示する方法

さいごに

Ajaxについての基礎的なことから応用的なことまでザッと流して書いてみました。
いかがでしたか。
このページに書いてあるソースコードと、天気予報API(自作ではなく外部のAPI)で試しにAjax通信したコードを書くことはできますので、一度ためしてみてはいかがでしょうか。

一見Ajaxはとっつきにくい感じもありますが、なんだかんだと言ってもAjaxは開発していて楽しいです。
わたしもこのページを書いていて、久しぶりに何か作ってみたいなという気持ちになりました。
それでは!