0Pricing
Vibe Coding · レッスン

バイブする時、理解する時

タスクごとに適切な信頼レベルを選びます。

「バイブする時、理解する時」はCoddyKit上の無料Vibe Codingレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVibe Coding学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vibe Codingコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Two Modes of Building

Vibe coding feels like magic: you describe what you want, the AI writes it, and it just works. But great builders know there are really two modes of working with AI.

Vibe mode: you trust the AI to produce something, you run it, and you iterate by feel. Understand mode: you slow down, read the code, and make sure you know exactly what it does. The skill isn't picking one forever, it's knowing which mode each task deserves.

This lesson teaches you that judgment.

Why Blind Trust Bites You

If you vibe through everything, you eventually hit a wall: a bug you can't fix, a security hole you didn't see, or a feature the AI keeps breaking because you can't tell it precisely what's wrong.

AI tools like Cursor, Claude Code, and Copilot are incredible accelerators, but they don't understand your intent the way you do. They pattern-match. When the stakes are low, that's fine. When the stakes are high, you need to understand what shipped.

The Stakes Question

Before each task, ask one question: what happens if this code is silently wrong?

  • A typo in a landing-page headline? Low stakes, just vibe it.
  • Logic that charges a customer's card? High stakes, understand it.
  • Code that deletes user data? High stakes, understand and test it.

The answer to the stakes question sets your mode.

Green Zone: Pure Vibe

Some work is perfect for full vibe mode. These are reversible, low-risk, and easy to eyeball:

  • UI layout, colors, spacing, copy
  • Throwaway prototypes and demos
  • One-off scripts you run once
  • Boilerplate and config you can regenerate anytime

In v0, Bolt, or Lovable, you can generate a whole landing page from a sentence. If you don't like it, regenerate. Cost of being wrong: near zero.

A Green-Zone Prompt

Here's the kind of prompt you can fire off without reading every line of output. You're describing an outcome and trusting the tool to fill in details.

Build a hero section for a coffee subscription startup:
- Big headline, one-line subheadline, an email signup box
- Warm cream background, dark brown accents
- Mobile-friendly
If I don't like it, I'll just ask you to regenerate.

Red Zone: Understand First

Other work demands understand mode. These are hard to reverse and dangerous when wrong:

  • Authentication and login flows
  • Payments and billing logic
  • Anything that deletes or overwrites data
  • Permission checks (who can see what)
  • Database migrations

Here you still use AI, but you read every line, ask it to explain itself, and test the edge cases before shipping.

Make the AI Explain Itself

In understand mode, don't just accept code, interrogate it. After the AI writes something sensitive, ask it to walk you through the logic in plain English. This is the single best habit for staying in control.

You just wrote the function that checks if a user can delete a post.
Explain it line by line in plain English.
Then list every case where the WRONG user could slip through.
Don't change the code yet, just explain.

A Tiny Bit of Real Code

Understand mode doesn't mean you become a CS professor. It means you can read the shape of the logic. Look at this permission check, then run it. Notice how easy it is to read even if you couldn't write it from scratch.

function canDelete(user, post) {
  return user.id === post.authorId || user.role === 'admin';
}

const alice = { id: 1, role: 'user' };
const post = { authorId: 2 };
console.log(canDelete(alice, post)); // false: not her post
console.log(canDelete({ id: 9, role: 'admin' }, post)); // true: admin

The Middle Zone

Most real work lives in a yellow middle zone: a form, a search filter, a data fetch. Here you vibe the first draft, then spot-check the risky parts.

Strategy: generate fast, verify selectively. Let the AI produce the whole feature, then point your attention only at the lines that touch money, data, or access. Skim the rest.

Build Your Own Trust Ladder

Effective builders keep a mental trust ladder:

  • Trust fully: visuals, copy, prototypes
  • Trust then skim: forms, fetches, filters
  • Trust nothing until explained: auth, payments, deletes, permissions

Over time you'll move tasks up the ladder as your own understanding grows. That's the whole point: AI lets you build now and understand more each cycle.

Decide Out Loud

A simple ritual: before you accept an AI's code, say out loud which mode you're in. "This is just copy, full vibe." Or "This touches the database, understand mode."

Naming the mode forces the stakes question and stops you from sleepwalking risky code into production. It takes three seconds and saves hours of debugging.

Quick Check

Which task most clearly belongs in "understand mode" rather than full vibe mode?

Recap

You learned to match your trust to the stakes:

  • Ask "what if this is silently wrong?" before every task.
  • Green zone (visuals, copy, prototypes): full vibe.
  • Red zone (auth, payments, deletes, permissions): understand first, make the AI explain itself.
  • Middle zone: generate fast, verify the risky lines.

Knowing which mode to use is the core skill of building wisely with AI. Next, we'll look at the specific ways AI code goes wrong, so you can catch it.

よくある質問

「バイブする時、理解する時」レッスンは無料ですか？

はい。「バイブする時、理解する時」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vibe Codingコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vibe Codingコースには全4レッスンが含まれています。

「バイブする時、理解する時」で何を学びますか？

タスクごとに適切な信頼レベルを選びます。 ブラウザで直接実行するハンズオンコードでVibe Codingを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vibe Codingを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVibe Codingは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「バイブする時、理解する時」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVibe Codingレッスンでコードを書いて実行できますか？

はい。すべてのVibe Codingレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. バイブする時、理解する時
  2. AIコードの落とし穴を避ける
  3. 一人前の開発者として成長する
  4. バイブコーディング実践ガイド
← Vibe Codingに戻る