【2分でわかる】APIとは?

blog-hero-imgわかりにくい『API』を、実例を使って解説します

pen-icon2023.12.19

Profile Pic

この記事の筆者:三好アキ(エンジニア)


ウェブデザイナーから『エンジニア』『プログラマー』へ成長したい人、独学で進んでいきたい人を応援しています。 HTMLとCSSの知識だけでアプリ開発を始められる入門書を多数執筆中📕📗👇


ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。



React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて配信中。登録はこちらから → 無料メルマガ登録

よく耳にする「API」

ウェブやプログラミングの勉強をしていると、「API」という言葉をよく耳にします。

「API」とは何かを説明するには、何よりも実物を見てもらうのが一番でしょう。

APIの実例 1

下記リンクを開いてください。これがAPIと呼ばれるものです。

https://nextbook-fullstack-app-folder.vercel.app/api/item/readsingle/6544de037786109292871b67

ブラウザの半分ほどの大量の文字が表示されます。

image

これだと見にくいので、改行と色をつけて見やすくしたものが下図になります。

image

(このような整形はJSON FormatterというGoogleエクステンションや、「JSONフォーマット」のようなオンラインサービスで可能です)

これがAPIです。

とはいえ「これがAPIです」と言われても、一体このページに表示されているものが何かよくわからないので、いまいち納得できないと思います。

なので、次は下記URLを開いてください。

https://nextbook-fullstack-app-folder.vercel.app/item/readsingle/6544de037786109292871b67

「メガネ」のアイテムが表示されるページが表示されます。

image

このページにはメガネの画像とともに、価格や説明文などが書かれており、メガネを販売するショップのページのようです。

ここで思い出してもらいたいのは、データが大量に表示された先ほどのページです。

あのデータをよく見てみると、一番上に次のような文字が見えます。

"title":"メガネ","image":"/img1.jpg","price":"5500"

ここで再びメガネのアイテムページを見てましょう。

すると、「メガネ」という名前(title)と、「¥5500」という価格(price)が同じなのがわかります。

image

APIの実例 2

もうひとつ、別の例を見てみましょう。下記URLを開いてください。

https://nextbook-fullstack-app-folder.vercel.app/api/item/readall

image

これも整形して表示すると次のようになります。

image

次に下記URLを開いてください。

https://nextbook-fullstack-app-folder.vercel.app/

image

先ほど見た「メガネ」とともに、「色えんぴつ」や「リング」などのアイテムが表示されています。

ここで先ほどのデータが大量に表示されているページをよく見てみると、ここでも次のようなデータが見えます。

"title":"色えんぴつ","image":"/img2.jpg","price":"1500"
"title":"リング","image":"/img3.jpg","price":"2200"

これらは各アイテムのデータと合致しています。

image

対応関係にあるページ

ここまで見た2つの例で明らかなように、データが表示されているページと、アイテムが表示されているページには対応関係が成り立っています。

というのは、アイテムページにデータを供給しているのがデータページだからです。

実はアイテムページというのは、最初の状態では下記画像のように空っぽです。

image

しかしここにデータが流し込まれることによって、次のように「きちんとした」アイテムページになるのです。

image

実はこのアイテムページが開かれるとき、背後では「データページにアクセスする」というプロセスが実行されており、その結果このようにアイテムの名前や価格、画像などが表示されているのです。

APIとはなに?

さてそれでは、本記事のメインテーマであるAPIとは何でしょうか?

APIとは、ここまで見てきた「データページ」のことです。

あのようなデータを「API」と呼ぶのです。

image

ウェブ開発やプログラミングの勉強をしていると、どこかでかならず「API」という言葉が出てきます。

「API開発」「APIサーバー」といったように使われたりもしますが、それらはこのようなデータを表示するページの開発や、データを表示するサーバーのことを指すのです。ぜひ覚えておきましょう。

(*なお本記事で使ったアイテムサイトやAPIは、私の書籍『Next.jsでつくるフルスタックアプリ 前編・後編』で開発するものです。興味のある方は参考にしてください)

mern-book-1

【Amazonで見る】