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通信のデバッグや、より高度な通信ライブラリの自作にも役立ちますよ!