新しいコードの記述

Verdent for VS Code は、特別な構文を必要とせず、自然言語のリクエストで新しいコードを記述できます。作りたいものを説明するだけで、Verdent はプロジェクトのパターンや規約を維持しながら、複数のファイルにまたがる本番品質の実装を作成します。

このページで学べること

• 自然言語プロンプトで新機能をリクエストする
• 適切な依存関係を持つコードを複数ファイルにわたって生成する
• さまざまなプログラミング言語やフレームワークで作業する
• プロジェクト構造全体をスキャフォールドする
• 対話的な改善で生成コードを反復改善する

前提条件

Verdent でコードを記述する前に、次を確認してください。

• Verdent 拡張機能をインストールした Visual Studio Code
• クレジットが利用可能な有効な Verdent サブスクリプション
• VS Code で開いたプロジェクトワークスペース（スキャフォールド用には空のディレクトリ）

新機能のリクエスト

Verdent は、特別なコマンドや構文を必要とせず、自然言語の機能リクエストを理解します。Input Box に作りたいものを説明するだけです。

基本的な機能リクエスト:

必要なものをシンプルに説明することから始めます。

Create a UserProfile component that shows the user's avatar image, name as a heading, and email below it. Make the avatar circular.

Add a login form with email and password fields to the authentication page

Build a notification system that displays toast messages for success and error events

Verdent はリクエストを分析し、プロジェクト構造を調べて、既存のパターン（ファイル構成、命名規約、インポートスタイル、コーディング慣行など）に合ったコードを生成します。

詳細な実装リクエスト:

より細かく制御したい場合は、技術要件を明示的に指定します。

Add a dark mode toggle to the settings page using React Context API. Store the theme preference in localStorage and apply CSS variables for light and dark themes across all components.

Create a POST /api/users/register endpoint that validates email format, password strength (min 8 chars, uppercase, number, special char), and checks for duplicate emails before creating the user in the database.

Implement pagination for the blog posts list with 10 posts per page. Add Previous/Next buttons and page number indicators. Update the URL query params (?page=2) and fetch data from /api/posts?page=X&limit=10.

提供するコンテキストが多いほど、実装は期待に近いものになります。

Add a search bar to the navigation

Create a footer component with copyright and links

Add a search feature to the product catalog with filtering by category and price range

@メンションでコンテキストを追加する

特定のファイルやコンポーネントに焦点を当てた機能追加をしたい場合は、それらを参照します。

@auth.js Add password reset functionality to this authentication module

@components/Dashboard.js Add a statistics widget showing user activity for the past 30 days

@ 記号にファイルパスを続けると、リクエストの実装時に特定のコードに注目するよう Verdent に伝えられます。これにより、新機能が既存の実装とシームレスに統合されます。

言語とフレームワークのサポート

Verdent は、ほぼあらゆるプログラミング言語で動作し、言語固有のプラグインを必要とせず、主要なエコシステム全体のコードセマンティクス、構文パターン、一般的なフレームワークを理解します。

