Zenn
🤔

「APIをたたく」って？

に公開
初心者
API
Express
初投稿
tech

「APIをたたく」ってよく言うけどどういうこと？

  • APIをたたく = APIにリクエスト（問い合わせ）を送ること

→実際にやってみる💪

1. プロジェクトを作成

ターミナルに移動して、以下をコピペ

ターミナル
mkdir my-simple-api && cd my-simple-api
npm init -y
npm install express

2. index.jsを作成

index.js
const express = require('express');
const app = express();

app.use(express.json());

app.get('/api/message', (req, res) => {
  res.json({ message: 'Hello from the API!' });
});

app.listen(3001, () => {
  console.log('API running on http://localhost:3001');
});

✍️ここでやっていること

  • expressを読み込む

    → const express = require('express');

  • アプリを作る：

    → const app = express();

  • リクエストボディをJSONとして使えるようにする

    → app.use(express.json());

  • ルート（URL）を作る

    → GET /api/message というURLにアクセスが来たら、{ message: 'Hello from the API!' }をJSONで返す。

  • サーバーを起動

    → http://localhost:3001で待機状態

3. サーバーを起動する

ターミナルで以下を実行

ターミナル
node index.js

すると👇こういう表示が出るはず

ターミナル
API running on http://localhost:3001

4. ブラウザで動作確認

  1. http://localhost:3001/api/message にブラウザでアクセス
  2. ↓が表示されたら APIサーバー完成 🎉

ブラウザでhttp://localhost:3001/api/message にアクセスした
つまり、 ブラウザからAPIに「GETリクエスト」を送ったということ

index.jsを書き換えた後は

  1. ターミナルでCtrl + Cして一度止める

  2. もう一度 node index.js で起動し直す

🗒️よくあるリクエストの種類

リクエストの種類 説明 例
GET データを「取得」するリクエスト ⚡️ 今回のような取得
POST データを「新規作成」するリクエスト フォーム送信など
PUT/PATCH 既存データを「更新」するリクエスト プロフィール編集など
DELETE データを「削除」するリクエスト 投稿削除など

Discussion