Web APIとはなにかについてまずは解説します。他のAPIとの違いやWeb APIの種類についても説明します。

### Web APIはHTTP通信によってやり取りするAPI

*Web APIはHTTP通信によってやり取りするAPIのことです。*HTTPとはWebサーバと通信する際に使う通信プロトコルのことです。Web APIを使う際はインターネット経由でWebブラウザを通じてアクセスする必要があります。

多くの企業が自社の認知度アップなどのためにWeb APIを公開しています。Web APIは個人でも活用できるものが多く、登録することで自分のアプリに機能を追加することが可能です。

**Web APIでできることは多岐にわたりますが、中でも代表的なのがSNSログインです。**ECサイトなどのWebアプリを活用する場合、ユーザーはアカウント登録を行う必要がありますが、アカウント登録が面倒で利用を止めてしまう方も多くいます。SNSログインを導入すると、アカウント登録しなくてもSNSアカウントを利用してログインすることが可能です。

ほかにも、Web API経由で取得した情報を商品分析に利用したり効果検証を行ったりすることができます。他社サイトから情報を取得する場合スクレイピングを行う方法もありますが、Web APIが用意されているならスクレイピングを行うプログラムも必要ありません。

APIはApplication Programming Interfaceの略であり、プログラムの一部機能を外部のプログラムから利用できるようにした仕組み全般を指します。*Web APIはそのなかでもHTTP通信によってやり取りするもののことです。*Web APIはネット環境さえあれば、プログラミング言語が違っても通信できる点がメリットです。

Web APIとプログラム間で通信を行うには通信プロトコル（規約）に従う必要があり、通信プロトコルによってWeb APIの種類は別れています。Web APIには次の2つの種類があります。

SOAPはSimple Object Access Protocolの略でHTTPの呼び出しと応答にXMLを使う通信プロトコルのことです。*拡張性の高さなどに強みがあるAPIです。*

RESTはRepresentational State Transferの略であり、SOAPよりも新しい通信プロトコルのことです。**軽量で使いやすいと言われており、最近主流で使われているAPIです。**

REST APIは「提供するリソースはURLで表現できるようにする」「セッション管理などせず、現在の状態ではなくあくまで入力内容によって出力を決定する」などルールが細かく決められており、利用者によって使いやすいAPIとなっています。

続いて、Web APIを使うメリットについて解説します。Web API導入のメリットを知ることで初めてWeb APIを使いこなせるようになるでしょう。

### Webサービスの利便性を上げられる

Web APIを使うことでWebサービスの利便性を上げることが可能です。最近は似たようなWebサービスが増え、ユーザーもWebサービスを日常的に使うことが増えました。そのため、ユーザーのWebサービスの水準が上がっている傾向があります。

*ユーザーを満足させるWebサービスを作るには、他社サービスにはない多くの機能を追加する必要があります。*Web APIを使うことで、Webサービスに新しい機能を追加することができ、Webサービスの利便性を向上させることが可能です。

### 低コストで機能を追加できる

Web APIは低コストで機能を追加できるのもメリットです。Web APIを使わなくても、自分でWebサービスに機能を追加することはできますが、1からプログラムを組むのは相応のコストを必要とします。また、プログラムを組むだけでなくテストも繰り返さなくてはいけません。

**Web APIを活用すればすでに完成された外部のプログラムを利用できます。**こちらで用意しなくてはいけないのは、Web APIと通信するためのプログラムのみなので、開発コストを大幅に削減することが可能です。

*Web APIを上手く活用することでユーザー層を広げられるメリットもあります。*たとえば、ログインSNSを導入することでそのSNSを日常的に活用しているユーザーを取り込める可能性があります。

また、決済APIを活用し自社サービスにさまざまな決済手段を追加すれば、クレジットカードを持っていないユーザーも使えるようになります。ユーザー層を広げることができれば商品売上にもつながるため、Web APIを活用しないことで機会損失している可能性もあるでしょう。