function UserProfile({ user }) {
  return (
    <div className="profile">
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

<template>
  <div class="profile">
    <h1>{{ user.name }}</h1>
    <p>{{ user.email }}</p>
  </div>
</template>

<script setup>
defineProps(['user']);
</script>

@Component({
  selector: 'user-profile',
  template: `
    <div class="profile">
      <h1>{{ user.name }}</h1>
      <p>{{ user.email }}</p>
    </div>
  `
})
export class UserProfileComponent {
  @Input() user!: User;
}

Verdent は、シェルスクリプト（Bash、Zsh）、SQL、HTML/CSS、Markdown、YAML、JSON、設定言語にも対応します。

フレームワークの理解

言語を超えて、Verdent はフレームワーク固有のパターンを認識します。

あまり一般的でない言語に最適化する:

特殊なフレームワークやあまり一般的でない言語の場合、次の方法で結果を改善できます。

• 従ってほしいパターンを示すコード例を提供する
• @メンションを使って既存コードベースのスニペットを含める
• MCP（Model Context Protocol）サーバーを使って言語固有のコンテキストを注入する

複数ファイルのコード生成

Verdent は、1 回のリクエストで複数の連携したファイルを作成し、インポート、依存関係、ファイル間の参照を自動的に処理します。

例:

Create a UserDashboard component with a separate hooks file for data fetching, a styles file, a types file for TypeScript interfaces, and a test file

Verdent は次を生成します。

• components/UserDashboard/UserDashboard.tsx - メインコンポーネント
• components/UserDashboard/useUserData.ts - カスタムフック
• components/UserDashboard/UserDashboard.module.css - スタイル
• components/UserDashboard/types.ts - TypeScript インターフェース
• components/UserDashboard/UserDashboard.test.tsx - テスト

すべてのファイルには、正しいインポートとファイル間の接続が含まれます。

並列生成と逐次生成:

疎結合なファイル（独立したコンポーネント、別々のモジュール、並列のテストファイル）の場合、Verdent はサブエージェントを使って複数のファイルを並列に記述し、速度と効率を向上させます。

相互依存のある密結合なファイル（互いにインポートし合うファイル、共有型、依存し合うコンポーネント）の場合、Verdent は適切な依存関係管理と正しいインポートを保証するために逐次的に記述します。

ボイラープレートとスキャフォールドの生成

ボイラープレートコードの生成

Verdent は、プロジェクトの既存パターンを理解し、同じスタイルと構造に従う新しいコードを作成してボイラープレートを生成します。

Create a new ProductCard component with props for title, price, and image

Write an Express route handler for user registration with validation

Generate unit tests for the authentication service using Jest

Verdent はコードベースを分析して規約（命名スタイル、インポートパターン、フォルダ構造）に合わせ、汎用テンプレートではなくシームレスに統合されるボイラープレートを生成します。

プロジェクトスキャフォールド

Verdent は、完全なフォルダ階層、設定ファイル、依存関係、初期コードを含むプロジェクト構造全体をスキャフォールドします。

Create a new React application with TypeScript, React Router, Context API for state management, and Jest testing setup

Verdent は、package.json、tsconfig.json、コンポーネントディレクトリ、ルーティング設定、コンテキストプロバイダー、テストファイル、バージョン管理のセットアップ（.gitignore、初回コミット）を含む完全なプロジェクト構造を生成します。

スキャフォールドのベストプラクティス:

プロジェクトをスキャフォールドするときは Plan Mode を使ってください。Verdent は次を行います。

1. 好み（スタイリングソリューション、コンポーネント構造、テストアプローチ）について確認の質問をする
2. 完全なファイル構造とディレクトリレイアウトを含む詳細なプランを提示する
3. 作成前にスキャフォールドを確認・調整できるようにする
4. すべてのファイルが正しく作成されたか検証しながらプロジェクトを生成する

複雑なスキャフォールドでは、Verdent が独立したセットアップタスク（依存関係のインストール、設定ファイルの作成、データベーススキーマのセットアップ）を並列化するためにサブエージェントを使う場合があります。相互依存のあるファイルについては、依存関係を保持するために逐次的に記述します。

スキャフォールド後、Verdent は初期テストやビルドコマンドを実行してプロジェクト構造が正しく機能するか検証できます。

生成コードの反復改善

Verdent は、同じチャットセッション内で自然言語のフォローアップリクエストにより生成コードを改善する対話型ワークフローを使用します。

基本的な反復フロー:

1. Verdent が初期コードを生成する
2. 出力を確認する
3. フィードバックや変更リクエストを提供する
4. Verdent がフィードバックに基づいてコードを更新する
5. 満足するまで繰り返す

反復の例:

Initial: Create a login form component

Verdent が基本的なフォームを生成します。

Follow-up: Add email validation and show error messages below each field

Verdent がバリデーションを追加してコンポーネントを更新します。

Follow-up: Style it with Tailwind CSS and add a loading state for the submit button

Verdent がスタイリングを調整し、ローディング動作を追加します。

緊密なフィードバックループ:

Verdent は会話全体を通じてコンテキストを維持するため、次のことができます。

• コンテキストを繰り返さずに段階的な変更をリクエストする
• コードをテストし、問題を報告して Verdent に修正してもらう
• 実装上の選択について「なぜ」を尋ねる
• 代替案を求めて別のアプローチを試す

ベストプラクティス

関連項目