Last Updated: 2025-04-21

Vibe Coding の世界へようこそ

本日はご参加いただき、ありがとうございます！今回のハンズオンでは、ソフトウェア開発の現場に革新をもたらすと言われる「Vibe Coding」(雰囲気コーディング) と呼ばれる新しい開発方法に取り組みます。

AI アシストツールを活用することで、開発者はコードの生成や編集、デバッグといった作業を効率化し、より創造的なタスクに集中できるようになります。Cline や Cursor のようなツールは、まるで熟練したペアプログラマーが隣にいるかのように、リアルタイムで的確な提案を行い、開発プロセスを加速させます。また、Gemini 2.5 Pro API は、高度な自然言語処理能力とコーディング能力を兼ね備えており、Cline や Cursor を通じて、様々な開発ニーズに対応することができます。

それでは、最先端のソフトウェア開発を体感してみましょう！

使用するツールの概要

本日のハンズオンでは、以下の主要なツールについて取り組みます。

• Cursor: VS Code をベースに開発された、AI ファーストのコードエディタ。AI による強力な支援を受けながら、より生産的なコーディング体験を提供
• Cline: VS Code に統合された強力な AI アシスタント拡張機能。様々な AI プロバイダーを柔軟に選択可能
• Gemini 2.5 Pro API: Google が提供する最先端の AI モデル。Cursor や Cline からこの API を呼び出すことで、様々な AI を活用したタスクを実行可能

学習目標

本ハンズオンを通じて、皆さんは以下のことができるようになります。

• Cline と Cursor を開発環境にセットアップする
• Gemini API キーを取得し、Cline に設定する。
• .clinerules の書き方や基本的なコマンドなど、Cline の基本的な使い方を理解する。
• Cursor のインターフェースを操作し、主要なAI機能を活用する。
• AIの支援を受けながら、簡単なハンズオンコーディングタスクを実行する。

まずは今回のハンズオンに必要となる開発環境の準備をしましょう。

前提条件

• Google アカウント
• Windows / macOS / Linux

Gemini API キーの取得

まず Cline をセットアップしますが、その前に Cline で Gemini を使用するために必要な Gemini API キーを取得する必要があります。まだ API キーを持っていない方は以下の手順に従って API キーを取得してください。

1. Google AI Studio にアクセスしてください。
   Get API key
2. Google アカウントでログインし、「API キーを作成」をクリックし、「新しいプロジェクトで API キーを作成」をクリックして新しい API キーを作成します
3. この API キーは、Gemini API へのアクセスを認証するために使用されます。作成した API キーは安全な場所で管理しましょう

Cline のセットアップ

1. VS Code を開きます
2. アクティビティバーの拡張機能アイコン (Ctrl+Shift+X またはCmd+Shift+X) をクリックします
3. 検索バーに「Cline」と入力し、表示された Cline 拡張機能の「インストール」ボタンをクリックします
4. インストールが完了したら、アクティビティバーに Cline のアイコンが表示されますので、クリックして Cline を開きましょう
5. 「Use your own API Key」を選択します
6. API Provider は Google Gemini
   Gemini API Key に先ほど取得した API キーを入力し、「Let's go!」deで進みます
7. [Optional] Cline の返答を日本語に設定できます。Cline の画面の右上の「⚙」から設定を開き、一番下までスクロールして「Advanced Settings」を押します。「Cline: Preferred Language」で「Japanese - 日本語」を選択します

Cursor のセットアップ

1. Cursor のウェブサイト にアクセスし、「Download」ボタンをクリックして Cursor IDE をダウンロードします。
   Download Cursor
2. ダウンロードが完了したら、インストーラーを実行して Cursor IDE をインストールします
3. Cursor IDE には、Hobby (無料)、Pro、Business の 3 つの料金プランがあります。本ハンズオンでは無料の Hobby プランを利用します。Hobby プランには、Pro プランの 2 週間のトライアル、2000 回の補完、50 回の低速リクエストが含まれます。無料プランでは、高度な機能や高速なリクエストには制限があることに注意してください。
4. Cursor IDE を初めて起動すると、キーボードショートカットの設定や VS Code の設定のインポートなどの初期設定を行うことができます。必要に応じて設定を行ってください。

これで環境構築はひとまず完了です。お疲れ様でした！

Cline は IDE 内で直接実行される自律コーディング エージェントです。実際に Cline を使ってみる前に、まずは基本的な機能について知っておきましょう。

Cline の仕組み

