Tag
#DevTools
「DevTools」に関連する記事を4本公開中。非エンジニア向けの実務活用情報を中心に、 Claude Code・Claude Cowork の使いこなしをお届けします。
JSON完全理解 — データ形式の文法とバリデーション｜バイブコーディング入門 第15回
バイブコーディングでAPIを扱うとき、データのやりとりに使われる形式がJSON（ジェイソン）だ。第6回のDevToolsで「手紙の中身」として少し登場し、第12回〜14回のREST API設計でも何度もサンプルとして出てきた。今回はこのJSONを正面から取り上げる。文法ルール、ネスト（入れ子）構造の読み方、よくある文法ミスの見つけ方、そしてAIが生成したJSONの検証方法まで。JSONが読めると、APIのレスポンスが「暗号」ではなく「普通の文章」に見えるようになる。
ステータスコードを深掘りする — 404、500、401、403で何が起きているか｜バイブコーディング入門 第8回
第6回で触れたHTTPステータスコードを深掘りする。200（成功）、404（見つからない）、500（サーバーエラー）に加えて、401（認証が必要）、403（権限がない）、422（データ不正）など、バイブコーディングでよく遭遇するコードを網羅的に解説。ステータスコードの3桁の数字が持つ意味のパターンを知り、DevToolsでエラーを見たときに「何が起きているか」を自分で判断できるようになる。
HTTPリクエストとレスポンスを覗く — DevToolsで通信の中身を見る｜バイブコーディング入門 第6回
ブラウザの開発者ツール（DevTools）を使って、実際のHTTP通信の中身を覗いてみる。第1回で学んだ「手紙のやりとり」が、画面の裏側でどんな形で行われているのか。リクエストヘッダー、ステータスコード、レスポンスボディといった要素を、実際の画面を見ながら解説する。エラーが起きたとき「何が起きているか」を自分の目で確認できるようになる。
HTTPメソッドの使い分け — GET・POST・PUT・DELETEで何が変わるか｜バイブコーディング入門 第7回
第5回で登場したHTTPメソッド（GET・POST・PUT・DELETE）を深掘りする。それぞれのメソッドが「手紙の用件」として何を意味するのか、タスク管理アプリの具体例で解説。DevToolsのNetworkタブでMethod列を確認する方法、エラー報告にメソッド名を含めてAIの問題解決を高速化するコツまで。