3. Windsurfの基本的な使い方

インターフェースの概要

Windsurfのインターフェースは、VS Codeをベースにしていますが、AIとの協働を可能にする独自の機能が追加されています。主な要素は以下の通りです：

  1. エディター領域：

    中央の広いスペースがコードエディター領域です。複数のファイルをタブで切り替えて編集できます。

  2. サイドバー：

    左側のサイドバーには、ファイルエクスプローラー、検索、ソース管理などのアイコンがあります。ファイルの一覧や構造を確認できます。

  3. Cascadeパネル：

    右側または下部に表示されるAIとの対話パネルです。WriteモードとChatモードの2つの主要なモードがあります。

  4. ステータスバー：

    画面下部にあり、現在の状態や情報が表示されます。AIモデルの選択や設定にアクセスできます。

  5. コマンドパレット：

    Ctrl+Shift+P（Windows/Linux）またはCmd+Shift+P（Mac）で開きます。様々なコマンドや機能に素早くアクセスできます。

Cascadeの使い方

Cascadeは、Windsurfの中核となるAI機能です。主に以下の2つのモードがあります：

Writeモード

Writeモードは、特定のファイルやコードに対して直接指示を出すためのモードです。

  1. Writeモードの開始方法：
    • エディター内で編集したいファイルを開きます
    • Cascadeパネルで「Write」タブを選択します
    • または、エディター内でCtrl+I（Windows/Linux）またはCmd+I（Mac）を押します
  2. 基本的な使い方：
    • プロンプト入力欄に指示を入力します（例：「このコードにログイン機能を追加して」）
    • Enterキーを押すか、送信ボタンをクリックします
    • AIが指示を理解し、コードの変更や追加を提案します
    • 提案された変更を確認し、「Accept」ボタンをクリックして適用するか、「Reject」で却下します
  3. 効果的な使い方：
    • 具体的な機能や変更内容を明確に指示しましょう
    • 既存のコードに対する修正や拡張を依頼する場合に最適です
    • コードの一部を選択してから指示を出すと、その部分に焦点を当てた提案が得られます

Chatモード

Chatモードは、より広範な質問や相談、プロジェクト全体に関する指示を出すためのモードです。

  1. Chatモードの開始方法：
    • Cascadeパネルで「Chat」タブを選択します
    • または、Ctrl+Shift+I（Windows/Linux）またはCmd+Shift+I（Mac）を押します
  2. 基本的な使い方：
    • チャット入力欄に質問や指示を入力します（例：「シンプルなTodoアプリを作りたい。どうすればいい？」）
    • Enterキーを押すか、送信ボタンをクリックします
    • AIが回答や提案を表示します
    • 会話を続けて、詳細を詰めていくことができます
  3. 効果的な使い方：
    • プロジェクトの計画や設計に関する相談に最適です
    • 複数のファイルにまたがる変更や新規プロジェクトの作成に使用します
    • コードの説明や学習目的の質問にも活用できます

プロンプトの書き方のコツ

Windsurfを効果的に使うためには、AIに適切な指示を出すことが重要です。以下にプロンプトを書く際のコツを紹介します：

  1. 具体的に書く：
    • 悪い例：「アプリを作って」
    • 良い例：「ユーザーがタスクを追加、編集、削除できるシンプルなTodoアプリを作成して」
  2. 目的や機能を明確にする：
    • 悪い例：「ボタンを追加して」
    • 良い例：「ユーザーがタスクを完了としてマークできるチェックボックスを追加して」
  3. 技術的な詳細を指定する（必要に応じて）：
    • 「ReactとTypeScriptを使って」
    • 「ローカルストレージにデータを保存するように」
  4. 段階的に指示を出す：
    • 一度にすべてを要求するのではなく、基本機能から始めて徐々に機能を追加していきましょう
    • 例：まずは「タスクの表示と追加機能を実装して」→次に「タスクの編集機能を追加して」
  5. フィードバックを含める：
    • AIの提案に対して「このコードは良いけど、もう少しシンプルにできる？」のようにフィードバックを返すことで、より良い結果が得られます

基本的な操作方法