Cline はユーザーの指示に基づいて自律的にコーディングをできますが、実は Cline 自体に AI が搭載されているわけではない のです。codeciaoテックブログ さんの記事が非常に分かりやすいので、図を以下に引用します。

[ codeciaoテックブログ より引用 ]

Cline は AI を搭載しておらず、実際にコーディングや思考を行うのは Gemini などの外部の AI アシスタントです。この仕組みのおかげで、Gemini に限らず様々な AI ツールとの柔軟な連携が可能になります。

では、実際に使う場面を想定してみましょう。ユーザーは Cline に指示を出しますが、その文章のままではプロジェクトの構成を AI が把握することができません。そこで、Cline はユーザーと AI との中継役 となってプロジェクトのファイル構造などを 追加情報 として AI に教えます。

ただ、AI は基本的に文字ベースでしか出力ができないので、直接パソコン上のファイルを閲覧したりコマンドを実行したりすることはできません。そこで、Cline が中継役 となって代わりに コマンド実行 や ファイル内容の閲覧・編集 を行うことで、AI が人間と同じようにコーディングを行うことが可能となるのです。

2 種類の動作モード – Plan / Act

Cline には 2 種類の動作モードがあり、作業内容に応じて切り替えて使います。

[ 公式ドキュメント より引用 ]

Plan Mode

• コンテキスト収集と戦略に最適化
• コードの編集は不可
• 要件の理解と実装計画の作成に重点を置く
• ファイル読み取りが可能で、プロジェクトを包括的に理解できる

Act Mode

• Plan Mode で確立された計画に基づいて実装を合理化
• Cline の全ての機能が利用可能
• コードの編集ができる

Cline を使い始める際はまず Plan Mode に設定し、Cline とプロジェクトの概要についての理解を深めると良いでしょう。Cline との対話を通じてプロジェクトへの理解が深まると、Cline 側から Act Mode に変更するように勧められます。

詳しく知りたい方は、ぜひ 公式ドキュメント をお読みください。

.clinerules ファイル

Cline に精度良く指示をするには、プロジェクトに応じて .clinerules ファイルを適切に設定すると良いです。このファイルの内容は前提条件として Cline に渡されます。具体例を見てみましょう。

.clinerules

# プロジェクトのガイドライン

## ドキュメントの要件

-   機能修正時は、/docs 内の関連ドキュメントを更新すること
-   新しい機能に合わせて README.md を常に最新の状態に保つこと
-   CHANGELOG.md に変更履歴を記録すること

## アーキテクチャ決定記録 (ADR)

以下の場合は、/docs/adr に ADR を作成すること

-   主要な依存関係の変更
-   アーキテクチャパターンの変更
-   新しい連携パターンの導入
-   データベーススキーマの変更
    /docs/adr/template.md のテンプレートに従うこと

## コーディングスタイルとパターン

-   API クライアントは OpenAPI Generator を使用して生成すること
-   TypeScript axios テンプレートを使用すること
-   生成されたコードは /src/generated に配置すること
-   継承よりもコンポジションを優先すること
-   データアクセスにはリポジトリパターンを使用すること
-   /src/utils/errors.ts に定義されたエラーハンドリングパターンに従うこと

## テストの基準

-   ビジネスロジックには単体テストが必須
-   API エンドポイントには結合テストが必須
-   重要なユーザーフローには E2E テストが必須

[ 公式ドキュメント を翻訳 ]

かなりプロジェクトに応じた内容を細かく記載していることが分かると思います。細かく指示を出すことで、既存のプロジェクトやガイドラインに上手く統合することができます。

もっと詳しく知りたい方は、ぜひ 公式ドキュメント を読んでみてください。

それでは、いよいよ Cline を使ってみましょう！

1. VS Code で任意の新規フォルダを開いてください。ここが Cline の作業フォルダとなります
2. AI のモデルを選択しましょう。Cline の設定「⚙」を開き、「Model」を選択します
   gemini-2.0-flash-*: Gemini の最新の安定版のうち、高速な返答が得られるモデル。無料枠が大きい
   gemini-2.0-flash-thinking-exp-*: Gemini 2.0 Flash に「思考プロセス」が加わる。無料枠が大きい
   gemini-2.5-pro-exp-*: 現在利用できる最高の Gemini。無料枠が少ないので、実行速度が遅くなる
3. Plan Mode に設定 して、何か指示を出してみましょう。
   例：TypeScript を使って、電卓 Web アプリを作ってください。
4. Cline から返答が返ってきます。作成したいプロダクトの詳細を聞かれると思うので、Cline と一緒に内容を深めていきましょう。
   電卓アプリの例では「どのような技術スタックを採用するか」「どのような機能を実装するか」「デザインはどうするか」といったことを Cline から聞かれると思います。
