Networkタブの謎を解け

コードを書いてボタンを押しても何も起こらない。コンソール にはよく分からないエラー。なぜ動かないんだと悩むことはありませんか？ この静かなエラーとの戦いは誰もが経験します。今回はそんな Networkタブ の謎を解き明かすミステリーを一緒に捜査していきましょう。 もう、うんともすんとも言わないコードを睨みつけてイライラする日々は終わりにしましょう。 この解説が終わる頃には、あなたも「なるほど、犯人はお前か」と自信を持って バグの原因を突き止められる ようになっているはずです。 さて、今回の事件現場はこちらです。React で作った、見た目は完璧な問い合わせフォーム。 データを Google Apps Script の API に送信するはずが、なぜか全くデータが送られないのです。 コードだけをじっと見ていても、これでは犯人は絶対に見つかりません。そこで登場するのが秘密兵器、Networkタブ です。 左のコードはあくまで「こう動いてほしい」と願う設計図に過ぎませんが、右の Networkタブ は現実を映し出します。 ブラウザとサーバーの間で実際に何が起きているかという「動かぬ証拠」であり、この現実と向き合うことこそが解決への近道 なのです。 では早速捜査開始です。まず F12キー を押して デベロッパーツール を開き、Networkタブ を選んでください。 もう一回フォームを送信してみましょう。すると、赤い行が出てきましたね。これが最初の重要な手がかりです。 この赤い行の ステータスコード を見てください。405 と表示されています。 この数字こそが、まさに犯人へと続く第一歩の証拠物件というわけです。 405 は Method Not Allowed、つまりサーバー側が「そのやり方は許可していないよ」と言っているのです。 リクエスト自体は届いていますが、やり方がまずいのです。詳しく知るために、この行をクリックして Headersタブ を覗いてみましょう。 ここで興味深い事実が判明しました。コードではデータを送りたいので、もちろん POSTメソッド を使いたかったはずです。 しかし Networkタブ が突きつけた現実を見てください。リクエストメソッド が GET になってしまっています。 これは fetch関数 のあるあるですが、何も指定しないと勝手に「データをください」という GETメソッド になるのです。 データを送る POST ではなく貰う GET になっていれば、サーバーも「そのやり方はダメだ」と怒りますよね。 これで犯人の一人が特定できました。原因は React の fetch関数 で method: 'POST' の指定が抜けていたことでした。 コードにこの一行を追加して、もう一度送信してみましょう。今度こそ、と思いきや、事件はまだ終わりません。 見てください。ステータスが緑色の 200 に変わりました。これは通信成功のサインです。 喜びたいところですが、スプレッドシートを確認してみると、データがまだ空っぽのままです。 通信は成功してステータス 200 なのに、肝心のデータが届いていない。事件はもっと深い謎の局面に突入しました。 皆さんなら次にどこを疑いますか？捜査の焦点を移しましょう。 次に見るのは Payloadタブ です。これはブラウザからサーバーへ送ったメッセージの中身、つまりデータそのものです。 宅配便の箱の中身のようなものです。送った荷物に正しい品物が入っているか、ここで直接検品してみましょう。 そしてついに見つけました。これが決定的な証拠です。サーバー側が待っていたデータの名前は user_name でした。 それに対してブラウザが実際に送ったデータには、アンダースコアが入った user_name になっています。 たった一本のアンダースコア、この僅かなタイプミスが原因で、サーバーは「知らないデータだ」と無視していたのです。 まさにこれこそが、「送ったつもり」という思い込みと「実際に送られたもの」という現実のギャップ なのです。 このギャップを突き止めない限り、デバッグ は絶対に終わりません。 今回の捜査を通して、デバッグ における黄金のルールを導き出すことができます。 それがシンプルな 3ステップ調査法 です。これを覚えておけば解決に導けるはずです。 ステップ1は ステータスコード の確認。そもそも通信自体が成功したのか失敗したのかを見ます。 ステップ2は ヘッダー の確認。宛先は合っているか、メソッドは正しくなっているかを確認します。 そしてステップ3が ペイロード の確認。送ったデータの名前と中身は正しいかを見ます。 この流れで一つ一つ確認していけば、もう真犯人を逃すことはありません。 左側のコードは「理想」、右側の Networkタブ は「現実」。この現実を直視することこそが最強の問題解決ツールです。 さて、次にあなたのコードが動かなくなった時、まずどこを見ればいいか、もう答えは分かりますよね？