何の略？
Application Programming Interface（アプリケーション・プログラミング・インターフェース）の略。
インターフェース？
インターフェース: 2つの異なるものをつなぐシステムや機能のこと。
インターフェースの身近な例
テレビのリモコンはインターフェースの一種です。リモコンを使ってテレビに指示を送ることで、テレビがその指示に応じて動作します。
APIの流れ
- リクエストを送る
リモコンのボタンを押す：リモコンの「チャンネルを変える」ボタンを押す。これが「リクエスト（要求）」です。
- インターフェースを通じてリクエストが送られる
リモコンから赤外線信号が送られ、テレビがそれを受け取ります。これは、APIを通じてコンピューターが他のコンピューターにリクエストを送るのと同じです。
- テレビがリクエストを受け取る
テレビが赤外線信号を受け取り、「チャンネルを変える」というリクエストを理解します。
- テレビがレスポンスを返す
テレビがチャンネルを変えます。これが「レスポンス（返答）」です。リモコンに返事はしませんが、見てわかる形で動作を返します。
リモコンをAPIに置き換えると…
リクエスト：コンピューターAがコンピューターBに「データをください」とリクエストを送る。
インターフェース：APIがリモコンの赤外線信号のように、リクエストを伝える役割を果たす。
レスポンス：コンピューターBが「これがデータです」と返事をする。これは、テレビがチャンネルを変えるのと同じように、リクエストに応じて動作をする。
具体例
ブラウザーAPI
ウェブブラウザーに組み込まれているAPI。
ブラウザーやコンピューターの情報を取得し、それを使って役に立つ複雑なことを行えるようにするもの。
WebGL API, Storage API（ローカルストレージなど）, Web Audio API, Web Animation APIなど色々なAPIが用意されているが、よく使う代表的なものだと、DOM (Document Object Model) API がある。
document.getElementById('test').textContent = 'APIを使ってテキストを挿入'リクエスト・インターフェース・レスポンスで考えると
リクエスト: document.getElementById('test').textContent
インターフェース: ブラウザ
レスポンス: ブラウザの表示結果
フロントエンドから見る、バックエンド
サイト制作でよく使われる、WordPressというCMS（Contents Management System。記事などのコンテンツを効率的に管理できるシステム）は大きなAPIシステムを持っており、特定の記述をすることで、簡単にデータベースから特定の情報を取得できます。
例えば、the_title() は、現在の投稿やページのタイトルを表示するための関数です。この関数を使用すると、その投稿やページのタイトルがHTMLで出力されます。
<h1><?php the_title(); ?></h1>↓ブラウザへの出力結果の例
<h1>サイト公開しました！</h1>リクエスト・インターフェース・レスポンスで考えると
リクエスト： the_title() が呼び出されると、WordPressはそのリクエストに応じてデータベースから該当する投稿のタイトルを取得します。
インターフェース： the_title() は、WordPressの内部でデータを取得するための関数として機能し、開発者にとってのインターフェースです。
レスポンス： 取得されたタイトルがHTMLとして出力され、ユーザーがその投稿のタイトルを見ることができます。
外部API
外部APIとは、自分が作成したアプリケーションやシステムの外部にあるサービスやプラットフォームが提供するAPIのことです。例えば、Instagram APIや郵便番号から住所を取得するAPIは、自分のシステムとは別の外部のシステムが提供しているサービスです。
よく見かける、郵便番号を入力すると住所をある程度まで自動入力してくれるシステムも外部APIを使っています。
コード例
fetch('https://zipcloud. ibsnet.co.jp/api/search?zipcode=郵便番号をここに入れる')
.then (response => response.json())
.then (data => {
// dataに郵便番号に基づいた住所のデータが入ってくる
console.log(data)
})
.catch(error => console.error(error))
以下の動画で具体的な実装手順を公開しているので、興味がある方は見てみてください。
https://factory-programming-mv.com/video/UNOY2wyJkwQ/
リクエスト・インターフェース・レスポンスで考えると
リクエスト： fetch('https://zipcloud.ibsnet.co.jp/api/search?zipcode=郵便番号') で APIに指定された郵便番号に対応する住所情報をリクエストします。
インターフェース： JavaScriptの fetch 関数がインターフェースとして機能しています。APIとの通信を行い、その結果を処理します。
レスポンス： APIから返された住所情報（data）が console.log を使って表示されます。この data がAPIからのレスポンスであり、リクエストに基づいて返された住所のデータです。
