# 新しいコードの記述 (/ja/docs/verdent-for-vscode/task-based-guides/writing-code) > Verdent を使って新しい機能、コンポーネント、機能を記述するためのガイド 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 ``` Verdent は、プロジェクトの既存のコードパターンに基づいて妥当な実装上の判断を行います。 複数ファイルにまたがる機能やアーキテクチャ上の判断には、**Plan Mode** を使って実行前にアプローチを確認します。 **ステップ 1:** 「Switch Mode」ボタンで Plan Mode に切り替えます **ステップ 2:** 機能リクエストを送信します。 ``` Add a search feature to the product catalog with filtering by category and price range ``` **ステップ 3:** Verdent は次の内容を示す詳細なプランを作成します。 * 作成する新しいファイル（検索コンポーネント、フィルター UI、API エンドポイント） * 変更する既存ファイル（商品カタログページ、ルーティング、状態管理） * 追加する依存関係（あれば） * 論理的な順序での実装ステップ **ステップ 4:** Verdent が確認のための質問をする場合があります。 * 検索はリアルタイムにするか、ボタンでトリガーするか * 結果が空の場合にどう扱うか * どの並べ替えオプションを含めるか **ステップ 5:** プランを確認し、次のアクションを選択します。 * **Edit** を選択してプランをさらに調整する * **Start Building** を選択して実行を開始する このアプローチにより、変更を加える前に期待と Verdent の実装が一致するようになります。 機能が複数ファイルに影響する場合やアーキテクチャ上の判断が必要な場合は、Plan Mode を使ってください。実行前に複数回プランを確認してアプローチを調整できます。 *** ## @メンションでコンテキストを追加する [#メンションでコンテキストを追加する] 特定のファイルやコンポーネントに焦点を当てた機能追加をしたい場合は、それらを参照します。 ``` @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 は、ほぼあらゆるプログラミング言語で動作し、言語固有のプラグインを必要とせず、主要なエコシステム全体のコードセマンティクス、構文パターン、一般的なフレームワークを理解します。 卓越した結果と深いフレームワーク理解を備えた言語: * **JavaScript & TypeScript** - React、Vue、Angular、Node.js、Next.js、最新の async/await パターン、コンポーネント解析 * **Python** - Django、Flask、FastAPI、Pandas、NumPy、Jupyter ノートブック、バックエンドサービス、データ分析 * **Java/Kotlin** - Spring Boot、Hibernate、Maven/Gradle エコシステム、エンタープライズ開発 ```jsx "React Component" function UserProfile({ user }) { return (

{user.name}

{user.email}

); } ``` ```vue "Vue Component" ``` ```tsx "Angular Component" @Component({ selector: 'user-profile', template: `

{{ user.name }}

{{ user.email }}

` }) export class UserProfileComponent { @Input() user!: User; } ``` 包括的なフレームワーク知識を備えた追加の言語: * **C++** - メモリ管理、パフォーマンス最適化、システムプログラミング * **Rust** - メモリ安全性パターン、所有権の概念、cargo エコシステム * **Go** - 並行処理パターン、マイクロサービス、CLI ツール * **C#** - .NET エコシステム、LINQ パターン、非同期プログラミング * **Ruby** - Rails アプリケーション、スクリプト * **PHP** - Laravel、WordPress、Web アプリケーション * **Swift/Objective-C** - iOS/macOS 開発 Verdent は、シェルスクリプト（Bash、Zsh）、SQL、HTML/CSS、Markdown、YAML、JSON、設定言語にも対応します。 #### フレームワークの理解 [#フレームワークの理解] 言語を超えて、Verdent はフレームワーク固有のパターンを認識します。 | カテゴリ | フレームワークとパターン | | ----------- | ------------------------------------------------------------------------------------- | | **フロントエンド** | React hooks、Redux、Context API、Vue Composition API、Angular の依存性注入、Next.js サーバーコンポーネント | | **バックエンド** | Express ミドルウェア、Django ORM、Spring Boot マイクロサービス、FastAPI 非同期エンドポイント、Rails Active Record | | **テスト** | Jest、Pytest、JUnit、Mocha/Chai、Cypress、React Testing Library | | **データベース** | Prisma、TypeORM、Sequelize、SQLAlchemy、Hibernate、Mongoose | 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 はファイルを並列に生成し、関連するすべての変更の一貫性を自動的に維持します。 *** ## ボイラープレートとスキャフォールドの生成 [#ボイラープレートとスキャフォールドの生成] #### ボイラープレートコードの生成 [#ボイラープレートコードの生成] 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 はコードベースを分析して規約（命名スタイル、インポートパターン、フォルダ構造）に合わせ、汎用テンプレートではなくシームレスに統合されるボイラープレートを生成します。 生成前に候補となるボイラープレートを確認するには、Plan Mode を使ってください。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 に修正してもらう * 実装上の選択について「なぜ」を尋ねる * 代替案を求めて別のアプローチを試す 大きな変更の場合は、どう修正するかではなく、何が問題か、何を違う形にしたいかを説明してください。Verdent は問題を分析し、プロジェクトのパターンに基づいて最適な解決策を提案できます。 *** ## ベストプラクティス [#ベストプラクティス] Verdent はさまざまなレベルの詳細を理解します。要件がある場合は技術的な詳細を提供し、なければ大まかな説明で Verdent にプロジェクトのパターンに基づいた的確な判断を任せます。 新機能をリクエストする前に、「データベーススキーマを分析して」や「認証フローを説明して」などの質問で Verdent にコードベースを理解させましょう。これによりコンテキストが構築され、Verdent がより良い提案をできるようになります。 実行前に詳細な実装プランを確認します。Verdent は確認の質問をし、構造化されたアプローチを作成します。プラン生成後、**Edit** を選択して調整するか、**Start Building** を選択して実行し、変更前に意図が一致していることを確認します。 既存コードと統合したい変更がある場合は、特定のファイルを参照します。これにより新機能が現在の実装に沿ったものになります。 複数ステップの機能では、段階的に作業します。まずデータベーステーブルを作成し、次に API エンドポイント、続いて UI コンポーネントというように進めます。これにより明確さが保たれ、各ステップで検証できます。 技術的な選択、デザインの好み、バリデーションルール、エラー処理戦略、その他実装に関わる要件についての詳細を含めてください。 *** ## 関連項目 [#関連項目] Verdent で既存のコードベースを探索・分析する方法を学びます AI 支援で包括的なテストを生成し、問題をデバッグします