第 2 章
Web 編集ツールの詳解
v0、bolt.new などを含むウェブ編集系 AI ツールの使い方を習得し、WebContainers などの技術原理を理解して、Web アプリケーションを素早く構築する。
v0：自然言語による UI 生成
v0 は Vercel が提供する AI UI 生成ツールで、自然言語による説明から React コンポーネントを素早く生成できます。
コア機能
- • 自然言語入力：UI 要件を中国語または英語で記述する
- • 即時プレビュー：生成されたUIの効果をリアルタイムで確認する
- • コードエクスポート：完全な React/Next.js コードを生成
- • 反復的な最適化：対話を通じて UI を継続的に改善する
Figma 連携
v0 は Figma デザインから直接コードを生成できます：
- • Figma デザインファイルをインポート
- • 設計要素を自動識別
- • 対応する React コンポーネントを生成する
- • デザインの忠実度を維持する
ワンクリックデプロイ
- • Vercel に直接デプロイ
- • CI/CD を自動構成
- • カスタムドメインをサポート
- • 本番環境対応済み
bolt.new：ブラウザ内フルスタック開発
bolt.new は StackBlitz の WebContainers 技術をベースにしており、ローカル環境なしでブラウザ内でフルスタック開発を完了できます。
WebContainers 技術
WebContainers は StackBlitz の中核技術であり、ブラウザ内で Node.js 環境を実行します：
1
インストール不要：ブラウザ内で直接実行され、ローカルの Node.js は不要
2
完全な環境：npm、yarn、pnpm などのパッケージマネージャーをサポート
3
リアルタイム共同作業：複数人によるリアルタイム編集とプレビュー
4
クイックスタート：数秒で起動、環境設定を待つ必要なし
フルスタック開発
- • フロントエンド + バックエンド開発
- • データベース統合
- • API 開発
- • リアルタイムプレビュー
AI 強化
- • AI コード生成
- • 自然言語からコードへ
- • インテリジェント補完
- • コードの解説
その他のツールの概要
他のウェブ編集系 AI ツールの特徴と適用シナリオを理解する。
Lovable
高速なプロトタイプ開発に特化した AI ツール
- • 高速 UI 生成
- • コンポーネントライブラリの統合
- • 設計からコードへ
AnyCoder
多言語コード生成ツール
- • 複数言語をサポート
- • コード変換
- • コード最適化
Agent 3 (Replit)
Replit の AI Agent 機能
- • エージェントモード開発
- • 自律的なタスク実行
- • クラウド開発環境
ツール比較と選定
プロジェクト要件に基づいて、適切なWeb編集ツールを選択してください。
適用シナリオの比較
v0
- ✓ UI コンポーネントを素早く生成
- ✓ Figma デザインをコードに変換
- ✓ React/Next.js プロジェクト
- ✓ 高速プロトタイピング
bolt.new
- ✓ フルスタックアプリ開発
- ✓ ブラウザ内開発
- ✓ リアルタイム共同作業
- ✓ ローカル環境は不要
選定の推奨事項
- • UI コンポーネント開発：v0（高速生成、Figma 連携）
- • フルスタックアプリケーション：bolt.new（完全な環境、リアルタイム共同作業）
- • 高速プロトタイピング：Lovable（プロトタイプに特化、使いやすい）
- • コード変換：AnyCoder（多言語対応）
学習成果
この章を終えると、あなたは：
- 1Web編集ツールの使い方を習得する（v0、bolt.new など）
- 2WebContainers などの技術原理と利点を理解する
- 3さまざまなツールの適用シーンを理解し、適切なツールを選択できる
- 4Figma 連携、ワンクリックデプロイなどの高度な機能を習得する