API

概要

APIとは、他のサービスの機能やデータを呼び出して使う仕組みです。 詳しくはMDN - APIも参照してください。

Webサイトやアプリは、多くのAPIを組み合わせて作られています。 自分で全部作らなくても、他のサービスが提供する機能を「お願いして使う」ことができます。

日常生活でのAPIの例

APIは私たちが毎日使っているWebサービスやアプリの裏側で活躍しています。 普段意識していないだけで、実はたくさんの場面で利用されているのです。

体験デモ：APIを実際に呼んでみる

実際にAPIを呼び出して、結果を見てみましょう。ボタンを押すだけで、外部サービスからデータが返ってきます。

自分のサイトにAPIを組み込む場合

ブログに「今日の名言を表示」ボタンを置きたいとき、裏ではこんなコードが動いています。 このページのデモも、同じ仕組みで動いています。

// ボタンを押したときに実行する処理
async function showQuote() {
  const response = await fetch('https://api.quotable.io/quotes/random');
  const data = await response.json();
  const quote = Array.isArray(data) ? data[0] : data;
  document.getElementById('result').textContent = quote.content + ' — ' + quote.author;
}

上のコードは、名言APIを呼び出して結果を表示するだけ。HTMLにボタンと表示用の要素を置いて、クリック時にこの関数を実行すれば、ブログにも同じ機能を入れられます。

APIの仕組みを例えると（レストラン例）

APIの仕組みを、レストランに例えて理解しましょう。

流れ：

1. お客さんが注文する（リクエスト）
2. ウェイターが厨房に伝える（API）
3. 厨房が料理を作る（処理・データ生成）
4. ウェイターが料理を運ぶ（レスポンス）

→ APIは「間に立ってやり取りする役割」です。

APIの基本用語（最低限）

まとめ：APIは何ができるのか

• APIは「他人の機能を借りる仕組み」
• APIを知ると作れるWebサービスが一気に増える
• まずは「呼ぶ → 返ってくる」を体験すればOK

このページのデモで、APIの「呼び出して結果が返ってくる」という基本を体験できました。 次は、自分のプログラムから実際にAPIを呼び出してみましょう！