自社で会員登録やログイン機能を実装する場合、セキュリティ面を考慮したうえで実装しないといけません。こういった機能を実装するには、ユーザーの個人情報が格納されたデータベースにアクセスする必要があります。ユーザーがデータベースに不正アクセスし、情報を抜き出すことは防がないといけません。

**SNSログインならセキュリティ対策をサービス提供企業に任せることが可能です。**そのためセキュリティ面の心配が減るのもメリットと言えるでしょう。

続いて、Web APIを使うデメリットについて解説します。状況によってはWeb APIを使わない方が良い場合もあるので注意しましょう。

*Web APIを使うと、API提供企業に依存してしまう可能性があります。*提供企業がサービスを停止すると、Web APIを利用したログインや決済機能などが使えなくなってしまいます。また、提供企業がメンテナンスなどを行う場合もその期間サービスが使えなくなるため、あらかじめユーザーに告知しないといけません。

また、Web APIの仕様が変更されると、自社のプログラムもそれに対応しないといけない可能性があるでしょう。このように、API連携先に依存してしまうのはデメリットでもあります。

### 不具合時に自社で対応できないことも

**Web APIに障害などが発生した場合も利用ができなくなってしまいます。**不具合発生時は自社で対応することができず、提供企業の対応を待たなくてはいけません。このような障害が発生した際に企業としてどのような対応を取るかも、あらかじめ検討しておく必要があります。また、不具合が多いWeb APIは利用を避けるなどの措置を取る必要もあるでしょう。

最後に、Web APIの使い方について解説します。Web APIの使い方はサービスによって異なるため詳しくは各サイトを参考にする必要がありますが、基本的な利用の流れは共通していることが多いです。

### 利用したいサービスに登録する

まずはWeb APIを利用したいサービスにアカウント登録を行う必要があります。アカウント登録では、名前やメールアドレス、自社サービスのURLなどを入力する必要がある場合が多いです。無料で使えるため、クレジットカード登録などは基本不要になります。*海外サービスの場合アカウント登録画面が英語で書かれているため、日本語で登録方法を解説しているサイトなどを参考にしながら処理を行いましょう。*

Web APIを活用するには、事前にAPIキーやシークレットキーなどを設定する必要があります。各Web APIの仕様書に従ってAPIキーなどを取得します。APIキーはランダムに生成された文字列であり、利用者ごとに別の文字列が使われています。

**APIキーは外部に漏洩しないように厳重に管理する必要があります。**漏洩すると、APIキーの情報から会社の機密事項が取り出されてしまう可能性もあるためです。

### APIキーなどをアプリに設定する

*続いて、APIキーなどを自分で開発しているアプリに設定します。*APIキーは通信を行うプログラムに直接貼り付ける方法でも利用は可能です。しかし、コピーミスや漏洩を防ぐためにAPIキーは別ファイルなどで管理するのが良いでしょう。

最後に、実際に自分のプログラムからWeb APIを利用してみます。**Web APIにアクセスして情報を受け取ることを「APIを叩く」と表現します。**Web APIの仕様書にはサンプルコードが用意されていることもあるので、まずはサンプルコードをそのまま実行してみましょう。

Web APIを叩くことに成功したら、後はWeb APIの各コマンドについてリファレンスを見ながら理解していきます。また、Web APIの処理結果はXMLなどで返ってくるので、データを整形するためのプログラムも用意する必要があります。

## Web APIを活用することでWebサービスに新機能を追加できる

本記事ではWeb APIとはなにかについて解説しました。Web APIの種類やメリット・デメリットなどがおわかりいただけたかと思います。Web APIを使うことで外部プログラムの機能を手軽に活用でき、自社サービスに機能を追加することが可能です。

*Web APIのほとんどは無料で活用できるため、Web APIに興味がある方は実際にアカウント登録を行って使ってみることをおすすめします。*リファレンスを見ながらWeb APIの各機能を試していくことで、Web APIとはどういうものか理解も深まるでしょう。本記事がWeb APIに興味がある方にとって有意義なものとなれば幸いです。

