初心者向け学習方法一覧はこちら
はじめに
本記事ではJavaScriptのライブラリ「jQuery」でサーバ通信する方法とAjaxについて解説します。 また、外部のサーバと通信して外部サービスの機能を利用するWeb APIという仕組みの概要と活用方法もご紹介します。
jQueryを利用して非同期にサーバ通信を行うと、Webページを読み込み直さずにバックグラウンドでサーバとデータの送受信が可能です。
jQueryとは？
jQueryはJavaScriptのライブラリの1つでHTMLやCSSの操作を行う機能が多く含まれています。 jQueryを利用することで、Webページでよく使われている写真のスライドショーや住所などの入力項目のチェックなどの機能を簡潔なコードで実装可能です。
JavaScriptで1からコードを記述するよりも効率的で、メンテナンス性が高いコードを記述することができます。
jQueryの詳細な解説は
Ajax通信とは？
AjaxとはAsynchronousとJavaScriptとXMLをあわせて作られた造語です。 Asynchronousは非同期という意味で、JavaScriptの技術を利用してサーバと非同期通信を行うことをAjax通信といいます。
非同期の通信とはどのようなものでしょう？
通常、Webページを閲覧する際の流れは以下の通りとなっています。
- サーバにリクエストを送信する（サイトのURL）
- サーバがリクエストをもとに結果を返却する（指定されたHTMLの内容など）
- ブラウザが返却された内容をもとにWebページを表示する
- 次のリクエストをサーバに送信する
同期通信ではリクエストを送信したら、結果が返却されるまで他の操作ができません。 1つの処理が終わったら次の処理を順次実行するので、待ち時間が発生してしまいます。
非同期処理は時間のかかる処理を進めながら他の操作ができる仕組みです。 例えばECサイトでショッピングをする場合を考えてみましょう。
サーバから商品の情報を取得するのは時間がかかる処理です。 同期通信では1ページに表示する情報をすべて受信してから表示しますが、非同期通信なら時間のかかる商品情報以外のコンテンツを先に表示できます。 先に表示された箇所を操作できるので、商品情報がすべて表示される前にメニューをクリックしたり検索条件の入力もできるようになります。
Ajaxの仕組みを利用するとWebページ全体の再読み込みをせずにコンテンツ内容のみを更新できます。 ページ全体の再読み込みには時間がかかりますが、Ajaxでコンテンツの必要な箇所のみを更新することで新しい情報をシームレスに更新し続けられるのです。
Ajaxの技術が一躍有名になったきっかけと言われているのがGoogleマップサービスです。 Googleマップでは表示しているマップをページ全体の再読み込み無しでスクロールができます。 非同期通信技術を取り入れる以前のマップサービスではマップの右側を表示したいときは新しいマップを読み込んで表示していました。
今では当たり前のように利用されている技術ですが、非同期通信技術が確立したことでWebの表現は大きく変わりました。
Web APIとJSONについて知ろう
Web APIとは？
API（Application Programming Interface）とはアプリケーションの機能を外部に連携するための仕組みのことです。 Web APIはAPIの中でもHTTP通信などのWeb技術を用いて構築された外部サービスの情報を受け取ることができるものです。
プログラムからWeb APIにアクセスして結果を受け取ることで、Webページ内に外部サービスの情報を元にしたコンテンツを実現できます。
例えばWebサイトに地図を埋め込みたい場合はGoogle Map APIなどを利用します。
JSONとは？
JSON（JavaScript Object Notation）とはJavaScript言語をベースに作成されている、軽量なテキストベースのデータ交換フォーマットです。 JavaScriptの記法をベースにしていますが、JavaやPython、PHPなど他の言語もJSON形式をサポートしています。
JSONは検索キー（key）と値（value）のセットで構成されています。 検索キーを指定すると対応する値を取得できます。
例えば下記のJSON形式のデータの場合、検索キーとして”1st”を指定すると「富士」という値を取得できます。
{
"1st": 富士,
"2nd": 鷹,
"3rd": 茄子
}Web APIを使ってみよう
それでは実際にWeb APIを使ってみましょう。 今回はzipcloudという郵便番号検索APIを利用します。 郵便番号検索APIはWebページのフォームなどで使用されている、郵便番号を入力すると該当する住所を取得できるAPIです。
zipcloudのサイトはこちらです。
サイトを確認すると「リクエストURL」「リクエストパラメータ」「レスポンスフィールド」という項目があります。
リクエストURLはAPIを利用するためにアクセスする場所のURLです。 リクエストパラメータはAPIの機能を利用するために必要なパラメータです。 レスポンスフィールドはAPIから返却されるデータ値と形式です。主にJSON形式で返却されます。
zipcloudはブラウザからも直接結果を確認することができます。 試しに下記のURLにアクセスしてみましょう。
郵便番号1050011は東京タワー所在地のものです。
レスポンスフィールドで定義された形式のデータが表示されます。
「zipcode=」の右側の7桁の郵便番号を、自分の知っている郵便番号に変更して結果を確認してみましょう。
住所入力フォームを作成してみよう
会員登録などでよく見る登録情報を入力する画面を作成してみましょう。
項目は「名前」「郵便番号」「住所」です。 住所は市区町村までと番地に分けています。 まずは画面の見た目と必須チェックを実装します。
「検索」ボタンにはまだ何も機能をつけません。 「登録」ボタンはメッセージを表示するのみです。
※読み込めない場合はRun Penをクリックしてください。
zipcloudを利用して郵便番号検索の機能を追加してみましょう。 「検索」ボタンをクリックしたときに呼び出されるsearch関数の中でリクエストURLを生成して、結果を受け取っています。
zipcloudから返却された値を取得できなかった場合はエラーとして「該当データを取得できませんでした」というメッセージを表示します。
※読み込めない場合はRun Penをクリックしてください。
郵便番号検索機能を追加後のコードを参考にしながら、機能追加前のコードに自分で機能を追加してみましょう。
様々なAPIを活用してみよう
今回は郵便番号検索APIのzipcloudを利用してみましたが、他にもたくさんのWeb APIが存在しています。 APIbankという公開されているAPIを検索できるサービスがあります。 https://www.apibank.jp/ApiBank
天気の情報を取得できるAPIやSNSの機能を利用できるAPIなどカテゴリごとにまとめられているので、利用したいAPIを比較しながら探すことができます。 実際に様々なAPIを活用してみましょう。
まとめ
今回はjQueryのサーバ通信について解説しました。 AjaxはWebページだけではなくスマホアプリでも活用されています。 Webサイトだけではなくアプリ開発でも必要になる知識ですので、是非詳しく勉強してみてください。
また、Web APIについても解説しました。 Web APIを活用することで自身で開発を行わずとも便利な機能を追加することができます。 公開されているWeb APIには様々な種類のものがあります。 無料で利用できるものも多いので、色々と試してニーズに合うものを探してみましょう。
次回は、Node.jsについて解説します。
プログラミングスクールの選び方
転職を検討中の方向け
フリーランス・副業で活躍したい方向け
教養・キャリアアップしたい方向け
給付金について詳しく知りたい方向け
