Cursor

Author: ma91n

source/_posts/20250413a_春の入門祭り2025.md

@@ -45,10 +45,10 @@ lede: "春の入門連載は2020年から始めた連載で、以下のテーマ
 | 4/21（月） | 市川裕也    | [Google Calendar の予定を取得するMCP サーバを作ってみた](/articles/20250421a/)                             |
 | 4/22（火） | 柴田健太    | [初めてのStreamlit](/articles/20250422a/)                                                                                                        |
 | 4/23（水） | 金森翼      | [チームを異動で環境が変わった後の立ち上がりについて](/articles/20250423a/)                                                                       |
-| 4/24（木） | 小橋昌明    | AI駆動開発入門                                                                                                           |
+| 4/24（木） | SKIP       |     4/28に入れ替え                                                                                                       |
 | 4/25（金） | 清水雄一郎  | [VS CodeによるSwift開発](/articles/20250425a/)                                     |
 | 🦋 |  |  |
-| 4/28（月） | SKIP        | GW（ゴールディンウィーク）                                                                                                           |
+| 4/28（月） | 小橋昌明    | [AI駆動開発入門](/articles/20250428a/)                                                                                                          |
 | 4/29（火） | SKIP        | GW（ゴールディンウィーク）、昭和の日                                                                                                                 |
 | 4/30（水） | SKIP        | GW（ゴールディンウィーク）                                                                                                           |
 | 5/1 （木） | SKIP        | GW（ゴールディンウィーク）                                                                                                           |

source/_posts/20250428a_CursorによるAI駆動開発入門.md