5. 内容が煮詰まったら、いよいよコード生成に移ります。Act Mode に切り替えてみましょう
6. 実行の最初の方では、環境構築のためにいくつかコマンドの実行を依頼されると思うので、実行してあげてください。
   コードの生成に映ると自動で画面が動き、ものすごいスピードでコードが生成されているのがわかると思います。
7. 完成して Web サーバーを立てる段階になると、サーバーを立てるコマンドが実行されます。このコマンドはサーバーを閉じるまで終了しないので「Proceed While Running」ボタンを押して、コマンドを裏で動かしつつ先に進みましょう。
8. 完了したら緑色の文字で「Task Completed」と表示されると思います。成果物を見てみましょう！
   

アプリはできましたか？次の Step に進むまで、Cline とともにアプリを修正・改善してみましょう！

Cursorの概要説明

Cursorは、AIを利用してコード補完・生成を行うコードエディタです。

VSCodeをベースに開発されており、Visual Studio Codeの機能に追加する形で、自然言語プロンプトによるコード生成・編集、マルチライン補完、コードベース全体へのクエリ、そして"Chat"、"Agent"という2種類のAIモードを提供します。

Privacyモードも搭載しており、ユーザのコードをリモートに一切保存しないことも可能です。

他のAIエディタとの区別点

・CursorはVisual Studio Codeをフォークした独立アプリケーションとして提供される

・Composer機能により、自然言語で指示した内容をそのままファイル編集としてインライン適用可能

・Cursorはプロジェクト全体をインデックス化し、自然言語で「このAPIを呼び出している箇所を教えて」といったクエリが可能

主なモード

・自然言語によるコード編集（Chat／Composerモード）

自然言語プロンプトをそのままエディタのサイドパネルに入力し、小規模な修正から複数ファイルにまたがる変更までをインラインで実行できます。

・マルチライン補完（Tab機能）

単一行ではなく、直近の編集履歴や周辺コンテキストを踏まえた複数行にわたるコード補完候補をTabキーだけで表示することができます。

・エンドツーエンド自動化（Agentモード）

AIがコードベース全体を横断してタスクを"計画→実行"します。

新規ファイルの作成や既存コードのリファクタリング、ターミナルコマンドの実行までを連携しながら自律的に完遂することが出来ます。

・スマートリライト＆大規模リファクタリング(Ctrl K)

自分で選択した範囲を対象に、どのように変更したいかを記述すれば自動で最適化・整形・構造変更を行うことが出来ます。

Rules

Cursorには、clineと同様に、AIの振る舞いをプロジェクトや個人の好みによって制御したり、精度を上昇させるカスタムルールを設定することが出来ます。また、このルールは、全プロジェクトに適用するUser Rulesと、プロジェクトごとに設定できるProject Rulesがあります。

設定方法は、左上のFile > Preferences > Cursor Settings > Rulesです。

User Rulesは、テキストで書くことが出来ます。

以下の例では、User Rulesに"Always respond in Japanese"と記載しています。

Project Rulesは、テキストに加えファイルのシンボルが使用できます。

また、以下の４つのパターンがあり、ルールが発動するタイミングを制御できます。

Project Rulesを追加するには、 "+Add new rule"を選択し、ruleの名前を入力することで出来ます。

以下の例では、"demo-rules"という名前のruleが追加しています。

これらの手順を実行すると、.mdc 形式のファイルとして記録されます。

以下は特定のファイルに言及されたとき自動適用されるAuto Attachedのルールです。

---
description: "API層用バリデーションルール"
globs:
  - "src/api/**/*.ts"
alwaysApply: false
---

- すべてのエンドポイント関数に入力チェックを実装する
- `zod` ライブラリを使用し、スキーマ定義を行う

実際には、このようなRulesが使われています。

こちらはCursorチームメンバーの @shaoruu さんが共有したルール設定です。

DO NOT GIVE ME HIGH LEVEL SHIT, IF I ASK FOR FIX OR EXPLANATION, I WANT ACTUAL CODE OR EXPLANATION!!! I DON'T WANT "Here's how you can blablabla"

- Be casual unless otherwise specified

- Be terse

- Suggest solutions that I didn't think about—anticipate my needs

- Treat me as an expert

- Be accurate and thorough

- Give the answer immediately. Provide detailed explanations and restate my query in your own words if necessary after giving the answer

- Value good arguments over authorities, the source is irrelevant

- Consider new technologies and contrarian ideas, not just the conventional wisdom

