Vibe Coding · レッスン

コンポーネントを生成する

ボタン、カード、フォームを必要に応じて生成します。

レッスン 2/413 ステップ

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

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

Build in Pieces, Not All at Once

A full page can feel overwhelming to prompt. The pro move is to generate one component at a time: a button, a card, a form, a navbar. Each is a small, reusable building block.

In this lesson you'll prompt v0, Lovable, and Bolt to produce clean components on demand — and learn how to combine them into a real interface.

What Is a Component?

A component is a self-contained piece of UI you can reuse: one button definition, used 50 times across your app. Change it once, it updates everywhere.

Thinking in components keeps your prompts focused and your app consistent. Most AI UI tools output components in React, the most popular way to build modern interfaces.

Common components you'll prompt for:
- Button (primary, secondary, ghost)
- Card (image + title + text + action)
- Form input (label + field + validation)
- Navbar / Footer
- Modal / Dialog
- Avatar, Badge, Tabs

Prompting a Button

Start tiny. Ask for a button and describe every state: default, hover, disabled. Naming states tells the AI you care about polish.

The more variants you request up front, the more reusable the result.

"Create a reusable primary Button component in React.
Rounded corners, a bold accent-blue background, white text.
Include hover (slightly darker) and disabled (greyed out) states.
Accept the label as a prop so I can reuse it."

Prompting a Card

Cards are everywhere — products, blog posts, profiles. Describe the slots: what goes in the card and in what order.

Tell the AI which parts are images, headings, and actions so the layout comes out right.

"Create a product Card component: a square image on top,
then a bold product title, a short description, a price in the
bottom-left, and an 'Add to cart' button in the bottom-right.
Subtle shadow, rounded corners, lifts slightly on hover."

Prompting a Form

Forms are where details matter most: labels, placeholders, required fields, and error messages. Spell them out.

Good forms also include validation — telling the user when something is wrong. Ask for it explicitly.

"Create a contact form with three fields: Name, Email, and Message.
Each has a label above it. Email shows a red error if it's not valid.
A 'Send' button at the bottom, disabled until all fields are filled.
Clean, modern styling with generous spacing."

Reading the Output (Lightly)

You don't need to write React, but recognizing its shape builds confidence. A component is a function that returns markup. Below is the kind of simple, framework-free version of a button the AI might explain to you.

You can run this snippet — it just logs the label, simulating what a button 'does' when clicked.

function Button(label) {
  return {
    label: label,
    click: function () {
      console.log(label + ' was clicked!');
    }
  };
}

const saveBtn = Button('Save');
saveBtn.click();

Make It Reusable With Props

The word that turns a one-off design into a reusable component is prop (short for 'property') — a value you pass in to customize it.

Ask the AI to make things configurable: label, color, size, icon. Then one Button component covers every button in your app.

"Refactor my Button so it accepts props: label, variant
('primary' | 'secondary' | 'ghost'), size ('sm' | 'md' | 'lg'),
and an optional left icon. Give each variant distinct styling."

Generating Variants in One Shot

Need a whole set? Ask for all variants at once and request a preview gallery so you can see them side by side. Tools like v0 will render every option for you to compare.

"Generate a Badge component with 4 color variants:
success (green), warning (yellow), error (red), and info (blue).
Then show all four side by side in a small preview gallery
so I can compare them."

Combining Components Into a Page

Once you have buttons, cards, and forms, assemble them. Reference the components you already made by name so the AI reuses them instead of inventing new ones.

This keeps your design consistent — the same button everywhere, the same card style across sections.

"Build a product listing page that uses my existing Card component
in a 3-column responsive grid, with my primary Button as the
'Load more' action at the bottom. Reuse the components — don't
create new styles."

Use a Component Library as a Base

Many tools build on top of polished libraries like shadcn/ui. You can lean on these to get accessible, professional components instantly, then restyle them by prompt.

You don't install anything manually in v0 or Lovable — just ask for it.

"Use shadcn/ui components as the foundation. Build a settings panel
with a Card containing toggle switches, a Select dropdown for language,
and a Save button. Match the rest of my app's spacing and colors."

Practice the Component Workflow

Try this loop in v0 or Lovable: generate a single Card, refine it until you love it, then ask for a grid of them. Building bottom-up — small pieces first — gives you far more control than prompting a whole page blindly.

Save prompts that work well; they become your personal component toolkit.

"Create a testimonial Card: a round avatar, the person's name and
role, a star rating, and a quote. Then generate a 3-column grid of
three of these cards with placeholder testimonials."

Quick Check

Why is asking the AI to make a component accept props so useful?

対話的なレッスンで答える

Recap: Components on Demand

You learned to build interfaces in reusable pieces. Prompt for one component at a time — button, card, form — and describe its slots and states. Make components flexible with props, generate variants in one shot, and lean on libraries like shadcn/ui as a base.

Then assemble components into pages by referencing them by name so the AI reuses, not reinvents. Next: making everything beautiful with colors, spacing, and dark mode — all by prompt.

無料で開始

AI チューターと学ぶ JavaScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 25
レッスン: 100

無料で学習を始めるコース全体を表示

よくある質問

「コンポーネントを生成する」レッスンは無料ですか？

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

「コンポーネントを生成する」で何を学びますか？

ボタン、カード、フォームを必要に応じて生成します。ブラウザで直接実行するハンズオンコードでVibe Codingを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「コンポーネントを生成する」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Vibe Codingに戻る