HTTPメソッドについて


# HTTPメソッドの概要

| メソッド | リクエストボディ | 用途                     | 特徴               |
|----------|------------------|--------------------------|--------------------|
| GET      | ×（基本的に使用しない） | データの取得             | 安全・冪等         |
| POST     | 〇               | 新規作成、処理要求       | 非冪等・安全でない |
| PUT      | 〇               | 既存データの完全更新     | 冪等               |
| PATCH    | 〇               | 既存データの部分更新     | 非冪等（実装依存） |
| DELETE   | 〇（使用可能）   | データの削除             | 冪等・安全でない   |

## 用語解説

- **リクエストボディ**: クライアントがサーバーに送るデータ本体。
- **安全 (Safe)**: データに変更を加えない操作（例: GET）。
- **冪等 (Idempotent)**: 同じリクエストを何度送っても結果が変わらない操作（例: PUT, DELETE）。

---

## 備考

- `GET` はURLパラメータでデータを送るが、ボディの使用は非推奨。
- `DELETE` もボディを技術的に送れるが、多くのAPIでは使用されない。
- REST APIでは、これらのメソッドを**意味に応じて使い分けることが設計の基本**。


# services/api.js
```services/api.js

import axios from 'axios';
import { useShareStore } from "../stores/useShareData.js"; // Piniaストアをインポート

class ApiService {

    constructor() {
        this.api = axios.create({
            baseURL: import.meta.env.VITE_API_URL,
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
        });

        // ✅ すべてのリクエストに認証トークンをセット（ログインリクエストを除外）
        this.api.interceptors.request.use(
            (config) => {
                const shareStore = useShareStore(); // Piniaストアを取得
                const token = shareStore.LoginData?.token; // Piniaからトークン取得
                
                if (token && config.url !== '/login' && config.url !== '/nfc-login') {
                    config.headers.Authorization = `Bearer ${token}`;
                }
                return config;
            },
            (error) => Promise.reject(error)
        );
    }

    // エラーハンドリングの共通処理
    handleApiError(error) {
        // 通信エラーの場合（サーバーに接続できない）
        if (!error.response) {
            console.error('🔴 [通信エラー] サーバーに接続できません');
            throw {
                type: 'connection_error',
                message: 'サーバーに接続できません。ネットワーク接続を確認してください。'
            };
        }

        // 認証エラーの場合（401）
        if (error.response.status === 401) {
            console.error('🔴 [認証エラー] ログインに失敗しました');
            throw {
                type: 'auth_error',
                message: error.response.data.message || 'ログインIDまたはパスワードが正しくありません。'
            };
        }

        if (error.response.status === 500) {
            console.error('🔴 [サーバーエラー] サーバーに接続できません');
            throw {
                type: 'connection_error',
                message: error.response.data.message || 'サーバーに接続できません。'
            };
        }

        // その他のエラーの場合
        console.error('🔴 [その他のエラー]', error);
        throw {
            type: 'unknown_error',
            message: error.response.data.message || '予期せぬエラーが発生しました。'
        };
    }
            //--------------------------------------------------------------------//
                // スケジュール削除メソッド
            async deleteSchedule(idList) {
                try {
                    console.log("🟢 削除リクエスト送信:", idList);
                    
                    // バックエンドは配列を期待しているので、正しい形式でデータを準備
                    const config = { 
                        data: { data: idList },
                        withCredentials: true 
                    };
                    
                    const response = await this.api.delete(import.meta.env.VITE_DELETE_SCHEDULE, config);
                    console.log("🟢 削除レスポンス:", response.data);
                    return response.data;
                } catch (error) {
                    console.error('Error deleting schedule:', error.response?.data || error);
                    throw error;
                }
            }

            //------------------------------------------------------//

}

// インスタンスをエクスポートして、他のモジュールで再利用可能に
const apiService = new ApiService();
export default apiService;
```
# ポイント
リクエストボディで送るDELETE

```api.js
                // スケジュール削除メソッド
            async deleteSchedule(idList) {
                try {
                    console.log("🟢 削除リクエスト送信:", idList);
                    
                    // バックエンドは配列を期待しているので、正しい形式でデータを準備
                    const config = { 
                        data: { data: idList },
                        withCredentials: true 
                    };
                    
                    const response = await this.api.delete(import.meta.env.VITE_DELETE_SCHEDULE, config);
                    console.log("🟢 削除レスポンス:", response.data);
                    return response.data;
                } catch (error) {
                    console.error('Error deleting schedule:', error.response?.data || error);
                    throw error;
                }
            }
```


## 🌐 HTTPメソッドとは？

HTTPメソッドとは、**Webサーバーに対してどんな操作をしたいのかを指示する命令**のことです。  
Webブラウザやアプリ、APIなどがサーバーとやり取りするときに必ず使われます。

---

### 🎯 よく使われるHTTPメソッド

| 操作したいこと         | HTTPメソッド |
|------------------------|--------------|
| データを読みたい       | `GET`        |
| 新しく登録したい       | `POST`       |
| 既存のデータを上書き   | `PUT`        |
| データを削除したい     | `DELETE`     |

これらは「**CRUD操作**」に対応していて、Webアプリ/API開発でよく使われます。

---

### 📦 具体例（ユーザーAPI）

```
APIのURL: https://example.com/api/users
```

| メソッド   | 説明                         |
|------------|------------------------------|
| `GET`      | ユーザー一覧を取得           |
| `POST`     | 新しいユーザーを追加         |
| `PUT`      | ユーザー情報を更新（上書き） |
| `DELETE`   | ユーザーを削除               |

---

### 🔁 CRUDとHTTPメソッドの対応

| CRUD操作 | HTTPメソッド | 説明         |
|----------|---------------|--------------|
| Create   | `POST`        | 作成         |
| Read     | `GET`         | 読み取り     |
| Update   | `PUT`（または `PATCH`） | 更新     |
| Delete   | `DELETE`      | 削除         |

---

## ✅ 結論

> **HTTPメソッドは、サーバーに「何をしたいか」を伝えるための基本的なルール**です。

APIやWebアプリ開発の基礎中の基礎として、必ず覚えておきたい内容です。


### 📘 HTTPメソッド一覧

| メソッド   | 意味・用途                                       |
|------------|--------------------------------------------------|
| `GET`      | リソースの取得（読み取り）                       |
| `POST`     | 子リソースの作成、または処理の実行               |
| `PUT`      | リソースの**全体更新**または**新規作成**         |
| `DELETE`   | リソースの削除                                   |
| `HEAD`     | リソースのヘッダ情報のみを取得（本文は返さない） |
| `OPTIONS`  | サポートしているHTTPメソッドの取得               |
| `TRACE`    | 自分自身にリクエストを返す（デバッグ用）         |
| `CONNECT`  | 通信トンネルの確立（主にHTTPSプロキシで使用）    |

---

### 🔁 CRUDとHTTPメソッドの対応表

| CRUD操作 | HTTPメソッド | 説明           |
|----------|---------------|----------------|
| Create   | `POST`        | データの作成   |
| Read     | `GET`         | データの取得   |
| Update   | `PUT`         | データの更新   |
| Delete   | `DELETE`      | データの削除   |

---

### ✅ 備考

- `PATCH` は `PUT` と似ており、「部分更新」に使われることが多いです。
- `OPTIONS` はCORS対応のプリフライトリクエストなどで重要になります。
- `GET` は副作用のない、安全な操作とされます（= 状態を変えない）。