APIとは？Webプログラミング初心者向けに仕組みを解説

API

APIとは、アプリケーション同士が情報をやり取りするための仕組みです。

Webプログラミングでは、画面側からサーバー側へデータを送ったり、サーバー側から必要なデータを受け取ったりするときにAPIを使います。

たとえば、天気アプリで天気情報を取得する、ログイン画面でユーザー情報を確認する、商品一覧ページで商品データを表示する、といった処理にAPIが使われます。

この記事では、APIとは何か、Webアプリケーションでどのように使われるのか、リクエストとレスポンス、JSON、HTTPメソッドなどの基本を初心者向けに解説します。

APIとは

APIは、Application Programming Interfaceの略です。

日本語では、アプリケーション同士をつなぐ窓口のようなものと考えると分かりやすいです。

WebサイトやWebアプリでは、画面に表示する情報をサーバーから取得することがあります。

そのとき、画面側がサーバーに対して「この情報をください」と依頼します。

サーバー側は、その依頼に応じて必要なデータを返します。

このやり取りの窓口になるのがAPIです。

たとえば、次のようなやり取りです。

画面側：ユーザーID 1 の情報をください
サーバー側：ユーザーID 1 の名前とメールアドレスを返します

実際のWebアプリでは、このやり取りをプログラムで行います。

APIが使われる場面

APIは、Webアプリケーションのさまざまな場面で使われます。

  • ログイン処理
  • 会員登録
  • 投稿一覧の取得
  • 商品一覧の取得
  • 検索結果の取得
  • お問い合わせフォームの送信
  • 天気情報の取得
  • 地図情報の取得
  • 決済処理

たとえば、ブログの記事一覧を表示する場合、画面側がサーバーに記事データを要求します。

サーバー側は、データベースから記事を取得して、画面側に返します。

画面側は、受け取ったデータを使って記事一覧を表示します。

このように、APIはフロントエンドとバックエンドをつなぐ役割を持っています。

フロントエンドとバックエンド

APIを理解するには、フロントエンドとバックエンドの役割を知っておくと分かりやすいです。

種類役割
フロントエンドユーザーが見る画面を作る部分
バックエンドサーバー側でデータ処理やデータベース操作をする部分

フロントエンドでは、HTML、CSS、JavaScript、Vue.jsなどを使います。

バックエンドでは、PHP、Node.js、Ruby、Python、Javaなどを使います。

APIは、このフロントエンドとバックエンドの間でデータをやり取りするときに使われます。

フロントエンド
  ↓ リクエスト
API
  ↓ 処理
バックエンド
  ↓ データベース
レスポンス
  ↓
フロントエンドに表示

ユーザーから見ると、ただ画面に情報が表示されているだけに見えます。

しかし裏側では、APIを通じてデータのやり取りが行われています。

リクエストとレスポンス

APIの基本は、リクエストとレスポンスです。

リクエストは、情報を要求することです。

レスポンスは、その要求に対して返ってくる結果です。

用語意味
リクエストクライアントからサーバーへの要求
レスポンスサーバーからクライアントへの返答

たとえば、商品一覧を取得するAPIがあるとします。

GET /api/products

これは、「商品一覧をください」というリクエストです。

サーバーは、そのリクエストに対して商品データを返します。

[
  {
    "id": 1,
    "name": "商品A",
    "price": 1000
  },
  {
    "id": 2,
    "name": "商品B",
    "price": 2000
  }
]

この返ってきたデータを、画面側で一覧として表示します。

JSONとは

APIでは、JSONという形式でデータをやり取りすることが多いです。

JSONは、データを分かりやすく表すための形式です。

たとえば、ユーザー情報をJSONで表すと次のようになります。

{
  "id": 1,
  "name": "山田太郎",
  "email": "taro@example.com"
}

複数のデータを扱う場合は、配列の形になります。

[
  {
    "id": 1,
    "name": "山田太郎"
  },
  {
    "id": 2,
    "name": "佐藤花子"
  }
]

JavaScriptでは、JSONを扱いやすいため、APIのレスポンスとしてよく使われます。

Webアプリケーションでは、サーバーからJSONを受け取り、JavaScriptで画面に表示する流れがよくあります。

HTTPメソッドとは

APIでは、どのような操作をしたいのかをHTTPメソッドで表します。

よく使うHTTPメソッドは次の通りです。