市場が拡大しているRPAとは？おすすめの資格を解説！

Postmanとは？API開発に役立つ機能や利用のメリットを解説

Web APIについて勉強したいと思うものの、Web APIの仕組みや使い方が分からず利用できない方も多いのではないでしょうか。本記事ではWeb APIとはなにか、仕組みや使い方、メリット・デメリットについてわかりやすく解説します。

Web APIはHTTP通信によってやり取りするAPIのこと

Web APIを活用することで自社サービスの利便性を向上させられる

Web APIを使う場合APIキーなどの登録を行う必要がある

Web APIとは？仕組みや使い方、メリットをわかりやすく解説！

Ajaxとは*Asynchronous JavaScript and XML*の略で、プログラミング手法を指します。読み方は*エイジャックス*です。Ajaxの最初の文字Asynchronousは*非同期*を意味しており、Ajaxによってウェブブラウザで使うJavaScriptやXMLで**非同期通信**を行うことができます。

Ajaxを使うには、JavaScriptの*XMLHttpRequestクラス*やウェブアプリケーションフレームワークの*jQuery*等を用います。これによりウェブアプリケーションをインタラクティブに操作したり、操作を妨げずにデータを更新したりすることが可能です。

JavaScriptは**オブジェクト指向のスクリプト言語**で、クライアント側で処理されます。JavaScriptは通常のHTMLで処理できない*動的コンテンツ処理*や、*キー入力レスポンス*等に対応します。

JavaScriptは、最初にNetscape Navigatorで実装されました。JavaScriptの名称は、業務提携していた当時のサンマイクロシステムズ社（現オラクル社）の製品であるJavaの名称を使用し、名付けました。そのため、*Java*とは実際の構造・用途とも*異なるソフトウェア*です。

JavaScriptの特徴とは？何ができるのか、メリット・デメリットも解説

XMLとは*Extensible Markup Language*の略で、マークアップ言語を汎用利用するために拡張したものです。具体的な用途としては、XMLは**データ交換のフォーマット**として利用されることが多いです。なお*HTML*は*文章構造を記述する言語*で、*XML*は*データ構造と値を記述する言語*となります。

これにより大量の文書データをシステム間で交換したり、蓄積したりすることができます。

XMLとは？詳細や特徴、メリット・デメリットを徹底解説！

HTTPは*Hyper Text Transfer Protocol*の略です。 HTTPとはHTMLやXMLのマークアップ言語で記述された文書（ハイパーテキスト）を、*ウェブクライアントとウェブサーバ間で通信*するための**プロトコル（通信規約）**を指します。通信にはURL・URIを用い、リクエストとレスポンスのセットで通信を行います。

・*HTTPリクエスト*
HTTPリクエストとは、ウェブクライアントからウェブサーバにリクエストを送信する際のメッセージです。HTTPリクエストのメソッドはいくつかありますが、GETメソッドとPOSTメソッドが大半のリクエストとなります。通信はTCPで接続し、HTTPあるいはHTTPSを用います。

リクエストデータは「メソッド」「リクエストターゲット」「HTTPバージョン」の要素で構成されています。
データ例：
　GET “要求するURI” HTTP/1.1

・*HTTPレスポンス*
HTTPレスポンスとは、ウェブサーバから受信されるデータで「ステータス行」「HTTPヘッダフィールド」「空行」「レスポンスボディ」から構成されるメッセージです。

ステータス行は「HTTPバージョン」「ステータスコード」「ステータスメッセージ」から成ります。
データ例：
　HTTP/1.1 200 OK

ステータスコードの200番台は成功を表します。100番台は処理継続中の情報です。300番台は追加処理を必要とする場合に返送されます。400番台はリクエストエラーです。

