【JS応用|初心者向け】Web開発の基本!Fetch APIの「Request.prototype.method」を使いこなそう

1. 導入:なぜRequest.prototype.methodを知る必要があるのか?

WebサイトやWebアプリを開発する際、サーバーとデータのやり取りをするために「Fetch API」を使う機会は非常に多いです。その中で、自分が送ろうとしているリクエストが「データを取得するためのもの(GET)」なのか、「データを送信するためのもの(POST)」なのかを識別・制御することは、バグのないアプリケーションを作るための第一歩です。Request.prototype.methodを使えば、リクエストの「目的」を簡単に取得・設定でき、より柔軟で堅牢な通信処理が可能になります。

2. 基礎知識:Requestとmethodの関係

Fetch APIでリクエストを送る際、私たちは「Requestオブジェクト」というものを作成します。このオブジェクトは、通信に必要なあらゆる情報(URL、ヘッダー、ボディなど)を保持しています。
その中でも「method」プロパティは、HTTPメソッド(GET, POST, PUT, DELETEなど)を格納する場所です。
HTTPメソッドは、サーバーに対して「何をしたいか」を伝える重要な合図です。例えば、読み取りたいならGET、作成したいならPOSTといったルールが決まっています。Request.prototype.methodは、まさにこの「通信の作法」を管理するための重要なプロパティです。

3. 実装/解決策:methodの確認と設定

Requestオブジェクトを作成する際、あるいは作成した後に、methodプロパティにアクセスすることで、そのリクエストがどのメソッドで送信されるかを確認できます。また、新しいRequestを作成する際、オプション引数でmethodを指定することで、通信の挙動をコントロールできます。

4. サンプルプログラム

以下のコードをブラウザのコンソールや、JavaScriptファイルに貼り付けて確認してみてください。

// 1. 新しいリクエストを作成(デフォルトはGET)
const req = new Request('https://api.example.com/data');

// 2. 現在のメソッドを確認
console.log('現在のメソッド:', req.method); // 出力: GET

// 3. POSTメソッドのリクエストを新しく作成する
const postReq = new Request('https://api.example.com/data', {
  method: 'POST', // ここでメソッドをPOSTに指定
  body: JSON.stringify({ name: '太郎' }),
  headers: { 'Content-Type': 'application/json' }
});

// 4. 設定されたメソッドを確認
console.log('新しく作成したメソッド:', postReq.method); // 出力: POST

// 実際に通信を行う例
fetch(postReq)
  .then(response => console.log('通信完了!'))
  .catch(error => console.error('エラー発生:', error));

5. 応用・注意点:現場で役立つポイント

現場の開発でよくある失敗として、「意図しないメソッドでリクエストを送ってしまう」というケースがあります。特に、フォーム送信などでGETとPOSTを取り違えると、サーバー側でエラーが発生したり、予期せぬデータ変更が起きてしまうリスクがあります。

・大文字小文字に注意: JavaScriptの仕様上、メソッドは「POST」のように大文字で指定するのが一般的です。小文字でも動作する場合が多いですが、明示的に大文字で書く癖をつけておくとトラブルが減ります。
・読み取り専用のケース: 一度作成されたRequestオブジェクトのmethodを直接書き換えることはできません。メソッドを変更したい場合は、新しいRequestオブジェクトを再生成するのが正しい手順です。

このプロパティを理解しておけば、API通信のデバッグや、より高度な通信ライブラリの自作にも役立ちますよ!

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