正直に言うと、Cursorを初めて使ったとき、「これ、コーディングの概念変わるな」って思いました。AIがコードを書いてくれるツールって色々あるんですけど、Cursorは別格です。GitHub Copilotとか使ってた人でも、Cursorに乗り換えるケースが多いんですよね。
この記事は、「Cursorって何？」って人から「使ってみたいけど、どう始めればいいかわからない」って人まで、ゼロから始められるガイドです。連載の第1回目として、今回は環境構築から最初のプロジェクトまでを解説します。
Cursorとは？なぜ今これほど人気なのか
Cursorは、AI統合開発環境（IDE）です。簡単に言えば、VSCodeにAIアシスタントをガッツリ組み込んだような感じ。でも単なる「VSCode + AI」じゃないんですよね。
GitHub Copilotとの違い
「GitHub Copilotと何が違うの？」ってよく聞かれます。使ってみるとわかるんですけど、アプローチが全然違うんです。
GitHub Copilotは「コード補完の延長」って感じ。カーソルの位置から次に書きそうなコードを予測して提案してくれる。便利ですけど、基本的には「あなたが書く」のを助けるツール。
Cursorは「AIとペアプログラミング」に近い。チャットで「ログイン機能作って」って頼むと、必要なファイル全部作ってくれる。コードの一部じゃなくて、機能丸ごと。この違い、使ってみると本当に大きいです。
Cursorの主要機能
Cursorには、いくつか特徴的な機能があります：
1. Cursor Chat
これがメイン機能。自然言語で「こういう機能を作りたい」って伝えると、AIがコードを生成してくれます。しかもプロジェクト全体のコンテキストを理解してる。既存のコードとの整合性も保ってくれるんです。
2. Cmd+K（Ctrl+K）での直接編集
コードを選択して Cmd+K を押すと、その部分に対する指示を出せます。「このエラーを修正して」「この関数を最適化して」みたいな感じ。選択した部分だけピンポイントで編集できるのが便利。
3. Composer（複数ファイル編集）
これが強力で、複数のファイルにまたがる変更を一度に指示できます。「ログイン機能を追加して、それにフロントエンドとバックエンドとデータベーススキーマも必要だから全部作って」って言うと、全部やってくれる。
4. Codebase Indexing
プロジェクト全体をインデックス化して、AIがコードベース全体を理解します。だから「既存の認証システムと統合して」みたいな指示も通じる。これ、大規模プロジェクトで特に役立ちます。
Cursorのインストールと初期設定
では実際にインストールしていきましょう。思ったより簡単です。
ステップ1：Cursorのダウンロード
公式サイト（https://cursor.sh）からダウンロードします。Windows、Mac、Linuxの全プラットフォームに対応してます。
サイズは200MBくらい。インストーラーをダウンロードして実行するだけです。Macなら.dmgファイルをダウンロードして、アプリケーションフォルダにドラッグ。Windowsなら.exeを実行。
ステップ2：初回起動とセットアップ
初めて起動すると、ウェルカム画面が出ます。ここでいくつか設定を聞かれます：
テーマの選択
Dark（暗い）かLight（明るい）か。個人的にはDarkがおすすめ。長時間コーディングするなら目に優しいです。
VSCode設定のインポート
既にVSCodeを使ってる人は、設定やキーバインド、拡張機能を引き継げます。これめちゃくちゃ便利。新しく覚え直す必要がない。
アカウント作成
GitHubアカウントかGoogleアカウントで登録できます。無料プランでも結構使えますけど、本気で使うなら有料プランがおすすめ。後で詳しく説明します。
ステップ3：AIモデルの選択
Cursorは複数のAIモデルに対応してます。設定から選べます：
- GPT-4：OpenAIの最新モデル。コード生成の品質が高い
- GPT-4 Turbo：GPT-4より速くて安い。日常的な開発はこれで十分
- Claude 3.5 Sonnet：Anthropicのモデル。コンテキスト理解が優秀で、大規模なコードベースに強い
- GPT-3.5：無料プランで使える。シンプルなタスクならこれでOK
正直、最初はGPT-4かClaude 3.5 Sonnetを試してみるのがいいです。後から変更もできるので、色々試してみましょう。
ステップ4：APIキーの設定（オプション）
Cursorの有料プランを使う場合は不要ですけど、自分のAPIキーを使うこともできます。
設定（Settings）→ AI Models → Custom API Keys から設定します。OpenAIとかAnthropicのAPIキーを持ってれば、そっちを使えます。コストをコントロールしたい人には便利。
最初のプロジェクト：To-Doアプリを作ってみる
環境が整ったので、実際にコードを書いてみましょう。定番のTo-Doアプリを作ります。
プロジェクトの作成
まず新しいフォルダを作ります。File → Open Folder から、適当な場所に「todo-app」って名前のフォルダを作って開きましょう。
Cursorは、このフォルダ全体をプロジェクトとして認識します。コンテキストも、このフォルダ内のファイルを基準に理解してくれます。
Cursor Chatで指示を出す
右側のサイドバーに「Chat」っていうアイコンがあります。クリックするか、Cmd+L（Ctrl+L）でチャットを開きます。
ここに、こんな感じで指示を出してみましょう：
シンプルなTo-Doアプリを作りたいです。
要件：
- タスクの追加、完了、削除ができる
- HTMLとJavaScript（バニラJS）で実装
- CSSでシンプルなスタイリング
- ローカルストレージでデータを保存
まずはindex.html、style.css、script.jsの3ファイルを作成してください。こう書くと、Cursorが考えて、コードを生成してくれます。しばらく待つと（10〜20秒くらい）、提案されたコードが表示されます。
気に入ったら「Apply」ボタンをクリック。すると実際にファイルが作成されます。これだけ。本当にこれだけでアプリの骨組みができるんです。
生成されたコードを確認
生成されたコードを見てみましょう。私がやったときは、こんな感じになりました：
index.html
基本的なHTML構造。入力フォームとタスクリスト、ボタンなんかが入ってます。セマンティックHTMLで書かれてて、アクセシビリティも考慮されてる。
style.css
モダンなスタイリング。Flexboxでレイアウト組んで、ホバーエフェクトなんかもついてます。色使いもそれなりにセンスある。
script.js
タスクの追加、削除、完了の処理。ローカルストレージへの保存も実装されてる。イベントリスナーもちゃんと設定されてます。
驚くのは、これが全部動くコードだってこと。index.htmlをブラウザで開けば、すぐに使えるTo-Doアプリが出来上がってます。
機能の追加：編集機能を実装
基本は出来たので、もう少し機能を追加してみましょう。再びCursor Chatで：
タスクの編集機能を追加してください。
各タスクに「編集」ボタンを追加して、クリックするとテキストを編集できるようにしてください。すると、既存のコードを理解した上で、必要な変更を提案してくれます。HTMLにボタンを追加して、JavaScriptに編集ロジックを追加する。全部自動です。
この「既存コードとの整合性を保ちながら機能追加してくれる」っていうのが、Cursorの真骨頂なんですよね。
Cmd+K（Ctrl+K）での部分編集
チャットだけじゃなく、Cmd+Kを使った編集も便利です。実際にやってみましょう。
CSSのスタイルを変更
style.cssを開いて、例えば背景色の部分を選択します。そしてCmd+Kを押すと、小さな入力欄が出てきます。
ダークテーマに変更して。背景を暗く、テキストを明るくして。って入力すると、選択した部分だけを修正してくれます。全体のスタイルは保ったまま、色だけ変わる。こういう細かい調整がサクサクできるんです。
関数のリファクタリング
script.jsで、ちょっと長くなってる関数を選択して：
この関数をより読みやすくリファクタリングして。
複雑な部分は別の関数に分割してください。すると、ロジックは変えずに、コードをきれいに整理してくれます。変数名も適切なものに変えてくれたりする。これ、コードレビューで指摘されそうなポイントを先回りして直してくれる感じです。
Composerで複数ファイルを同時編集
さらに高度な機能がComposerです。Cmd+I（Ctrl+I）で開けます。
認証機能の追加
例えば、To-Doアプリにユーザー認証を追加したいとします。これ、複数のファイルにまたがる大きな変更ですよね。
ユーザー認証機能を追加してください。
要件：
- ログインページを作成（login.html）
- ユーザー情報はローカルストレージに保存
- ログインしないとTo-Doリストにアクセスできないように
- ログアウト機能も実装
必要なファイルを全て作成・編集してください。Composerに入力すると、必要なファイルを全部作ってくれます。login.html、auth.js、既存のscript.jsの修正、index.htmlへのログアウトボタン追加、全部一度に。
しかも、変更内容をプレビューできるんです。どのファイルがどう変わるか確認してから適用できる。これ安心感ありますよね。間違った変更がされる前にチェックできるから。
実際に使ってみて感じたコツ
ここまで基本的な使い方を説明しましたけど、実際に使ってみて気づいたコツをいくつか共有しますね。
1. 具体的に指示する
「To-Doアプリ作って」だけだと、AIも困ります。「どんな機能？」「どの技術で？」「デザインは？」
できるだけ具体的に書くこと。要件を箇条書きにするのも効果的です。あと、制約条件（「バニラJSで」とか「CSSフレームワークは使わない」とか）も明示するといいです。
2. 段階的に進める
いきなり「完璧なアプリを作って」は無理です。まず基本機能、次に追加機能、そして改善、って感じで段階的に。
一度に大量の指示を出すより、小さく区切って確認しながら進める方が、結果的に早く良いものができます。
3. コードを理解する努力を怠らない
これ、一番大事かもしれません。AIが生成したコード、読まずにそのまま使ってませんか？
生成されたコードは必ず確認すること。どういうロジックか、なぜこう書いてるのか。理解できない部分があったら、Cursorに「このコードを説明して」って聞けばいいんです。
AIはツールです。思考を代替するものじゃない。使いながら学ぶ姿勢が大事だと思います。
4. バージョン管理を忘れずに
Cursorが生成するコード、時々想定と違うことがあります。そういうとき、元に戻せないと困りますよね。
Gitを使ってバージョン管理しましょう。Cursorには git 統合もあるので、コミットも簡単です。「この変更を適用する前にコミット」を習慣にすると安心です。
料金プランと選び方
ここまで使ってみて、「本格的に使いたいな」って思ったら、プランを検討しましょう。
無料プラン
基本機能は使えます。GPT-3.5が使えて、月50リクエストまで。試してみるには十分。でも本格的に使うには物足りないかな。
Proプラン（月20ドル）
GPT-4とClaude 3.5が無制限。月500の「高速リクエスト」（優先処理）。個人開発者ならこれで十分です。
私もこのプラン使ってますけど、日常的な開発で困ったことはないです。Copilotより安いし、機能も多い。コスパいいと思います。
Businessプラン（月40ドル）
チーム向け。管理機能が充実してて、プライバシーコントロールも強化されてます。会社で導入するならこれ。
よくあるトラブルと対処法
使い始めでよくあるトラブルと、その解決法をまとめておきます。
AIの応答が遅い
特に無料プランやGPT-4を使ってるとき、応答が遅いことがあります。
対策：GPT-4 Turboに切り替えるか、Claude 3.5 Sonnetを試してみる。あとは、無料プランなら有料プランにアップグレード。体感で2〜3倍速くなります。
生成されたコードが動かない
AIも完璧じゃないです。時々バグのあるコードを生成します。
対策：エラーメッセージをコピーして、Cursorに貼り付けて「このエラーを修正して」って頼む。たいてい直してくれます。それでもダメなら、エラーの内容を詳しく説明して再度依頼。
プロジェクトのコンテキストを理解してくれない
大きなプロジェクトだと、AIが全体を把握しきれないことがあります。
対策：Codebase Indexingが有効になってるか確認。Settings → Features → Codebase Indexing をオンに。あと、指示を出すときに「@filename」でファイルを明示的に指定すると、そのファイルの内容を優先的に参照してくれます。
次回予告：実践編に進もう
ここまで読んでいただき、ありがとうございました。この記事で、Cursorの基本的な使い方はマスターできたはずです。
次回は、もっと実践的なプロジェクトに挑戦します。バックエンドAPIとデータベースを含む、本格的なウェブアプリケーションを作ってみる予定です。認証、CRUD操作、API設計、全部Cursorと一緒にやってみます。
実際の開発フローに近い形で、Cursorをどう活用するか。うまくいったこと、失敗したこと、全部正直に書きますので、お楽しみに！
それまでに、ぜひ今回の内容を試してみてください。実際に手を動かすと、Cursorの凄さがもっと実感できると思います。
コメント