HTTPヘッダーフィールドはさらにリクエスト時に使用する「リクエストヘッダ」、レスポンスで用いる「レスポンスヘッダ」、転送オブジェクトに関する「エンティティヘッダ」に細分されています。

### 同期通信と非同期通信の違い

*同期通信*は、時間的に接続コンピュータが**相互に同期をとって通信する方式**です。通信が確立するためには、両方のコンピュータが同期しタイミングを合わせて通信する必要があります。そのため本来は別の処理が可能であっても受信完了を待ったり、優先的に通信処理を行う必要がありますので非効率になります。

このことをウェブクライアントとウェブサーバに置き換えてみます。*同期通信*では処理が完了するまでブラウザがブロックされると、*画面が固まったりブラウザ操作が反応しなかったりする*ような症状が発生します。

*非同期通信*は、送信と受信が同期する必要がありません。非同期通信時のブラウザは受信町でも*通常通りの動作を行う*ことができます。そしてウェブサーバからデータ到着時のイベントを受けることで、表示コンテンツが更新されますので**効率的に処理を行う**ことができます。

Ajaxは*HTTP通信を用いて*データを**非同期に転送**することで、ユーザ操作に影響を与えずにコンテンツの更新が可能です。これによりウェブページを*インタラクティブ*に、かつ*高速に表示する*ことができます。

しかしながらAjaxのプログラムは簡単な記述ではないため、処理を簡素化するための*フレームワーク*が多数用意されています。以下にフレームワークの具体的例を挙げてみます。

