Tag
#バイブコーディング
「バイブコーディング」に関連する記事を19本公開中。非エンジニア向けの実務活用情報を中心に、 Claude Code・Claude Cowork の使いこなしをお届けします。
HTTPS・セキュリティの基本 — 「知らなかった」では済まない｜バイブコーディング入門 第17回
バイブコーディングでWebアプリを作ったら、次に気にすべきはセキュリティだ。「AIが書いたコードだから安全」は誤解で、AIも脆弱性のあるコードを生成することがある。今回はHTTPS（通信の暗号化）の仕組み、XSS（クロスサイトスクリプティング）、SQLインジェクション、CSRF（クロスサイトリクエストフォージェリ）という3大攻撃手法の原理と防ぎ方、そしてバイブコーディングでAIにセキュリティ対策を依頼するテンプレートを解説する。第7回のHTTP、第11回のCookie、第16回の認証の知識が、ここで一本の線につながる。
JSON完全理解 — データ形式の文法とバリデーション｜バイブコーディング入門 第15回
バイブコーディングでAPIを扱うとき、データのやりとりに使われる形式がJSON（ジェイソン）だ。第6回のDevToolsで「手紙の中身」として少し登場し、第12回〜14回のREST API設計でも何度もサンプルとして出てきた。今回はこのJSONを正面から取り上げる。文法ルール、ネスト（入れ子）構造の読み方、よくある文法ミスの見つけ方、そしてAIが生成したJSONの検証方法まで。JSONが読めると、APIのレスポンスが「暗号」ではなく「普通の文章」に見えるようになる。
認証と認可 — 誰が何をできるかを管理する仕組み｜バイブコーディング入門 第16回
Webアプリにログイン機能を付けたい。でも「ログインの裏側で何が起きているのか」を知らないまま作ると、データ漏洩や不正アクセスのリスクが生まれる。今回は認証（あなたは誰？）と認可（あなたは何をしていい？）の違いから始めて、パスワード認証の基本、OAuth（他のサービスのアカウントでログイン）、JWT（通行証トークン）、そしてバイブコーディングでAIにログイン機能を頼むときの具体的な指示テンプレートまで。第11回で学んだCookieとセッションの知識が、ここで一気につながる。
APIのバージョニングとページネーション — 大量データを扱う設計テクニック｜バイブコーディング入門 第14回
バイブコーディングでAIに作ってもらったアプリのデータが100件、1,000件と増えてくると、一覧画面の表示が遅くなる。そのときに必要になるのが「ページネーション（ページ送り）」だ。またAPIの仕様を変えたいとき、既存の画面を壊さないための「バージョニング」という仕組みもある。この記事では、ページネーションの2つの方式（オフセット方式とカーソル方式）、APIバージョニングの考え方、エラーレスポンスの構造化という3つの設計テクニックを、非エンジニア向けに解説する。
ステータスコードを深掘りする — 404、500、401、403で何が起きているか｜バイブコーディング入門 第8回
第6回で触れたHTTPステータスコードを深掘りする。200（成功）、404（見つからない）、500（サーバーエラー）に加えて、401（認証が必要）、403（権限がない）、422（データ不正）など、バイブコーディングでよく遭遇するコードを網羅的に解説。ステータスコードの3桁の数字が持つ意味のパターンを知り、DevToolsでエラーを見たときに「何が起きているか」を自分で判断できるようになる。
いいURLの設計 — RESTfulという考え方｜バイブコーディング入門 第5回
URLの名前の付け方に「良い・悪い」があることを解説する。RESTfulという設計の考え方を、お店の案内表示に例えて紹介。CursorやClaude Codeに指示するとき、URLの構造を明示するだけでAIが生成するコードの品質が上がる。名詞を使う、階層を浅く保つ、HTTPメソッドで操作を表現するという3つのルールを実践的に解説。
HTTPリクエストとレスポンスを覗く — DevToolsで通信の中身を見る｜バイブコーディング入門 第6回
ブラウザの開発者ツール（DevTools）を使って、実際のHTTP通信の中身を覗いてみる。第1回で学んだ「手紙のやりとり」が、画面の裏側でどんな形で行われているのか。リクエストヘッダー、ステータスコード、レスポンスボディといった要素を、実際の画面を見ながら解説する。エラーが起きたとき「何が起きているか」を自分の目で確認できるようになる。
HTTPメソッドの使い分け — GET・POST・PUT・DELETEで何が変わるか｜バイブコーディング入門 第7回
第5回で登場したHTTPメソッド（GET・POST・PUT・DELETE）を深掘りする。それぞれのメソッドが「手紙の用件」として何を意味するのか、タスク管理アプリの具体例で解説。DevToolsのNetworkタブでMethod列を確認する方法、エラー報告にメソッド名を含めてAIの問題解決を高速化するコツまで。
URLの読み方 — アドレスバーの文字列を分解してみる｜バイブコーディング入門 第4回
ブラウザのアドレスバーに表示されるURLを分解し、各パーツの意味を解説する。スキーム・ドメイン・パス・クエリパラメータ・フラグメントという5つの要素を、住所と手紙の宛名に例えて説明。CursorやClaude Codeが生成するルーティングの仕組みが理解できるようになり、エラー時の原因特定が速くなる。
あなたのWebアプリは「手紙のやりとり」で動いている｜リクエストとレスポンスの仕組み
CursorやClaude Codeで作ったWebアプリが「なぜ動くのか」を、手紙のやりとりに例えて解説する。リクエストとレスポンスという2つの概念を理解するだけで、エラーの原因が読めるようになり、AIへの指示の精度が上がる。バイブコーディング入門・第1回。
フロントエンド・バックエンド・データベース — 3層構造を理解する｜バイブコーディング入門 第2回
Webアプリを構成する3つの役割（フロントエンド・バックエンド・データベース）を、レストランの店舗運営に例えて解説する。CursorやClaude Codeが生成するコードが「どの層の処理なのか」を判断できるようになると、エラー対応とAIへの指示が劇的に改善する。
Webの歴史を5分で — なぜ今の形になったのか｜バイブコーディング入門 第3回
Webアプリはなぜ今の形をしているのか。静的ページ→動的ページ→API＋SPA→フルスタックフレームワークという4つの時代を、レストランの進化に例えて解説する。CursorやClaude Codeが生成するコードの「なぜこうなっているのか」が分かると、AIへの指示の精度が上がり、エラーの見当がつけやすくなる。
環境変数とデプロイ：ローカルで動くのにVercelで500エラーになる理由
バイブコーディング入門 第19回。環境変数とは何か、.envファイルの書き方、NEXT_PUBLIC_プレフィックスの意味、ローカル→ステージング→本番の3環境管理、Vercelデプロイの仕組み、カスタムドメインのDNS設定まで解説。「ローカルでは動くのにVercelで500エラー」の原因の80%は環境変数の設定漏れです。
パフォーマンスとキャッシュ――サイトを速くする仕組みを理解しよう
バイブコーディング入門 第20回。キャッシュの仕組み（ブラウザ/CDN/サーバサイド）、Cache-Control、LCP/CLS/INPの基本指標、Lighthouseでスコアを測る方法、よくあるパフォーマンス問題（画像が重い・APIが遅い・初期ロード）とその解決策をわかりやすく解説します。
SPA・SSR・SSG — レンダリング方式の選び方
バイブコーディング入門 第21回。CSR/SSR/SSG/ISRの4方式を比較。ブログはSSG、ダッシュボードはCSR、ECはSSR。Next.jsのuse clientの使い分け。バイブコーダーあるある「use clientをどこに付けるかわからない」を解決します。
WebSocketとリアルタイム通信 — 「更新ボタン」なしで最新情報が届く仕組み｜バイブコーディング入門 第22回
バイブコーディングでチャットや通知機能を作ると、AIが「WebSocketで接続します」「SSEでストリーミングします」と言ってくる。WebSocket？ SSE？ 何のことだろうか。今回は、HTTPの「手紙方式」の限界と、それを超えるリアルタイム通信の仕組みを解説する。第1回で学んだ「手紙のやりとり」の概念を拡張し、WebSocket（電話回線）とSSE（ラジオ放送）という2つの通信方式を、非エンジニアでもわかる言葉で説明する。Supabase Realtimeを使った実践テンプレートも紹介する。
これからのWeb — バイブコーダーが知っておくべき4つの未来｜バイブコーディング入門 第23回（最終回）
全23回のバイブコーディング入門も最終回。HTTP/3、GraphQL、Edge Computing、AIとWebの融合という、ここ数年であなたのバイブコーディング体験に大きな影響を与える4つの技術トレンドを、非エンジニア向けにわかりやすく整理する。難しい用語ではなく「いつ・なぜ・あなたの仕事にどう関わるか」を中心に解説。次にAIから新しい技術名が出てきたとき、慌てずに判断できるようになるための地図を提供する。
Claude Code と Claude Cowork どっちを選ぶ？｜非エンジニアのための判断チャート
Claude Code（ターミナルで動くAI開発ツール）と Claude Cowork（ブラウザのチャット型AI）は、同じClaudeでも使い方がまったく違う。この記事では、非エンジニアの視点で2つの違いを整理し、4つの質問に答えるだけであなたに合った方が分かる判断チャートを紹介する。バイブコーディングでCodeを使うケース、Coworkだけで十分なケース、両方を組み合わせるケースをそれぞれ解説する。
データベースの基本 — Webアプリの「記憶」を理解する｜バイブコーディング入門 第18回
バイブコーディングでアプリを作ると、AIが「Supabaseにテーブルを作りましょう」と言ってくる。テーブル？ カラム？ リレーション？ 何のことだかわからないまま「はい」と答えていないだろうか。今回はデータベースの基本を解説する。Excelとの違い、テーブル・行・列の構造、SQLの読み方、そしてバイブコーディングでよく使うSupabaseの仕組みを、非エンジニアでもわかる言葉で説明する。第2回の3層構造、第17回のSQLインジェクションの知識がここでつながる。