メソッド役割例
GETデータを取得する記事一覧を取得する
POSTデータを作成する新しい投稿を登録する
PUTデータを更新する投稿全体を更新する
PATCHデータの一部を更新する投稿タイトルだけを変更する
DELETEデータを削除する投稿を削除する

初心者のうちは、まずGETとPOSTを覚えるとよいです。

GETはデータを取得するときに使います。

POSTはフォーム送信や新規登録など、データを送るときに使います。

APIのURLの例

APIには、アクセスするためのURLがあります。

たとえば、次のようなURLです。

https://example.com/api/users

このURLにリクエストを送ると、ユーザー一覧が返ってくるように作ることができます。

特定のユーザー情報を取得する場合は、次のようなURLにすることがあります。

https://example.com/api/users/1

この場合、1はユーザーIDを表します。

APIのURLは、何のデータを扱うのか分かりやすい形にすることが多いです。

URL例内容
/api/usersユーザー一覧
/api/users/1IDが1のユーザー
/api/posts投稿一覧
/api/posts/10IDが10の投稿
/api/products商品一覧

JavaScriptでAPIを呼び出す例

JavaScriptでは、fetchを使ってAPIからデータを取得できます。

たとえば、ユーザー一覧を取得する場合は、次のように書きます。

fetch("https://example.com/api/users")
  .then(function (response) {
    return response.json();
  })
  .then(function (users) {
    console.log(users);
  });

fetchは、指定したURLにリクエストを送るための機能です。

response.json()は、返ってきたJSONをJavaScriptで扱える形に変換する処理です。

画面に表示する場合は、取得したデータを使ってHTMLを書き換えます。

fetch("https://example.com/api/users")
  .then(function (response) {
    return response.json();
  })
  .then(function (users) {
    const list = document.querySelector(".user-list");

    users.forEach(function (user) {
      const item = document.createElement("li");
      item.textContent = user.name;
      list.appendChild(item);
    });
  });

この例では、APIから取得したユーザー一覧を、liタグとして画面に追加しています。

実際に動かすには、HTML側に次のような要素を用意します。

<ul class="user-list"></ul>

APIを作る側の考え方

APIは、使うだけでなく、自分で作ることもあります。

PHPやNode.jsなどのサーバーサイドを使うと、APIを作れます。

たとえば、投稿一覧を返すAPIを作る場合、流れは次のようになります。

  1. フロントエンドから/api/postsにリクエストが来る
  2. バックエンドがリクエストを受け取る
  3. データベースから投稿一覧を取得する
  4. JSON形式でフロントエンドに返す
  5. フロントエンドが受け取ったJSONを画面に表示する

このように、APIはフロントエンドとデータベースの間に入る窓口のような役割をします。

フロントエンドは、データベースを直接操作しません。

バックエンド側のAPIを通して、必要なデータを取得したり登録したりします。

WebアプリでAPIが必要になる理由

Webアプリケーションでは、画面に表示する内容が固定ではないことが多いです。

ユーザーごとに表示内容が違ったり、検索条件によって結果が変わったりします。

そのような場合、HTMLを最初からすべて書いておくのではなく、必要なデータをAPIで取得して表示します。

APIを使うと、次のような作り方ができます。

  • 画面側とサーバー側を分けて開発できる
  • 同じAPIをWebサイトとスマホアプリで使える
  • データだけをJSONで返せる
  • 検索や並び替えの結果を動的に表示できる
  • ページ全体を再読み込みせずに表示を更新できる

Vue.jsやReactのようなフロントエンド技術では、APIからデータを取得して画面を作ることがよくあります。

サーバーサイドでは、APIを作ってデータを返す処理を書くことになります。

外部APIとは

外部APIとは、自分のサイトやアプリの外にあるサービスが提供しているAPIです。

たとえば、次のようなものがあります。

  • 天気情報を取得するAPI
  • 地図を表示するAPI
  • 翻訳機能を使うAPI
  • 決済処理を行うAPI
  • SNSの投稿情報を取得するAPI

外部APIを使うと、自分で一から機能を作らなくても、他のサービスの機能やデータを利用できます。

たとえば、天気情報を自分で集めるのは大変です。

しかし、天気APIを使えば、指定した地域の天気情報を取得できます。

ただし、外部APIを使う場合は、利用規約、料金、APIキー、リクエスト制限などを確認する必要があります。

APIキーとは