*GWT（Google Web Toolkit）*はGoogle社の開発したオープンソースソフトウェアのAjaxフレームワークです。そして*jQuery*は大多数の主要ウェブサイトで用いられているフレームワークです。主要ウェブアプリケーションフレームワークである*Ruby on Rails*でも、バージョン3.1からjQueryをデフォルトのフレームワークとしています。
参考：[W3 Techs Usage statistics of JavaScript libraries for websites](https://w3techs.com/technologies/overview/javascript_library)

一般的な*ウェブコンテンツの通信動作*は、以下の**HTTPの同期通信**の流れに従います。

（1）HTTPリクエストの送信（クライアント側）
　ウェブブラウザからウェブサーバへ、HTTP（HTTPS）通信によりリクエストを送信します。
（2）HTTPリクエストの受信（サーバ側）
　ウェブブラウザの通信要求が、クライアント側からHTTPリクエストとしてサーバ側で受信します。
（3）HTTPリクエストの処理（サーバ側）
　サーバ側でHTTPリクエストに対応する処理やステータスリクエストを準備します。
　必要に応じてPHP等のサーバサイドアプリケーションを起動したり、システム間連携でデータを処理します。
（4）HTTPレスポンスの送信（サーバ側）
　サーバの処理ステータスと結果をHTMLとCSSに加工し、送信します。
（5）HTTPレスポンスの受信（クライアント側）
　ウェブサーバからHTTP（HTTPS）通信によりHTTPレスポンスを受信し、ブラウザに表示します。

この（1）から（5）の間はクライアント側のブラウザは*コンテンツが更新されず*、**サーバの応答を待ちます**。

HTTP通信の同期転送と異なり、*Ajax*は**非同期**で処理を行いますので、クライアント側とサーバ側が同期することなく、*並行して処理を行います*。

・*クライアント側*
（A1）JavaScriptのリクエストコールの発行（クライアントのウェブブラウザ）
　ウェブブラウザからJavaScriptAPIをコールし、HTTPリクエストをAjaxエンジンモジュールへ依頼します。
　リクエスト発行後ウェブブラウザは、任意の処理を受け付けたりコンテンツ表示することができます。

・*クライアントのAjaxエンジンモジュール*
（B1）HTTPリクエストの送信（クライアントのAjaxエンジンモジュール）
　クライアントのAjaxエンジンモジュールからウェブサーバへHTTP（HTTPS）通信によりリクエストを送信します。
　リクエスト先はウェブサーバまたはXMLサーバとなります。
（B2）HTTPリクエストの受信（サーバ側）
　ウェブブラウザの通信要求が、クライアント側からHTTPリクエストとしてサーバ側で受信します。
（B3）HTTPリクエストの処理（サーバ側）
　サーバ側でHTTPリクエストに対応する処理やステータスリクエストを準備します。
　必要に応じてPHP等のサーバサイドアプリケーションを起動したり、システム間連携でデータを処理します。
（B4）HTTPレスポンスの送信（サーバ側）
　サーバの処理ステータスと結果をXMLやHTMLまたはJavaScriptのデータに加工し、送信します。
（B5）HTTPレスポンスの受信（クライアントのAjaxエンジンモジュール）
　ウェブサーバからHTTP（HTTPS）通信によりHTTPレスポンスを受信し、イベントハンドラに通知します。

・*クライアント側*
（A2）非同期通信の結果の処理（クライアント側）
　Ajaxエンジンモジュールにより、非同期通信のイベントが通知され登録したイベントハンドラに処理が渡ります。
　JavaScript APIを用いて実行結果の処理やエラー処理を行います。

処理は*クライアント側のブラウザ*が、（A1）と（A2）の間は*リクエストから開放され*、**別の処理を行うことができます**。必要なリクエスト処理は*Ajaxエンジンモジュール*が**非同期で行い**、（B1）から（B5）の流れで*サーバとの通信や処理を行います*。

*Ajaxの書き方*ですが、**フレームワークの利用**がおすすめです。先に説明した*jQuery*や大多数を占める*ウェブアプリケーションフレームワーク*でAjaxを利用できます。
参考：[jQuery](https://jquery.com/)

*jQuery*では、非同期通信するために*$.ajax()メソッド*が用意されています。
*jQueryの使用例：*
$.ajax({
　type: 'POST',
　url: "POSTするURI",
　data: {
　　name: ‘値’,
　　　:
　},
}).then (function(result) {
　成功時の処理（console.log等）;
}).catch(function(request, status, error) {
　エラー時の処理（alert等）;
});
その他にも、Ajaxリクエスト成功時のイベントハンドラを.ajaxSuccess()で設定したり、エラーハンドラを.ajaxError()で設定したりします。

ウェブアプリケーションフレームワークのjQueryを使わない場合は、JavaScriptの*XMLHttpRequest*を使います。実際には前後の手続きがありますので、簡単にというわけにはいきません。
*XMLHttpRequestの使用例：*
　var xhr = new XMLHttpRequest();
　xhr.onload = function() {
　  成功時の処理（console.log等）;
　}
　xhr.onerror = function() {
　  エラー時の処理（alert等）;
　}
　method=”GET”;
　url=”GETするURl”;
　xhr.open(method, url);
　xhr.responseType = "document";
　xhr.send();

## Ajaxを活用してウェブコンテンツの操作性を向上しましょう

Ajaxを使うことでウェブブラウザの動作を妨げずに、サーバからコンテンツを受信し更新することができます。これにより、ウェブサービスの代表例となっている*マップ表示や検索処理*の操作性が格段に向上しました。Ajaxを理解したら**動的コンテンツに活用**し、スキルアップを図りましょう。

Ajaxは非同期通信を用いてHTTP通信によりコンテンツを表示します。これによりウェブアプリケーションをインタラクティブに操作したり、操作を妨げずにデータを更新することが可能です。ここではHTTP通信の基本からAjaxの利用法まで解説していきます。

Ajaxとは、非同期通信を用いてHTTP通信によりコンテンツを表示するプログラミング手法を指します

Ajaxを使うには、JavaScriptのXMLHttpRequestクラスやフレームワークのjQuery等を用います

Ajaxを利用することで動的コンテンツをインタラクティブに操作することが可能です

Ajaxとは？HTTP通信の基本からAjaxの利用法まで解説！

HTTPの記事（1ページ目）