ウェブ開発に使用されるHTTPメソッド４選[GET・POST・PUT・DELETE]について解説

アプリ開発日記

※プログラムコード
・使用言語：JavaScript
・フレームワーク
　・Next.js：15.2.0-canary.50
　・React：19.0.0
・使用ファイル：route.js(バックエンド)

ウェブ開発を始めると、クライアントとサーバーがどのようにデータをやり取りするのかを理解することが重要になります。そのポイントとなるのがHTTPメソッドです。HTTPメソッドにはいくつかの種類がありますが、本記事では特に頻繁に使用される「GET」「POST」「PUT」「DELETE」の4つについて、初心者にも分かりやすく解説していきます。

GETメソッド

GETメソッドは、データを取得するために使用されるHTTPメソッドです。

用途：読み込み・取得

例えば、ブラウザでURLを入力してWebページを開くと、その裏側ではGETリクエストが送信されています。GETリクエストの特徴は、リクエストの情報がURLに含まれることです。そのため、検索エンジンの検索結果ページでは「?q=検索ワード」のように、検索キーワードがURLに表示されます。この仕組みは、ページの共有やブックマークが簡単にできるという利点があります。ただし、URLにデータが含まれるため、パスワードや個人情報などの機密情報を送るのには適していません。また、GETリクエストはサーバーのデータを変更しないため、同じリクエストを何度送っても内容は変わらず、安全にデータを取得できます。

使用例

import 〇〇〇 from "＠/database";　　　//接続するデータベース
import { ItemModel } from "＠/schemaModels";　　

export async function GET() {
    try{
        await 〇〇〇()　　//データベース
        const allItems = await ItemModel.find()　//アイテム情報の取得
    }catch{

    }
    
}

POSTメソッド

POSTメソッドは、サーバーにデータを送信するためのメソッドです。

用途：作成・投稿

例えば、ログインフォームに入力した情報を送信する際や、新しいユーザーを登録する際などに使われます。このメソッドでは、リクエストのデータがURLではなく、リクエストボディに含まれるため、機密情報を扱うのに適しています。また、GETメソッドと異なり、同じリクエストを繰り返し送るとサーバー上のデータが変更される可能性があるため、意図しない重複送信を防ぐための対策が必要になることもあります。たとえば、オンラインショッピングの購入ボタンを連続で押すと、同じ注文が複数回行われてしまう可能性があるため、適切な処理を行うことが推奨されます。

使用例

import ○○○ from "＠/database";
import { ItemModel } from "＠/schemaModels";

export async function POST(request){
    const reqBody = await request.json()

    try{
        await ○○○()　　//データベース
        await ItemModel.create(reqBody)　　//商品の作成
    }catch{

    }
}

PUTメソッド

PUTメソッドは、サーバー上の既存のリソースを修正・更新するメソッドです。

用途：修正・更新

例えば、ユーザーのプロフィール情報を変更する場合や、記事の内容を編集する場合などが該当します。PUTメソッドの特徴として、同じ更新リクエストを何回送っても、最終的なデータの状態が変わらないことが挙げられます。

使い方

import ○○○ from "＠/utils/database"
import { ItemModel } from "＠/schemaModels" 

export async function PUT(request, context){
    const reqBody = await request.json() 
    try{
        await ○○○()　　//データベース
        const singleItem = await ItemModel.findById(context.params.id)　//一意のアイテムを取得
        await ItemModel.updateOne({_id: context.params.id}, reqBody)　//アイテム情報の更新
    }catch{
      
    }
}

DELETEメソッド

DELETEメソッドは、サーバー上のリソースを削除するためのメソッドです。

用途：削除

例えば、ユーザーアカウントを削除する機能や、投稿した記事を削除する機能などで使用します。このメソッドもPUTメソッドと同様に、同じリクエストを何回送っても結果は変わりません。ただし、削除後のページは二度と戻せないことが多いため、取り消し機能を実装する、もしくは削除前に確認メッセージを表示するなどの工夫によって解消できそうです。

使い方

import 〇〇〇 from "＠/utils/database"
import { ItemModel } from "＠/schemaModels"

export async function DELETE(request, context){
    const reqBody = await request.json()
    try{
        await ○○○()　　//データベース
        const singleItem = await ItemModel.findById(context.params.id)　　//一意のアイテムを取得
　　　　await ItemModel.deleteOne({_id: context.params.id})　　//アイテムの削除
    }catch{
        
    }
}

まとめ

HTTPメソッド用途CRUD
GET読み込み・取得Read
POST作成・投稿Create
PUT修正・更新Update
DELETE削除Delete

ここまでご覧いただき、ありがとうございました。
今回は、HTTPメソッドの「GET」「POST」「PUT」「DELETE」の4つについてまとめてみました。
Web開発において、よく利用されるメソッドなので参考になれば幸いです。

その他のメソッド

上記では、４つのHTTPメソッドをまとめましたが、他にも多くのメソッドが存在し、Webに限らず開発分野ではそれぞれのメソッドを使い分ける必要があります。
最後に、メソッドの一覧表を記載しておきます。

HTTPメソッド
用途
GET読み込み・取得
HEADヘッダー情報の取得
POST作成・投稿
OPTIONSメソッドの調査
PUT修正・更新
DELETE削除
TRACEデバッグ情報の取得
PATCH一部更新
LINK他の情報との関連付け
UNLINKLINKで設定した関連を外す
CONNECTプロキシ接続の使用

タイトルとURLをコピーしました