外部APIでは、APIキーを使うことがあります。

APIキーとは、そのAPIを使うための認証用の文字列です。

サービス側は、APIキーを使って「誰がAPIを使っているのか」を確認します。

APIキーはパスワードに近い役割を持つ場合があります。

そのため、公開してはいけないAPIキーをHTMLやJavaScriptに直接書くのは危険です。

特に、ブラウザから見えるJavaScriptに秘密情報を書くと、他の人に見られる可能性があります。

APIキーを扱うときは、公式ドキュメントを確認し、安全な使い方を守る必要があります。

APIとデータベースの違い

APIとデータベースは別のものです。

データベースは、データを保存する場所です。

APIは、データをやり取りするための窓口です。

名前役割
データベースデータを保存する
APIデータを取得・登録・更新・削除するための窓口

たとえば、投稿一覧を表示する場合、データベースには投稿データが保存されています。

フロントエンドは、データベースに直接アクセスするのではなく、APIにリクエストを送ります。

APIを受け取ったバックエンドがデータベースから投稿を取得し、JSONで返します。

APIとURLの違い

APIにはURLがありますが、URLそのものがAPIというわけではありません。

URLは、アクセス先の住所のようなものです。

APIは、そのURLに対してリクエストを送ったときに、決まった形式でデータを返したり処理を行ったりする仕組みです。

たとえば、次のURLは通常のWebページかもしれません。

https://example.com/about

一方、次のようなURLはAPIとして使われることがあります。

https://example.com/api/users

APIのURLにアクセスすると、HTMLページではなくJSONデータが返ることが多いです。

APIを学ぶ前に必要な知識

APIを学ぶ前に、次の知識があると理解しやすいです。

  • HTMLの基本
  • JavaScriptの基本
  • JSONの基本
  • HTTPの基本
  • フォームのGETとPOST
  • サーバーサイドの基本

すべてを完璧に理解してから進む必要はありません。

まずは、APIは「画面側とサーバー側がデータをやり取りするための窓口」と考えると分かりやすいです。

APIを学ぶ順番

初心者がAPIを学ぶなら、次の順番で進めると理解しやすいです。

  1. リクエストとレスポンスを知る
  2. JSONの形を読む
  3. GETとPOSTを理解する
  4. JavaScriptのfetchでデータを取得する
  5. 取得したデータをHTMLに表示する
  6. PHPやNode.jsで簡単なAPIを作る
  7. データベースとAPIをつなげる

最初は、外部APIやサンプルJSONを使って、取得したデータを画面に表示する練習をするとよいです。

そのあと、PHPやNode.jsで自分のAPIを作ると、フロントエンドとバックエンドのつながりが分かりやすくなります。

APIでよくある注意点

APIを使うときは、次の点に注意します。

  • URLが正しいか確認する
  • HTTPメソッドが正しいか確認する
  • 返ってくるデータ形式を確認する
  • エラー時の処理を書く
  • APIキーを公開しない
  • 利用規約を確認する
  • リクエスト回数の制限を確認する

APIは便利ですが、外部サービスに依存する場合もあります。

外部APIを使う場合は、急に仕様が変わったり、料金が変わったり、制限がかかったりすることもあります。

そのため、実際に使うときは公式ドキュメントを確認することが大切です。

まとめ

APIは、アプリケーション同士が情報をやり取りするための仕組みです。

Webプログラミングでは、フロントエンドとバックエンドをつなぐ窓口として使われます。

画面側がAPIにリクエストを送り、サーバー側がレスポンスとしてデータを返します。

APIでは、JSON形式でデータをやり取りすることが多いです。

また、操作内容によってGET、POST、PUT、PATCH、DELETEなどのHTTPメソッドを使い分けます。

初心者がまず覚えたいのは、次の内容です。

  • APIはデータをやり取りするための窓口
  • リクエストは要求、レスポンスは返答
  • JSONはAPIでよく使われるデータ形式
  • GETはデータ取得、POSTはデータ送信に使う
  • JavaScriptではfetchでAPIを呼び出せる
  • バックエンドではAPIを作ってデータを返す

APIを理解すると、JavaScript、Vue.js、PHP、Node.js、SQLなどの学習内容がつながりやすくなります。

Webプログラマーを目指すなら、まずはAPIの基本を知り、次にfetchでデータを取得する練習へ進むとよいです。

タイトルとURLをコピーしました