2022/10/08 (更新日: 2022/10/13)

【僕の学習ノート】APIとは？分かりやすく解説

こんにちは、なおやです。

今日は、Courseraというプラットフォームで、Metaの社員さんたちから授業を受けました。

そこで得た学びが、下記のツイートです。

【#今日学んだ】APIとは何かについて

1. API：2つのソフトウェアを繋げて使う為の一連のプロトコルや定義
2. Browser API：Webブラウザに組み込まれていて、高度な機能の簡素化や簡単な構文を提供するAPI
3. RESTful API：2 つのコンピュータがインターネットを介して安全に情報を交換するためのAPI

— Naoya (@kaigaiblog63) October 8, 2022

今回は、これを掘り下げて解説していきます。

この記事の信憑性

この記事は、Courseの授業を受けて、学び、理解したことを基に、僕なりの言葉と解釈で分かりやすく解説しています。まあ簡単にいうと、僕が学んだことのアウトプットノートです。※ 注意：僕はまだ日々学習している段階です。解説していることに間違いがある可能性も否定できません。何か間違いを見つけて下さった方は、このWebサイトの向上のと僕の学習の為に、教えてください🙏
» Courseraという素晴らしいプラットフォームはこちら (授業は全て英語です)

【僕の学習ノート】APIとは？分かりやすく解説

【僕の学習ノート】APIとは？分かりやすく解説
API (Application Programming Interface) とは、あるソフトウェアなどが持つ機能やデータを別のアプリケーション上でも利用できるように繋ぐ仕組みのことです。

ちなみにインターフェースとは、２つのものを仲介するというような意味があり、私たちがよく使うUSBなどもインターフェースと言えます。

簡単に言うと、APIとはレストランで言うウェイトレスのような役割です。ウェイトレスの仕事は、お客さんから注文を貰ってそれを厨房に伝え、厨房からお客さんの所に料理を運ぶことですよね？APIとは、この厨房とお客さんを繋ぐ役割のような感じです。

例えば、僕のWebサイトにはTwitterが埋め込まれています。なぜ埋め込むことが出来ているのでしょうか？僕は、Twitterの開発なんてしてないのに。それは、僕のWebサイトとTwitterの間をAPIが繋いでくれているからです。

正確に言うとAPIとは、２つのソフトウェアを繋げる為の一連のプロトコルや定義のことで、別のアプリケーションなどの機能やデータにアクセスして自分のアプリケーションで使う方法を教えてくれます。

一般的によく使われるAPI ３選（この記事の目次）

1. Browser API
2. Rest API
3. Sensor-Based API

一つずつ解説します。

Browser API とは？

Browser API とは？
Browser API とは、Webブラウザに組み込まれているAPIのことで、複雑な機能を簡素化してくれたり、高度な機能を構築する為の簡単な構文を提供してくれたりします。

DOM API
Geolocation API
Fetch API
Canvas API
History API
Web Storage API

そこで今回は、最も一般的な「Browser API」を6つご紹介します。

DOM (Document Object Model) API とは？

DOM (Document Object Model) API とは？
DOM API とは、Webブラウザで読み込んだHTMLとCSSの文書を操作する為のAPIです。

つまりは、WebページとJavascriptなどのプログラミング言語を繋ぐ役割をしており、JavascriptからHTMLのこの要素 (ノード) に「こういうことをさせたい」と命令をすることを可能にしてくれます。

» DOMについておすすめの記事はこちら

Geolocation API

Geolocation API とは、ユーザーの位置情報を取得する為のAPIです。またこれを使用すると、ユーザーが望む場合のみ、自分の位置情報をWebアプリケーションに提供することが出来ます。

const x = document.getElementById("demo");

function getLocation() {
  try {
    navigator.geolocation.getCurrentPosition(showPosition);
  } catch {
    x.innerHTML = err;
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "
Longitude: " + position.coords.longitude;
}

ちなみに、緯度と経度を取得する為のJavascriptのコードはこんな感じになります。

Fetch API

Fetch API とは、サーバーからデータを取得する為のAPIです。つまりは、Fetch APIを使うことで、Webサーバーに対してHTTPリクエストを行うことが出来ます。