APIに触れてみよう

2022-01-14
API
Next.js

はじめに

API の使い方など、ほどんど理解していません。理解していませんが、API を体感してみることが今回のゴールです。

ただ、解釈が合っているのか自信がないので、間違っている部分はコメント頂けると幸いです！

Next.js(TypeScript) で API を使ってみよう

まずNext.js で新規に作成すると、pages / api / hello.ts にすでにサンプルで以下のコードが記述されています。

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction import type { NextApiRequest, NextApiResponse } from 'next' type Data = { name: string } export default function handler( req: NextApiRequest, res: NextApiResponse<Data> ) { res.status(200).json({ name: 'John Doe' }) }

ローカルホストを立ち上げ、ブラウザに /api/hello を追加

http://localhost:3000/api/hello

すると、

res.status(200).json({

json 形式で書いている部分がブラウザに表示されました。

これが API を叩くということなのか…ちょっと理解していませんが、なんか簡単にデータが引っ張ってこれました。楽ちんですね。

Postman を使ってみる

まずデスクトップアプリをダウンロードします。Web上でも使用できましたが、Web版だとローカルホストへのアクセス出来ませんでした…

基本的な設定、使い方に関しては、他にも調べれば出てきます。↓などを参考にして慣れていきましょう。

またSSL certificate verification の設定をオフにしないとローカルホストへアクセルできなかったので、注意が必要です。

Postman をいじってみる

実際に触ってみましょう。サンプルデータはこちらを使用します。

GET で情報を取得

情報を取得できました。

取得した情報を全てのデータなので、”id”: 1 だけ取得してみます。”userId”, “id”, “title”, “body” これらが KEY になっています。

簡単に指定した情報だけが取得できました。

POST で新規作成

POST は新しくデータを作成するメソッドになります。

HTTP ステータスコードの意味

Postman で Status 200, 201 が出てきましたが、実際にこれは何を意味するのかを確認してみましょう。こちらのサイトを参考にしています。

HTTP 200番台はレスポンスが成功したことを意味しいます。

クライアントからリクエストがサーバに送られ理解されて受理された状態です。成功した後はリクエストに応じてサーバの方で処理をしクライアントにレスポンスを返します。私たちが普段インターネットを利用するに当たりWebページを見る際もWebブラウザを利用しますが、Google Chromeの開発モードウィンドウの「Network」タブで、Webページ内に読み込まれている正常に処理されたファイル群は「Status Code 200」と確認をすることが出来ます。

hello.ts の中身を書き換えてみる

公式ドキュメントを見ながら、書き換えて遊んでみます。

// 公式ドキュメントより export default function handler(req, res) { if (req.method === 'POST') { // Process a POST request } else { // Handle any other HTTP method } }

これは、もしメソッドがPOST なら〜の処理をして、それ以外のメソッドなら〜の処理をしてください、という流れだと思います。

実際にコードを書き換えて試してみましょう。

export default function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method === 'POST') { res.status(200).json({ message: 'POSTメソッドです' }); } else if (req.method === 'GET') { res.status(200).json({ message: 'GETメソッドです' }); } else { res.status(200).json({ message: 'POSTとGET 以外のメソッドです' }); } }

一気に書きましたが if 〜は単純に書いています。

もしレクエストのメソッドがPOSTなら message: 'POSTメソッドです’ を表示

メソッドがGET なら message: 'GETメソッドです' を表示

それ以外のメソッドの場合は message: 'post get以外のメソッドです' を表示