フロントエンドエンジニアのためのHTTP・APIガイド

こんにちは、フロントエンドエンジニアのてりーです。
React + TypeScriptを5年以上使い続け、派遣 → フリーランス → メガベンチャーとキャリアを積んできました。
詳しいキャリアや学習ロードマップについてはこちらからどうぞ！

• てりーのこれまで
• フリーランスからメガベンチャーへ

👉 本記事ではフロントエンドの開発の基礎となるHTTPメソッドについて解説していきます！

1. APIとは？ 〜フロントエンドエンジニアが知るべき基礎知識

API（Application Programming Interface）とは、異なるソフトウェアやシステム同士がデータをやり取りするための「窓口」のようなものです。
APIを使うことで、私たちは複雑な処理を簡単に呼び出し、目的を達成することができます。

APIの役割と重要性

データ取得や送信を効率
APIを通じて、複数のシステム間でデータを素早くやり取りできます。
例：天気予報アプリが気象情報APIを使用して最新の天気データを取得する

異なるシステム間でのデータ連携
システムごとに異なる仕様や言語でも、APIを介して連携が可能です。
例：ECサイトが決済サービスAPI（PayPalやStripeなど）を使用して支払いを処理する

外部サービスとの統合
他社サービスの機能を自分のアプリケーションに取り込めます。
例：地図アプリがGoogle Maps APIを使って地図を表示する

APIの流れを図解

[フロントエンド] → (リクエスト) → [APIサーバー] → (データ処理) → [データベース]
                         ↑                          ↓
              (レスポンス) ←              (データ取得)

• リクエスト：フロントエンドからAPIにリクエストを送信

• データ処理：サーバー側でリクエスト内容を処理

• レスポンス：処理結果がフロントエンドに返される

APIは現代のWeb開発において不可欠な存在であり、その理解は効率的な開発の第一歩です。

2. HTTPメソッドの基本

HTTPメソッドは、APIとやり取りをする際の「指示書」のようなものです。
たとえば「データをちょうだい」「データを保存して」といったリクエストを、HTTPメソッドを使ってサーバーに伝えます。

主なHTTPメソッドの紹介

• GET：データを取得する

• POST：新しいデータを作成する

• PUT：既存のデータを更新する

• PATCH：データの一部を更新する

• DELETE：データを削除する

HTTPメソッドの特徴と使い分け

公式ドキュメント
MDN Web Docs – GET

GETメソッド

特徴：サーバーからデータを取得するために使用します。
使う場面：ユーザーのプロフィール情報を取得、記事一覧を表示
注意点：リクエストパラメータがURLに含まれるため、機密情報の送信には向きません

POSTメソッド

特徴：新しいデータをサーバーに送信します。
使う場面：新規ユーザー登録、フォーム送信
注意点：送信データはリクエストボディに含めるため、URLには表示されません。

PUTとPATCHの違い

PUT：データ全体を置き換える
PATCH：データの一部だけを更新する
使う場面：ユーザー名やメールアドレスの更新

DELETEメソッド

特徴：サーバー上のデータを削除します。
使う場面：アカウント削除、投稿削除

HTTPメソッドはAPIを使う上で欠かせない知識です。
どのメソッドをいつ使うかを理解しておくと、API設計やデバッグがスムーズになります。

3. HTTPステータスコードの理解

HTTPステータスコードは、APIリクエストに対してサーバーがどのような応答を返したかを示す「通信の結果表」のようなものです。エラーが起きた時や成功した時に適切なステータスコードを理解していると、原因をすばやく特定できます。

HTTPステータスコードの流れ

リクエストに対してレスポンスとしてステータスコードが返ってきます！

[フロントエンド] → リクエスト送信
        ↓
[サーバー] → ステータスコード返却 (200, 400, 404, 500など)
        ↓
[フロントエンド] → ステータスコードを解析して画面に反映

主なステータスコードの解説

こちらの表示主なステータスコードをまとめています！

大きく分けると以下の番号で分類されています！

・100系：情報
・200系：成功
・300系：リダイレクト
・400系：クライアントのエラー
・500系：サーバーのエラー

詳しく知りたい方はこちらをご覧ください
👉HTTP レスポンスステータスコード リファレンス

フロントエンドの実務でのステータスコードの確認方法

サーバーから帰ってきたステータスコードは画面上のdevtoolでNetworkで見る事が出来ます！
HeadersにリクエストしたHTTPメソッドとステータスコードが表示されています。

今回はPOSTメソッドのリクエストを行い、ステータスコードも200OKが返ってきているので、正常に表示されていますね！
HTTPステータスコードを理解し、適切に対処することで、APIの信頼性とユーザー体験が大きく向上します。

[ユーザー操作] → [フロントエンド] → APIリクエスト → [バックエンド] → データベース
                             ↑                                         ↓
                       レスポンス ←                             データ処理・取得

useEffect(() => {
  fetch('https://api.example.com/users/123', {
    method: 'GET',
    headers: {
      'Authorization': 'Bearer YOUR_JWT_TOKEN'
    }
  })
    .then(response => response.json())
    .then(data => {
      console.log('User Profile:', data);
    })
    .catch(error => {
      console.error('Error fetching user data:', error);
    });
}, []);

{
  "id": 123,
  "name": "John Doe",
  "email": "john@example.com"
}

例: JWT付きリクエスト

fetch('https://api.example.com/posts', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_JWT_TOKEN',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ title: 'New Post', content: 'This is a new post' })
});

3. CORS（クロスオリジンリソースシェア）問題

CORSは、異なるドメイン間でAPIリクエストを行う際に発生する制約です。

CORSエラーの例

Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' 
has been blocked by CORS policy.

対策

• バックエンド側でCORSヘッダーを適切に設定する。
• 例: Access-Control-Allow-Origin ヘッダーで特定のオリジンを許可。

4. API連携時のエラーハンドリング

エラーが発生した場合は、ユーザーに適切なメッセージを表示することが重要です。

例: 404エラーハンドリング

fetch('https://api.example.com/users/999')
  .then(response => {
    if (response.status === 404) {
      throw new Error('ユーザーが見つかりません');
    }
    return response.json();
  })
  .catch(error => {
    console.error(error.message);
  });

5. まとめ

APIの設計や連携はフロントエンド開発の基礎でありながら、奥が深い技術です。
HTTPメソッドの基礎意を理解して、Webサービスの全体像を理解しましょう！

1. APIの役割を理解する

2. 基本的なHTTPメソッドを把握する

   • GET：データ取得 – 記事一覧やユーザープロフィールの取得。
   • POST：データ作成 – 新規登録やフォーム送信。
   • PUT / PATCH：データ更新 – プロフィール編集。
   • DELETE：データ削除 – アカウントや投稿の削除。

3. HTTPステータスコードを理解する

   • 200系：成功
   • 400系：クライアントのエラー
   • 500系：サーバーのエラー

✅  次に学ぶべき内容

👉MDN Web Docs – APIガイド
👉Reactを基礎から学ぶ
👉 Reactでアプリケーションを作る
👉 自分の市場価値を知る
👉 エンジニア転職を成功させる