- You may use high levels of speculation or prediction, just flag it for me

- No moral lectures

- Discuss safety only when it's crucial and non-obvious

- If your content policy is an issue, provide the closest acceptable response and explain the content policy issue afterward

- Cite sources whenever possible at the end, not inline

- No need to mention your knowledge cutoff

- No need to disclose you're an AI

- Please respect my prettier preferences when you provide code.

- Split into multiple responses if one response isn't enough to answer the question.

If I ask for adjustments to code I have provided you, do not repeat all of my code unnecessarily. Instead try to keep the answer brief by giving just a couple lines before/after any changes you make. Multiple code blocks are ok.

以下は和訳です。

象的な説明はいらない。修正や説明を求めた場合は、具体的なコードや説明が欲しい。「〜のようにできます」という説明は不要。

- 特に指定がない限りカジュアルに接して

- 簡潔に

- 思いつかなかった解決策も提案して—ニーズを予測して

- 専門家として扱って

- 正確かつ徹底的に

- すぐに答えを出して。必要な場合は、答えを出した後で詳細な説明や質問の言い換えを提供して

- 権威よりも良い議論を重視し、情報源は重要視しない

- 従来の常識だけでなく、新しい技術や反対意見も考慮して

- 高度な推測や予測を使用してもよい、ただしその旨を明示して

- 道徳的な説教はしないで

- 安全性については、重要で自明でない場合のみ議論して

- コンテンツポリシーに問題がある場合は、許容される最も近い回答を提供し、その後でポリシーの問題を説明して

- 可能な限り出典を示すが、それは最後にまとめて行い、文中には入れない

- 知識の期限について言及する必要なし

- AIであることを明かす必要なし

- コードを提供する際は、私のprettier設定を尊重して

- 一つの回答で足りない場合は、複数の回答に分割して

コードの調整を依頼した場合、不必要にすべてのコードを繰り返さないでください。代わりに、変更箇所の前後数行だけを示して簡潔な回答を心がけてください。複数のコードブロックの使用は問題ありません。

[tichise(Ichise Takuya)さんのブログより引用]

ここからは実際にCursorを使ってみましょう。

今回はCursorを用いて、簡単なWebページをつくってみましょう。

1. まずCursor Rulesを設定してみましょう。

左上のFile > Preferences > Cursor Settings > Rulesを選択し、"Always respond in Japanese"と書いてください。

2. つぎに、実際にcursorを使ってwebページを作っていきます。

3. まずctrl + I でComposer サイドパネルを表示します。

chat送信欄の左下にAgentと表示されていると思います。
これを選択すると、Agent, Ask, Manualの3つのモードが表示されます。

これらは、どうやってAIがコードを変更するかを表しています。

Agent : ファイルの作成・編集・ターミナルコマンドの実行など、AIが自動で実行

Ask : AIの回答を確認したうえで、手動の「Apply」操作により変更を適用

Manual : カーソル位置や選択したコード範囲のみをコンテキストに、ピンポイントの編集を実行

今回は "Agent" を選択してみましょう。

また、上の写真では、Agentを選択するボタンの右には、"Auto"と表示されていることがわかります。これを選択すると、使用するAIのモデルを選択することができます。

今回は、"Auto" を選択してください。

4. chatで、"webページを作りたい"と送信してみてください。

自動でコードを作成してくれると思います。

5. エクスプローラーからindex.htmlを選択し、ブラウザで表示してみましょう。

シンプルなwebページが作成されていると思います。

6. まだ機能としては、表示するだけですので、ご自身で様々な機能を追加してみましょう！

Hayate Kojima

Vibe Coding のイメージは掴めてきましたか？ここからは，これまでに構築した環境を使って，本格的なアプリを爆速で作ってみましょう．

作るアプリは皆さんがご自身で決定していただいて大丈夫ですが，本資料では，「読んだ漫画の記録アプリ」を作っていきます．

・完成品の例 (実際にvscode + clineで作成したもの)

clineハンズオン.mp4

それでは早速作っていきましょう！

Vibe Codingでは，プロンプトエンジニアリング (注：AIモデルが望ましい出力を生成するように、指示や質問（プロンプト）を設計、最適化すること)が大事になってきます．

そのため，まずは自分がどんなアプリを作っていきたいかを言語化してみましょう．

プログラミング初心者の方はぜひclineのplanモードを使って良い構成を考えてみてください．

エージェントに対して最低限必要な情報は以下の通りです．

要件 (最低限)

・動作環境

PCのブラウザ

・使用するプログラミング言語

Python + Streamlit

