API

API を分かりやすく

API という言葉をよく聞くようになりましたよね？

APIとは、何かしらのソフトウェア（ウェブサービス、ライブラリ、OSなど）が提供する機能を、他のソフトウェアから利用するための「接続口」のようなものです。

これがピンとこないと思うんですよね。なので、例え話を使ってみますね。

想像してみてください。あなたがレストランに行き、美味しそうな料理を頼みたいと思ったとします。しかし、キッチンに直接行って「これを作って！」とは言えないですよね。なぜなら、キッチンはコックの領域で、客が入る場所ではないからです。それに、キッチンには色々な道具や食材があり、それをどう扱うかは専門的な知識が必要です。

それでもあなたは料理を頼むことができます。どうやって？それはウェイターを通じてです。ウェイターに「これを一つ」と頼むと、ウェイターがあなたの注文をキッチンに伝え、作られた料理をあなたのテーブルに運んでくれます。キッチンの中で何が起こったか詳しく知る必要はないんです。

ここで、ウェイターがAPIのようなものです。あなた（クライアント）とキッチン（サーバー）の間に立ち、コミュニケーションを助けてくれるんですね。

APIはウェブ開発においてとても重要です。Next.jsやJamstackのようなフレームワークでは、バックエンド（キッチン）からデータを取得するためにAPIを使用します。TypeScriptも同様に、ライブラリやフレームワークのAPIを使用して機能を利用します。

APIを使うことで、キッチンの詳細な仕組みを知らなくても、必要な料理（データや機能）を手に入れることができるんですよ。それは便利だと思いませんか？これがAPIの力なんですよ。

少しまとめますね。Jamstackでは、APIはアプリケーションの一部を担当する重要なコンポーネントです。JamstackはJavaScript、API、およびMarkupの頭文字を取って名付けられています。このアーキテクチャでは、各要素が特定の役割を担い、全体として効率的で安全なウェブアプリケーションを提供します。

「API」とは、「Application Programming Interface（アプリケーションプログラミングインターフェース）」の略称です。この技術は、Next.js や TypeScript を使った Web 開発において、異なるアプリケーション間でのデータの受け渡しや、外部サービスとの連携などで重要な役割を果たしています。

モノリシックなアーキテクチャからマイクロサービスへ

そもそも従来はセッションを保持して、モノリシックなサーバーが状態を保っていたのですが、これが遅いんですね。セキュリティの問題もありますし。

しかし、現在は専用のマイクロサービスによって代替され、シンプルになり、高速に表示させるのが主流となっています。マイクロサービスとは、アプリケーションを機能ごとに分割して、それぞれの機能を担当するサービスを作ることです。これにより、アプリケーション全体のパフォーマンスが向上します。

Jamstack におけるAPIは、大体のものは扱えますので、単純なHTMLよりも複雑なことをやる場合（決済や検索）に使うケースがあるかもしれません。

Jamstackアーキテクチャでは、APIはサーバーサイドの機能をクライアントサイドに公開するのが一般的です。例えば、データベースから情報を取得したり、クラウドサービスと連携したり、ユーザー認証を実行したりします。

このAPIの利用は、Jamstackがサーバーレスアーキテクチャを採用する理由の一つでもあります。これは、伝統的なモノリシックなサーバーアプリケーションが持つ全ての機能を持つ代わりに、必要な機能を提供する個々のAPIを利用します。これにより、各APIはその特定の機能に焦点を当てることができ、全体的にパフォーマンスとセキュリティが向上します。

Jamstackアプリケーションでは、通常、JavaScriptがブラウザで実行され、ユーザーとの対話を管理します。一方、APIはデータの提供、取得、保存などの機能を提供し、Markupは静的なコンテンツを提供します。これらの要素は、APIを通じて連携し、ユーザーにシームレスな体験を提供します。

APIは、アプリケーションがどのように動作し、どのように拡張するかを決定する重要な役割を果たします。そのため、Jamstackアプリケーションを設計する際には、どのAPIが必要で、それぞれがどのように連携するかを考慮する必要があります。

少しわかりやすく説明しますね

例えば、あなたが、お母さんに「今日の天気はどうかしら？」と聞かれました。あなたは、窓を開けて外を見て、今日の天気を教えることができます。このように、あなたは「天気」という情報を取得して、それをお母さんに伝えることができます。

Web 開発においても同じようなことができます。たとえば、外部サービスから天気情報を取得して、Web ページに表示することができます。このとき、API を利用することで、異なるアプリケーション間でデータをやり取りすることができます。

Next.js × TypeScript × API

具体的には、まず、Next.js と TypeScript を使って、天気情報を取得するための API を定義します。以下は、api/weather.tsというファイルに API の定義を記述した例です。

import type { NextApiRequest, NextApiResponse } from 'next'

type WeatherResponse = {
  weather: string
}

export default function handler(req: NextApiRequest, res: NextApiResponse<WeatherResponse>) {
  const weather = '晴れ' // ここでは仮に「晴れ」という天気情報を返すことにする
  res.status(200).json({ weather })
}

このコードでは、handler関数が API の実態を表しています。この関数は、reqとresという 2 つの引数を受け取ります。reqはリクエスト情報を、resはレスポンス情報を表します。

また、WeatherResponseという型を定義し、レスポンスとして返すデータの形式を指定しています。この場合、weatherというキーを持つオブジェクトを返すことができます。

天気情報を取得

次に、定義した API を利用するためのコードを、Web ページのコンポーネントに書きます。以下は、pages/index.tsxファイルに、API を利用して天気情報を取得するためのコードを記述した例です。

import { useState } from 'react'
import axios from 'axios'

export default function Home() {
  const [weather, setWeather] = useState('取得中...')

  async function getWeather() {
    const res = await axios.get('/api/weather')
    const data = res.data
    setWeather(data.weather)
  }

  return (
    <div>
      <h1>今日の天気は？</h1>
      <p>{weather}</p>
      <button onClick={getWeather}>天気を取得する</button>
    </div>
  )
}

このコードでは、useStateフックを使って、天気情報を画面に表示するためのステートを定義しています。初期値として「取得中...」という文字列を設定します。また、getWeather関数を定義し、API から天気情報を取得するためのコードを記述しています。

getWeather関数では、axiosというライブラリを使って API を呼び出しています。API の URL は/api/weatherとなっており、これは Next.js の API ルートを表しています。API のレスポンスはres.dataで取得できます。取得した天気情報を、ステートのweatherにセットすることで、画面に天気情報を表示することができます。

最後に、天気情報を取得するためのボタンを画面に表示するためのコードを書きます。このコードでは、button要素を使って、ボタンを定義しています。ボタンがクリックされたら、getWeather関数が呼び出され、天気情報を取得することができます。

以上のように、Next.js と TypeScript を使った API の例を紹介しました。このように、API を利用することで、異なるアプリケーション間でデータの受け渡しができるため、Web 開発において非常に重要な技術です。