Windsurfでの基本的な操作方法を紹介します：

  1. プロジェクトを開く：
    • 「File」→「Open Folder」を選択し、既存のプロジェクトフォルダを選択します
    • または、新しいフォルダを作成して開きます
  2. 新しいファイルの作成：
    • 「File」→「New File」を選択します
    • または、ファイルエクスプローラーで右クリックし、「New File」を選択します
    • AIに「新しいHTMLファイルを作成して」と指示することもできます
  3. コードの編集：
    • 通常のテキストエディターと同様に、直接コードを入力・編集できます
    • AIに「このコードを修正して」と指示することもできます
  4. ファイルの保存：
    • Ctrl+S（Windows/Linux）またはCmd+S（Mac）でファイルを保存します
    • 「File」→「Save」または「Save As」を選択することもできます
  5. ターミナルの使用：
    • 「Terminal」→「New Terminal」を選択してターミナルを開きます
    • コマンドを実行してプロジェクトのビルドやテストを行えます
    • AIに「npmパッケージをインストールするコマンドを実行して」と指示することもできます
  6. AIモデルの切り替え：
    • Cascadeパネルのドロップダウンメニューから、使用するAIモデルを選択できます
    • 無料プランでは一部のモデルに制限がある場合があります
  7. 設定のカスタマイズ：
    • 「File」→「Preferences」→「Settings」を選択して設定を変更できます
    • テーマやフォントサイズ、キーバインディングなどをカスタマイズできます

4. 初めてのアプリ開発

プロジェクトの作成

Windsurfで新しいプロジェクトを作成する方法を説明します：

  1. 新しいフォルダの作成：

    お好みの場所に新しいフォルダを作成します（例：「my-first-app」）

  2. Windsurfでフォルダを開く：

    Windsurfを起動し、「File」→「Open Folder」を選択します。作成したフォルダを選択して「開く」をクリックします。

  3. プロジェクトの初期化：

    Cascadeパネルを開き、Chatモードで以下のように指示します：「新しいWebアプリプロジェクトを初期化して。HTMLとCSSとJavaScriptを使ったシンプルな構成で良いです。」

    AIが必要なファイルを作成し、基本的な構造を設定します。

  4. プロジェクト構造の確認：

    左側のファイルエクスプローラーで、作成されたファイルを確認します。通常、index.html、style.css、script.jsなどの基本ファイルが作成されます。

プロンプトでコードを生成する

実際にプロンプトを使ってコードを生成してみましょう。ここでは、シンプルな電卓アプリを例に説明します：

  1. アプリの概要を伝える：

    Cascadeパネルで以下のように指示します：「シンプルな電卓アプリを作りたいです。足し算、引き算、掛け算、割り算の基本的な機能があれば十分です。」

  2. AIによるコード生成：

    AIが指示を理解し、必要なファイル（HTML、CSS、JavaScript）を作成または更新します。生成されたコードには、電卓のUI設計と基本的な計算機能が含まれています。

  3. コードの確認と修正：

    生成されたコードを確認し、必要に応じて修正します。例えば、「ボタンのデザインをもう少しモダンにしてほしい」と追加指示を出すことができます。

  4. 機能の追加：

    基本機能ができたら、追加機能をリクエストできます：「履歴機能を追加して、過去の計算結果を表示できるようにしてください」

UIデザインの作成

Windsurfを使ってUIデザインを作成・改善する方法を説明します：

  1. デザインの指示：

    CSSファイルを開き、Writeモードで以下のように指示します：「このCSSをモダンなデザインに更新してください。角丸のボタン、グラデーションの背景、シャドウ効果を追加してください。」

  2. レスポンシブデザインの追加：

    「スマートフォンやタブレットでも使いやすいレスポンシブデザインにしてください」と指示します。

  3. アニメーションの追加：

    「ボタンをクリックしたときの押下感を表現するアニメーションを追加してください」と指示します。

  4. カラースキームの変更：

    「カラースキームをダークモードに変更してください」や「青と白を基調としたデザインにしてください」など、具体的な色の指定もできます。

アプリのテストと実行

作成したアプリをテストして実行する方法を説明します：

  1. ローカルでの実行：
    • HTMLファイルを右クリックし、「Open with Live Server」を選択します（Live Server拡張機能がインストールされている場合）
    • または、ファイルをブラウザにドラッグ＆ドロップして開きます
  2. デバッグ：
    • アプリに問題がある場合は、Cascadeパネルで「アプリがうまく動作しません。計算結果が表示されません。デバッグしてください」のように指示します
    • AIがコードを分析し、問題点を特定して修正案を提示します
  3. 機能テスト：
    • 各機能が正しく動作するか確認します
    • 問題があれば、具体的な症状をAIに伝えて修正を依頼します
  4. パフォーマンス改善：
    • アプリの動作が遅い場合は、「コードを最適化してパフォーマンスを向上させてください」と指示できます

次のページへ続く | 前のページに戻る