・機能

漫画を登録できる

登録した漫画のリストを表示できる

このままでも所望のアプリを作ってくれるかもしれませんが，より細かい情報を付与することで成功率が高まります．

特に，機能部分に関しては詳細を書く/書かないで初期段階の完成度に差が出ます．

例えば以下のような要件が考えられます

要件 (詳細)

・動作環境

PCのブラウザ

・使用するプログラミング言語

Python + Streamlit

・機能

登録機能

① 検索欄に入力したタイトルから，外部のAPIを用いて選択可能な書籍のリストを表示

② 検索結果をユーザーに選択してもらい，その書籍の作者・タイトル・表紙を表示

③ ステータス (読了・未読・積読)および評価をユーザーに入力してもらう

④ 登録ボタンが押されたらデータをデータベースに保存

閲覧機能

過去に登録したデータを閲覧可能．

記録の削除，編集が可能．

評価の値によってデータを並び替え．

要件決定のコツ

使用するプログラミング言語についての知識が少ない/環境に対しての知識が少ない場合には，簡単なアプリから作成するのがおすすめです．

上の例で言えば，検索機能を除いたアプリの制作が完了してから，検索機能を追加する，などが考えられます．

要件 (簡易版)

・動作環境

PCのブラウザ

・使用するプログラミング言語

Python + Streamlit

・機能

登録機能

① ユーザーにタイトル，書籍の作者，ステータス (読了・未読・積読)および評価を入力してもらう

② 登録ボタンが押されたらデータをデータベースに保存

閲覧機能

過去に登録したデータを閲覧可能．

記録の削除，編集が可能．

評価の値によってデータを並び替え．

次に，上で考えた構成を使ってclineにコーディングを依頼していきます．

といっても，特に人間がやることはなく，ただコーディングを眺める対話を繰り返しながら共創していくだけです．

Clineがコーディングを完了したら，作成したアプリを触って動作を確認していきましょう！

AIコーディングの特性上，ここからのフローチャートは異なると思うので，自分に合うもののみ読んでください．

自分が思った通りの完璧なアプリが作成できた時

素晴らしいです．

あなたの設計のクオリティの高さとエージェントの使いこなしの賜物だと思います．

自分が理解できていないコードにコメントを書いてもらう・公開のためのドキュメントを準備してもらうなどをやっていくのが良いと思います．

アプリ自体は正しく動作しているが機能を追加したいとき

追加する機能をさらにエージェントに依頼できます．

依頼する際には設計段階と同じように，なるべく詳しく依頼することが求められます．

例)

記録一覧の機能に日付によるソート機能を追加したいです．

登録時に「読了日」として日付の入力を求めてください．

ソートの機能は，日付が入力されていない場合の処理も書いてください．

アプリ自体は正しく動作していない時

Webページ上に赤い枠でエラーが表示される場合など，ソフトウェアが正しく動いていない場合があります．

その場合には，エラーの修正をエージェントに依頼することができます．

修正の際も，なるべく詳しくエラーの状況を執筆することが求められます．

例)

検索結果から書籍を選択した後，登録ボタンを押下すると「File not found」というエラーが表示される．

例)

検索クエリを検索欄に入力しても本の候補が表示されない．(エラーは出ていないが期待の動作をしていない)

ハンズオンまとめ

人によってアプリの完成度はまちまちかと思いますが，一旦終了となります．

初めて使う言語/フレームワークでも簡単にアプリ制作が可能になることが分かったのではないでしょうか？

Clineをはじめとしたツールを利用することで，簡単に・短時間でアプリ開発ができるようになります．

今回のハンズオンに留まらず，授業・インターンなど様々な場所で使ってみてください！

(注：企業等ではAIエージェントの利用規約が定められている場合があるのでお気をつけください)

これで本ハンズオンは終了です。お疲れ様でした！そして最後までご参加いただき、ありがとうございます！

今回のハンズオンでは、Cline や Cursor、そして Gemini API を使って、話題の開発手法「Vibe Coding」を皆さんに体験していただきました。これからの製品開発や AI の未知なる可能性の一端を体感していただけたのではないでしょうか。

今回扱った機能は、Cline や Cursor のごく一部の機能です。AI アシストコーディングの世界には、「MCP サーバー」や「ブラウザ自動化」など、現場に合わせて高度にカスタマイズをできる機能が存在します。
これからのプログラマーには、単にコードを書く能力だけでなく、AI を上手に使う能力も求められてきます。今日うまくいった方もうまくいかなかった方も、ぜひこれからも AI アシストコーディングについて探求してみてください！