POST とデータの送信
リクエストオプションを指定して JSON ペイロードを送信します。
「POST とデータの送信」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
サーバーにデータを送信する
データを作成または更新するには、本文付きのリクエストを送信します。Fetchでは、2番目の引数に渡すオプションオブジェクトを使ってこれを行います。
メソッドを設定する
必要なHTTPメソッドをmethodに設定します。POSTは作成、PUTまたはPATCHは更新、DELETEは削除に使います。
fetch(url, { method: "POST" });JSON本文を追加する
ほとんどのAPIはJSONを要求します。JSON.stringifyでオブジェクトを文字列化し、bodyに設定します。
fetch(url, {
method: "POST",
body: JSON.stringify({ name: "Ada", age: 36 })
});Content-Type ヘッダー
Content-Type: application/jsonを設定して、本文がJSONであることをサーバーに伝えます。これがないと、サーバーがペイロードを正しく解釈できない場合があります。
fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name: "Ada" })
});レスポンスを読み取る
サーバーは通常、作成されたリソースを返します。GETの場合と同じように、response.json()で読み取ります。
const response = await fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
});
const created = await response.json();完全な作成関数
このパターンを再利用可能な関数にまとめます。データを受け取り、送信し、サーバーのレスポンスを返します。
async function createUser(data) {
const res = await fetch("/api/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data)
});
return res.json();
}PUT と PATCH
リソース全体を置き換えるには PUT を使用し、一部のフィールドだけを更新するには PATCH を使用します。それに応じてボディの形式も異なります。
fetch("/api/users/7", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ age: 37 })
});フォームデータの送信
ファイルのアップロードやフォームの送信には、ボディとして FormData オブジェクトを使用します。Content-Type は自分で設定しないでください。ブラウザーが正しい multipart boundary を追加します。
const form = new FormData();
form.append("avatar", fileInput.files[0]);
fetch("/upload", { method: "POST", body: form });認証
保護されたエンドポイントには認証情報が必要です。Content-Type とともに、Authorization ヘッダーへトークンを送信します。
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer " + token
},
body: JSON.stringify(data)
});Cookie と認証情報
デフォルトでは、fetch はオリジンをまたいで Cookie を送信しません。サーバーが Cookie ベースのセッションを使用している場合は、credentials: "include" を設定します。
fetch(url, { method: "POST", credentials: "include", body: payload });文字列化の注意点
覚えておきましょう。body は文字列（または FormData/Blob）でなければなりません。生のオブジェクトを渡すと、[object Object] が送信されます。オブジェクトは必ず先に JSON.stringify してください。
body: JSON.stringify({ ok: true }) // correct
// body: { ok: true } <-- brokenクイックチェック
POST で JSON を送信します。
まとめ
method、body、ヘッダーを設定してデータを送信します。JSON の場合はオブジェクトを JSON.stringify し、Content-Type: application/json を設定します。アップロードには FormData を使用し（Content-Type は手動で設定しません）、認証には Authorization を追加し、Cookie には credentials: "include" を使用します。レスポンスは response.json() で読み取ります。
よくある質問
「POST とデータの送信」レッスンは無料ですか？
はい。「POST とデータの送信」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「POST とデータの送信」で何を学びますか？
リクエストオプションを指定して JSON ペイロードを送信します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「POST とデータの送信」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。