@@ -0,0 +1,172 @@
+---
+title: "CursorによるAI駆動開発入門"
+date: 2025/04/28 00:00:00
+postid: a
+tag:
+  - 入門
+  - 生成AI
+  - LLM
+  - cursor
+  - VibeCoding
+category:
+  - Programming
+thumbnail: /images/20250428a/thumbnail.gif
+author: 小橋昌明
+lede: "生成AIを使った開発手法の進化は目を見張るものがあります。私自身は業務でAI駆動開発をすることは無いのですが、CursorやClineなどのニュースを見ない日はありません。"
+---
+
+本記事は、[春の入門祭り2025](/articles/20250413a/)の10本目です。
+
+## はじめに
+
+SAIG（Strategic AI Group）の小橋です。生成AI関連の検証や、データ分析の業務を担当しています。
+
+生成AIを使った開発手法の進化は目を見張るものがあります。私自身は業務でAI駆動開発をすることは無いのですが、CursorやClineなどのニュースを見ない日はありません。
+
+[Technology Radar の記事](/articles/20230523a/)を2年前に書いたことを思い出したので、読み返してみました。このときは、GitHub Copilotが出始めたくらいでした。しかし[最新版（2025年4月）のTechnology Radar](https://www.thoughtworks.com/content/dam/thoughtworks/documents/radar/2025/04/tr_technology_radar_vol_32_en.pdf)では、Cursor, Cline, Windsurfが登場しています。2年間で様子が随分変わったなと驚かされます。
+
+そんな中で、ある勉強会でこの本を知ったので、いい機会と思い読んでみました。
+
+- [AI駆動開発完全入門 ソフトウェア開発を自動化するLLMツールの操り方](https://www.amazon.co.jp/dp/4295020834)
+
+...が、本そのものについての紹介はあまりしません。試しに簡単なゲームアプリを自作した感想を書いてみます。
+
+この本の中では、3つのアプリケーションを作っています。最初にオセロ、次に2048[^1]、最後に音楽配信のアプリになります。
+
+ただ、単に本の通りにアプリを作成していってもブログ記事として物足りないので、オセロと2048を完了したところで別のゲームを自力で作ってみることにしました。今回はゲームを作った際の感想を書きます。
+
+[^1]: 「2048」は、4×4のマス目の上で、数字が書かれたブロックを上下左右に移動させて、同じ数字のブロックを重ねることで数字を増やしていくゲームです。
+
+## 作成したアプリケーション：タイピングゲーム
+
+上から落ちてくる単語をタイピングしていくゲームです。見たほうが早いと思うので、以下のスクリーンショットをご覧ください。
+
+<img src="/images/20250428a/game_movie_3.gif" alt="game_movie_3.gif" width="700" height="616" loading="lazy">
+
+アプリを作る手順については、最近見かけたこの記事を参考にしました。
+
+[個人的 Vibe Coding のやりかた](https://zenn.dev/yoshiko/articles/my-vibe-coding)
+
+この記事にある通り要件定義と技術選定を進めていきます。
+
+## 要件定義
+
+私は作るゲームを完全には決めていなかったので、ChatGPT（4o-mini-high）に相談することにしました。
+
+いくつか条件を投げて候補を出してもらい、その中からタイピングゲームを選択しました。
+
+次に要件定義ですが、私が考える間でもなくChatGPTがノリノリで仮案を出してくれました。その通りで良ければそのまま採用すればよいですし、違っていれば修正案を私から提示します。
+
+一通り決めたところで、
+
+> 今まで話した内容を、要件定義.md にまとめて下さい。
+
+と打って、要件をまとめます。「これだけで上手くいくのだろうか?」と思っていたのですが、しっかりmarkdownで要件を出力してくれました。ファイルは以下のようになります。
+
+```markdown
+# 要件定義
+
+以下は、タイピング・ディフェンスゲームアプリケーションの要件定義です。
+
+## 1. 基本ゲームルール
+
+- **単語落下タイミング**：インターバル型（1.5秒ごとに次の単語が自動的に落下開始）
+- **落下速度**：
+  - 初期：480px を 3秒 で移動
+  - レベルアップ（後述）ごとに速度を 10% 上昇
+- **ライフ（ミス許容回数）**：
+  - 初期ライフ：3
+  - ミス（単語を最後までタイプできず地面到達）でライフ -1
+- **ゲームオーバー**：ライフが 0 になると終了
+- **クリア条件**：なし（ライフが続く限り永遠に続く）
+
+（後略）
+```
+
+## 技術選定
+
+参考にしていた本に倣って、TypeScript + Svelte + Bun で開発します。ChatGPTがCanvas APIを提案してきたので、それを追加で採用しました。
+
+一通り技術を決めたら、同様に`技術選定.md`に出力してもらいます。
+
+DBは今回使っていない（ハイスコアはlocalStorageに保存）ので、DB設計は飛ばして次に進みます。
+
+## コーディング：失敗その1
+
+[個人的 Vibe Coding のやりかた](https://zenn.dev/yoshiko/articles/my-vibe-coding)の中では Claude Code を使っているのですが、新しいツールに手を出すと混乱しそうだったので、Cursorで進めようとしました。
+
+これはおそらく良くなかったです。コードが収拾のつかない状態になってしまったので、泣く泣く振り出しに戻しました。
+
+Cursorのチャットからコードを変更する際は、[Agent, Ask, Manual の3つのモード](https://docs.cursor.com/chat/overview)のどれかを選びます。このうち、ソースコード全体にわたる変更をする際には Agentモードを選ぶ必要があります。そこでAgentモードを指定してコードを生成しました。
+
+カレントディレクトリの下にアプリを作るつもりでしたが、1階層下の `typing-defense-game` ディレクトリの下にアプリのファイルがどんどん生成されてしまいました。`技術選定.md` にはセットアップ手順も書かれていたのですが、確認してみるとその中で `typing-defense-game` ディレクトリを指定していました。おそらくこれが原因でしょう。この差分に気づかないままcursorに進めてもらったら、プロジェクトのディレクトリ構成が崩れてしまいました。
+
+収拾がつかなくなったので、 `要件定義.md` と `技術選定.md` を残して、一旦生成されたファイルを全部削除しました。sveltekitの公式サイトを見に行き、[新規プロジェクト作成時の手順](https://svelte.jp/docs/kit/creating-a-project)に従って、`npx sv create` と打ったら、基本的なファイル構成ができました。多分、最低限のHello Worldを出力するだけの構成くらいは作っておいてからcursorに引き渡すのが良いのでしょう。また、最低限の枠組みを理解できるくらいの基本的な力は持っていたほうが、根本的なところで躓いて苦しまずに済むなと感じました。
+
+## コーディング：失敗その2
+
+正しいディレクトリ構成上に一通りコードを生成できたので、実際にlocalhost上で動かしてみましたが、いくつかバグがありました。
+
+バグ内容を伝えると一部は修正してくれたのですが、そこでつまづきました。STARTボタンを押してもゲーム画面に遷移しないというバグがありました。cursorに聞いてみてもデバッグログの出力コードを追加するばかりで、解決しそうにありませんでした。
+
+生成の指示をして待っていればゲームが完成するという生易しいものでは無さそうだ、と気づいたので、ネットの情報を見ながら生成モデルを変更することにしました。
+
+Cursorの初期設定ではModel選択が「Auto」になっています。Cursor上では...
+
+> Cursor helps youselect the best premium model, based on performance and speed
+
+...と説明があります。
+し
+かし、この時に内部的にどのモデルが使われたのかは分かりません。
+
+[How to see which model Auto option uses in Cursor 0.47?](https://forum.cursor.com/t/how-to-see-which-model-auto-option-uses-in-cursor-0-47/62414) を参考にしつつ、設定のUser Rulesに「使用しているAIモデルの名前を最初に出力せよ」という旨の指示を追加しました。[^2]
+
+[^2]: でもclaude-3.7を指定しても「claude-3.5です」という出力になることがあった。どうしてだろう?
+
+ただ使用モデルが知らないうちに切り替わるのは困るので、Auto設定をやめてclaude-3.5-sonnetを指定しました。すると正しい解決策を提示してくれたので動くようになりました。
+
+一応バグの原因を書いておくと、canvas(HTMLCanvasElement)の初期化のタイミングが期待通りでなかったことが原因でした。Svelte では変数を更新してもDOMの更新が即時に行われるわけではないので、直後にcanvasの初期化をしようとすると存在しないcanvasに対する操作となってエラーになります。DOMの更新を待つために `await tick()` を使うとバグは直りました。Svelteは触ったことがなかったので、独力では解決できなかったでしょう。
+
+## コーディング：成功と機能追加
+
+上記のバグを修正すると、基本的なゲームは動くようになりました。あとは局所的な改善や機能追加になるので、変更範囲は限定的であり、スムーズに進められました。プレイしながらいくつか気付いた点を修正していきました。
+
+- 下端の線を赤色の太線にする
+- 間違えたキーを押したときに背景色を一瞬変えてミスを示す
+- ライフを示すハートマークの表示を変更する
+
+## 余談：文章を書く際にCursorを活用する
+
+ここまではコーディングにCursorを活用していましたが、文章を書く際にもCursorは活用できます。
+
+エンジニアではなくライターが文章作成にCursorを使う記事もネットにいくつか出てきて注目を集めています。
+
+- [いま文章を書くのに「CURSOR」を使わないのは損だ](https://ascii.jp/elem/000/004/253/4253872/)
+- [文章術としてのCursor入門](https://ascii.jp/elem/000/004/256/4256350/)
+
+この記事自体を書く際にもCursorを使って書いています。といってもタブ補完機能を使っているだけです。
+
+タブ補完機能は、他のコード生成やChat機能とは別にカウントがあり、無料プランでは最大2000回、Proプランでは無制限に使用可能のようです。
+
+> Free users receive 2000 suggestions at no cost. Pro and Business plans receive unlimited suggestions.
+> https://docs.cursor.com/tab/overview
+
+タブ補完の詳しいモデルや仕組みは分かっていないのですが、コンテキストをもとに文章を生成しているようです。例えば、ここまでブログを書いてきた段階で
+
+> 私の名前は
+
+と打つと..
+
+> 私の名前は小橋です。
+
+...という補完が提案されます。どうやら文章全体を考慮した上で補完を提案しているようです。
+
+## おわりに
+
+Cursorを使って簡単なゲームを作ってみました。
+
+今回はまだ2週間の無料期間中でしたが、Proプランを使い続けると料金が月額20ドルかかります。
+
+個人用途で使い続けるなら、料金に見合うだけのアプリを作らないといかんなぁと思うので、何を作ったら良いかChatGPTに相談してみようと思います。
+
+それでは。