【AI開発入門】 Cursor IDE & Clineで始めるAIプログラミング
AI、気になるけど難しそう…そう思う方でもOK！
今やChatGPTや画像生成AIなど、身近にAIがあふれています。
ちょっと前までは開発はやったことない人には敷居が高かった、ましてAIの開発なんて開発者にとっても敷居が高かった。
それはもう過去の話。
開発に触れてみたけど難しくって諦めてた人でも、もう一度チャレンジして開発の面白さを実感できることを目指して書いた記事です。
今回はAI活用の開発の最先端Cursor IDEとClineをチャレンジしてみましょう！
非エンジニア向けで書いた記事ですが、AI活用をまだしていないエンジニアにとっても有用な記事なので、ぜひ試してみてください。
手っ取り早く開発イメージを知りたい方は
最後に乗っけてる動画を見てください。
3分でチャットボットをWebサーバを開発して立ち上げます。
太字だけ読めば進められます！
この記事は太字の部分だけ読めば進められます！
詳しく知りたい方は詳細も読んでみてください！
Cursor IDEとClineの魅力とは？
Cursor IDE：AIベースの統合開発環境！
VS Codeを土台にしたエディタで、操作感はVS Codeに近いです。
AIプログラミングをサポートしてくれる“便利IDE”。IDEとは統合開発環境のことで、開発者なら誰でも使ってます。
AIコード補完、Tabキーを押すだけでAI提案を挿入 (Cursor Tab)、チャット機能、難しいコマンドは覚えず日本語でOK!
料金:
• 無料版（Hobby）と有料版（Pro/Business）があります。
• Pro版は月16ドルで無制限の補完、Business版はチーム向け機能も充実。
Cline：AI自動コーディング、AI自動実行、AIデバッグ！
Clineシリーズ（Cool Cline, Roo Cline, Bao Clineなど）は、強力なAIエージェントでVS CodeやCursor IDEを拡張
エラー検出＆自動修正の強化、自動承認機能(Auto-Approve)、セットアップの手間が激減、コード生成・リファクタリングも自動化
既存コードを破壊的に修正してしまうデメリットも。。。
本記事の目的とゴール
Cursor IDEとClineを使って、日本語だけでシステム開発をできるようにする。まずは簡単なシステムを試せたら、ご自身の作りたいものを試してみてください。
準備編
前提知識
最低限知っておきたい基礎知識を挙げておきます。
最低限ChatGPTかGeminiは使ったことがある
途中で詰まって分からなくなったらChatGPTやGeminiに聞こう！
GoogleアカウントでAPI Keyが必要です！
難しく考えなくて大丈夫！
コードを少し触ってみたことがあるレベルで十分スタートできます。
AIによるコード補完や自動修正で初心者でも進められます！
拡張機能でIDEの機能を拡張
Chromeなどでも拡張機能で色んな機能を持たせられますが、Clineは拡張機能をインストールして使用できるようになります。
gitでバージョン管理ができるということ
コードの保存と履歴管理ができるツールで、バックアップ感覚で使えます。操作は知らなくてもOK！
テキストエディタの基本操作が使える
VS CodeなどのIDEが使えるとなお良いです。
プログラミング言語 / ライブラリの存在があるということ
今回は「プログラム言語でシステムが動く」だけ理解すればOK！ライブラリも「便利な道具」くらいの認識でOK!
必要な環境とツール
MacもしくはWindows PC
Cursor IDEのダウンロード・インストール
Cursorアカウントの登録
GoogleアカウントとGoogle API Key
Cursorの初期設定
Cursorの拡張機能にClineを追加
Cursor IDEのダウンロード・インストール
まずは下記からCusrsor IDEをダウンロードしよう。
右上のDOWNLOADでもOK
ダウンロード、インストール、起動については省きますが、通常のアプリとそう変わりません。
Cursorアカウントの登録
Cursorのアカウントも登録しておきましょう。Pro版が2週間トライアルで体験できます。
ログインはContinue with GoogleからGoogleログインをおすすめします。早い！
Sign upでもできますが、Googleがカンタンなのでお急ぎの場合はこちら！
Googleでログインすると、下記のような画面になります。
ひとまずここまでできればアカウント登録は完了！
GoogleアカウントとGoogle API Key
次はいったんGoogleのAPI Keyを発行します。
下記にアクセスして、Googleにログインしよう。
初回は下記のダイアログが出るのでI Consent to the …にチェックを入れて、I Agreeで規約に同意すればAPI Keyを発行できます。
Google API 利用規約、Gemini API 追加利用規約、およびGoogle プライバシー ポリシーが適用されます。プロンプトと応答は確認され、Google AI のトレーニングに使用される可能性があるため、機密情報や個人情報は送信しないでください。データの使用について詳しくは、こちらをご覧ください。Gemini は間違いを犯す可能性があるため、再確認してください。
私は、Google API 利用規約およびGemini API 追加利用規約に同意し、 Google プライバシー ポリシーを読んだことを認めます*
モデルの更新、オファー、役立つヒント、研究調査への参加招待、Google AI に関するニュースなどのメールを受け取ることを希望します
Create API keyからAPI Keyを発行しよう。
API Keyを発行したらCopyしてAPI Keyを安全な場所に保管しましょう。
注意事項として、下記のようにAPI Keyが見えるようにシェアすると悪用されるリスクがあるのでやめましょう。
Use your API keys securely. Do not share them or embed them in code the public can view. / API キーは安全に使用してください。API キーを共有したり、一般の人が閲覧できるコードに埋め込んだりしないでください。
Copy / コピー
@gmail.comのアカウントであればAPI費用は無料で使えます。
Cursorの初期設定
Cursorを起動すると下記のような画面が表示されます。いきなりよく分からないですね。。。
初期設定のまま、Language for AIのみ日本語に設定して、Continueを押下しましょう。
Vim, Emacs, Atom, Sublime, and Jetbrains keybindings. / Vim、Emacs、Atom、Sublime、および JetBrains のキーバインドに対応しています。
Default (VS Code) / デフォルト (VS Code)
Language for AI / AIの言語設定
You can specify a non-English language for the AI. / AIに使用する非英語の言語を指定できます。
Codebase-wide / コードベース全体
Compute embeddings for codebase-wide questions. / コードベース全体に関する質問のための埋め込みを計算します。
Add Terminal Command / ターミナルコマンドを追加
Launch from the terminal using code or cursor. / ターミナルから code または cursor を使用して起動します。
Install “code” command / 「code」コマンドをインストール
Install “cursor” / 「cursor」コマンドをインストール
[Continue] / [続行]
下記ダイアログはStart from ScratchでもUse Extensionsでもどちらでも良いです。VS Codeをインストールしてないと出ないかもしれません。
Instantly import your extensions, settings, and keybindings from VS Code to make trying out Cursor simple. / VS Code の拡張機能、設定、キーバインドを瞬時にインポートして、Cursor を簡単に試すことができます。
Back / 戻る
Start from Scratch / ゼロから開始
Use Extensions / 拡張機能を使用
Cursorの開発に貢献したい方は「Data Preferences」、データを学習されたくない人は「Privacy Mode」を選択しましょう。
Help Improve Cursor / Cursor の改善に協力
To make Cursor better, this option lets us collect usage data. This includes questions in chat, code snippets, edits, and editor actions. / Cursor を改善するため、このオプションでは使用データを収集します。これには、チャットでの質問、コードスニペット、編集、エディターでの操作が含まれます。
Privacy Mode / プライバシーモード
If you enable Privacy Mode, none of your questions or code will ever be stored by us or any third-party. / プライバシーモードを有効にすると、質問やコードは私たちや第三者によって保存されることはありません。
You can always change this later in the settings. Read more. / この設定は後でいつでも変更できます。詳細はこちらをご覧ください。
Back / 戻る
Continue / 続行
次のダイアログが出たら、先ほど作成したCursorアカウントにLog inしましょう！
Log In / ログイン
Sign Up / サインアップ
To avoid abuse on our backend, we ask that you login to use the AI features. / バックエンドの不正利用を防ぐため、AI機能を使用するにはログインをお願いします。
Skip for now / 今はスキップ
Back / 戻る
ブラウザでログインしていると思うので、そのままYES, LOG IN！
You’re currently logged in as: / 現在ログイン中のアカウント：
Please only log in if you just came from the Cursor app. / Cursor アプリからアクセスした場合のみログインしてください。
CANCEL / キャンセル
YES, LOG IN / はい、ログインします
ログインしたらCursor.app を開くでCursorに戻るはずです。
For any issues, reach out at hi@cursor.com / 問題がある場合は hi@cursor.com にお問い合わせください。
ログインしたCursorを開くと……あれ？
ボタンがひとつ、いやふたつか。
これで良いんか？
合ってます。
Open with SSH / SSH で開く
今度はメニューバーから Cursor > Preferences > Cursor Settings から Cursor の設定をします。
Preferences / 設定
Profiles / プロファイル
Cursor Settings / Cursor 設定
VS Code Settings / VS Code 設定
Extensions / 拡張機能
Keyboard Shortcuts [⌘R ⌘S] / キーボードショートカット [⌘R ⌘S]
Configure Snippets / スニペットの設定
Tasks / タスク
Theme / テーマ
Online Services Settings / オンラインサービス設定
Services / サービス
Hide Cursor / Cursor を隠す ⌘H
Hide Others / 他を隠す ⌥⌘H
Show All / すべてを表示
Quit Cursor / Cursor を終了 ⌘Q
Model Namesにあるgemini-から始まるモデル名をすべてチェックします。
次にCursor Settings > Models > Google API Keyにさきほど作成したGoogle API Keyを入力し、Verifyボタンを押します。
Model Names / モデル名
Add new models to Cursor. Often used to configure the latest OpenAI models or OpenRouter models. / Cursor に新しいモデルを追加します。通常、最新の OpenAI モデルや OpenRouter モデルを構成するために使用されます。
Add model / モデルを追加
OpenAI API Key / OpenAI APIキー
You can put in your OpenAI key to use Cursor at public API costs. Note: this can cost more than pro and won’t work for custom model features. / OpenAI の API キーを入力することで、Cursor をパブリック API コストで使用できます。注意：プロ版よりもコストが高くなる場合があり、カスタムモデル機能では使用できません。
Enter your OpenAI API Key / OpenAI API キーを入力してください
Verify / 検証
Anthropic API Key / Anthropic APIキー
You can put in your Anthropic key to use Claude at cost. When enabled, this key will be used for all models beginning with “claude-”. / Anthropic のキーを入力することで、Claude をコスト負担で使用できます。有効化されると、このキーは “claude-” で始まるすべてのモデルに使用されます。
Enter your Anthropic API Key / Anthropic API キーを入力してください
Verify / 検証
Google API Key / Google APIキー
You can put in your Google AI Studio key to use Google models at-cost. / Google AI Studio のキーを入力して、Google モデルをコスト負担で使用できます。
Verify / 検証
Azure API Key / Azure APIキー
Instead of OpenAI’s API or pro, you can use Cursor at-cost through the Azure API. / OpenAI API やプロ版の代わりに、Azure API を通じてコスト負担で Cursor を使用できます。
Enable Google API Keyボタンで有効化しましょう。
Are you sure you want to enable your own Google API key? Several of Cursor’s features require custom models (Tab, Apply from Chat, Composer), which cannot be billed to an API key. / ご自身の Google API キーを有効にしてもよろしいですか？ Cursor のいくつかの機能（Tab、Apply from Chat、Composer）はカスタムモデルを必要とし、API キーに請求することはできません。
Cancel / キャンセル
Enable Google API Key / Google API キーを有効にする
正しく有効化できると下記のような画面に変わります。
With your Cursor Pro Trial subscription, you do not need to use your own Google key! / Cursor Pro トライアルサブスクリプションをご利用の場合、ご自身の Google キーを使用する必要はありません！
Dismiss / 閉じる
Turn Off Google Key / Google キーを無効にする
Cursorの初期設定は以上です！
次はClineの拡張機能の設定方法です。
Cursorの拡張機能にClineを追加
メニューバーからCursor > Preferences > Extensionsを選択します。
Preferences / 設定
Profiles / プロファイル
Cursor Settings / Cursor 設定
VS Code Settings / VS Code 設定
Extensions / 拡張機能
Keyboard Shortcuts [⌘R ⌘S] / キーボードショートカット [⌘R ⌘S]
Configure Snippets / スニペットの設定
Tasks / タスク
Theme / テーマ
Online Services Settings / オンラインサービス設定
Services / サービス
Hide Cursor / Cursor を隠す ⌘H
Hide Others / 他を隠す ⌥⌘H
Show All / すべてを表示
Quit Cursor / Cursor を終了 ⌘Q
下記のような画面が表示されます。左上のSearch Extensions in Marketplaceから拡張機能を検索します。Clineと入力です。
Click to import all local VS Code extensions (don’t show again) / すべてのローカル VS Code 拡張機能をインポートするにはクリックしてください（再表示しない）
INSTALLED / インストール済み
POPULAR / 人気
RECOMMENDED / 推奨
左側にCline, Roo Cline, Cool Cline, …と表示されます。今回はClineをInstallしていきます。私はこの3つのいずれも試しましたが、OSSのClineをベースとした派生形であるRoo Cline, Cool Clineは、現時点でClineとそう変わらなかったのでどれをインストールしても良いと思います。某先生はCool Clineを使っていました。
Cline 370K ⭐ 4.5
Autonomous coding agent … / 自律型コーディングエージェント
Roo Cline 40K ⭐ 5
A fork of Cline, an autonomous … / Cline の派生版、自律型 …
Cool Cline 3K ⭐ 5
Cool Cline is an agentic coding … / Cool Cline はエージェント型コーディング …
Extension: Cline / 拡張機能: Cline
Cline v3.1.11 370,000 ⭐⭐⭐⭐⭐ saoudrizwan
Autonomous coding agent right in your IDE, … / IDE 内で動作する自律型コーディングエージェント、…
インストールできたらDisable, Uninstallのボタンに変わっているので、上部タブの×ボタン、もしくはCommand⌘+Wで閉じましょう。
今度はOpen a Folderで任意のフォルダを開きましょう。
私は下記にしましたが、好きなフォルダで構いません。
Clineの初期設定
まずは画面上部のフォルダ名をクリックしてShow and Run Commandsを選択するか、Shift⇧+Command⌘+Pのショートカットキーを実行しましょう。
Menu Options / メニューオプション
Go to File / ファイルに移動
Show and Run Commands > / コマンドを表示して実行 >
Search for Text % / テキストを検索 %
Go to Symbol in Editor @ / エディタ内のシンボルに移動 @
Start Debugging debug / デバッグを開始
Run Task task / タスクを実行
More ? / その他 ?
そのままclineと入力し、Cline: Open in New Tabを選択します。
View: Show Cline / ビュー: Cline を表示
Cline: Focus on View / Cline: ビューにフォーカス
Change End of Line Sequence / 行末のシーケンスを変更する
開くと下記のような画面になるので、API ProviderにGoogle Geminiを選択し、Gemini API Keyにはさきほど発行したGemini API Keyを入力しましょう。そしてLet’s go!
I can do all kinds of tasks thanks to the latest breakthroughs in Claude 3.5 Sonnet’s agentic coding capabilities and access to tools that let me create & edit files, explore complex projects, use the browser, and execute terminal commands (with your permission, of course). I can even use MCP to create new tools and extend my own capabilities. / 私は、Claude 3.5 Sonnetのエージェント型コーディング機能の最新技術のおかげで、さまざまなタスクを実行できます。ファイルの作成・編集、複雑なプロジェクトの調査、ブラウザの使用、ターミナルコマンドの実行（もちろん、あなたの許可を得て）を行うことができます。さらに、MCPを使用して新しいツールを作成し、自身の機能を拡張することもできます。
To get started, this extension needs an API provider for Claude 3.5 Sonnet. / 使用を開始するには、この拡張機能にClaude 3.5 Sonnet用のAPIプロバイダーが必要です。
API Provider / APIプロバイダー
Gemini API Key / Gemini APIキー
This key is stored locally and only used to make API requests from this extension. / このキーはローカルに保存され、この拡張機能からのAPIリクエストにのみ使用されます。
[Let’s go!] / [さあ始めましょう！]
次の画面になったら、右下の入力Type your task here (e.g., to add context)…から文章を入れてみて、AIが返信できるか試してみましょう。まずはこんにちはから。
Thanks to Claude 3.5 Sonnet’s agentic coding capabilities, I can handle complex software development tasks step-by-step. With tools that let me create & edit files, explore complex projects, use the browser, and execute terminal commands (after you grant permission), I can assist you in ways that go beyond code completion or tech support. I can even use MCP to create new tools and extend my own capabilities. / Claude 3.5 Sonnet のエージェント型コーディング機能のおかげで、複雑なソフトウェア開発タスクを段階的に処理できます。ファイルの作成・編集、複雑なプロジェクトの調査、ブラウザの使用、ターミナルコマンドの実行（許可後）を行うツールを使用して、コード補完や技術サポートを超えた支援が可能です。さらに、MCP を使用して新しいツールを作成し、自身の機能を拡張することもできます。
Auto-approve: None / 自動承認: なし
Type your task here (e.g., to add context)… / タスクをここに入力してください（例：文脈を追加するために）…
日本語で作りたいものを伝えれば開発はできる
あいさつしたらhtmlを作ってくれた
正しく動作していると下記のように返答を返してくれます。普通に返事する場合もあれば、こんにちはを表示するプログラムを作ってくれます。今回はhtmlを作ってくれました。
……そう！
もうプログラムを作れる状態なんです！！
このままSaveすればこんにちはを表示するプログラムを保存してくれますが、そんなプログラムを作りたいわけではないので、いったん右上のTaskの横の×ボタンからタスクを削除します。
今度は「テスト駆動でX(Twitter)みたいなSNSの簡易版をつくって」で進めてみます。
自動実行が進みます。すぐに次のような画面で止まってしまいます。Run Commandを押して進めましょう。
テスト駆動で「TwitterみたいなSNSの簡易版をつくって」
中略
Cline wants to execute this command: / Clineは以下のコマンドを実行しようとしています
mkdir src test
Auto-approve: None / 自動承認：なし
Run Command / コマンドを実行
Reject / 拒否
続けて同じように止まってRun CommandやSaveを押して進めましょう。いちいち聞かれて面倒ですが、本来は人が承認を判断すべきところです。気になる方はいちいち調べてみましょう。
Auto-approveで自動実行を承認
だんだん面倒になってくると思います。そこで出てくるのがAuto-approveです。真ん中辺にあるのですべてチェックを入れます。本来であればこれも本当に自動化していいか人が判断してチェックします。まずは自動実装を体験してほしいので全部チェックを入れます。必要なプログラムをインストールしたり、ファイルやフォルダを削除したりすることもあるので、リスクは理解してください。
Read files and directories / ファイルやディレクトリの読み取り
Allows access to read any file on your computer. / コンピューター上の任意のファイルを読み取るアクセスを許可します。
どんどん実装が進んでくれます。
一連の流れを動画でも共有しておきます。
うまくいかないこともしばしば
ただ、API Keyの課金状況や制限事項によっては下記のようにエラーが発生します。今回は429 Too Many Requestsが発生しましたが、このエラーはGoogle GeminiのAPIアクセスが多すぎるというエラーです。そもそも無料でこれが使えること自体がとんでもないことなので、制限が緩和するまで待ちましょう。通常は1分待ってRetryで再開できると思います。
[GoogleGenerativeAI Error]: Error fetching from https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash-thinking-exp-1219:streamGenerateContent?alt=sse: [429 Too Many Requests]
Resource has been exhausted (e.g., check quota). / リソースが使い果たされました（例：クォータを確認してください）。
この制限が面倒だと思う方は、ClaudeやOpenAIの有償サービスでのAPI Keyを使ってください。
エラーの内容がわからない場合はChatに聞いてみよう
Shift⇧+Command⌘+Lを押すと右側にCHATが開きます。不明な点はこれに聞いてみよう。
Shift⇧+Command⌘+L だと連続してチャットに聞ける
エラーメッセージを貼って「どゆこと？」と聞く。
うまく動かないときはこれで進められます。
数回リトライしたら完成しました。
テスト場面で「TwitterみたいなSNSの簡易版をつくって」
Task Completed / タスク完了
I have created a simplified social network with the following features: • Users can post messages. • View a timeline of messages from all users. • Follow other users. The implementation follows a test-driven development approach, with unit tests for each feature. / 以下の機能を備えた簡易的なSNSを作成しました： • ユーザーがメッセージを投稿できます。 • すべてのユーザーからのメッセージタイムラインを表示できます。 • 他のユーザーをフォローできます。 この実装はテスト駆動開発（TDD）手法に従い、各機能に対する単体テストを含んでいます。
Options / オプション
See new changes / 新しい変更を見る
Start New Task / 新しいタスクを開始
動かし方がわからないので調べる
でも動かし方がわかりません。
Shift⇧+Command⌘+Lを押してCHATに聞いてみよう。
どうやって動かすの？と入力してCommand⌘+Enter↵でCodebaseに質問ができます。
どうやら今回はnpm testを実行までしか実装できなかったようです。動作確認する方法は他にもあるんですが、ちょっとこれでは開発初心者の方にイメージが湧きませんね。。。
Gemini APIでChatGPTライクなAIチャットボットを開発する
気を取り直して違うアプローチをしてみます。
いったんフォルダを~/git/shigel/cursor-tutorial-20250120-2/を作成し直して、このフォルダを開き、イチから作り直しています。
今度はClineに「ChatGPTライクなAIチャットボットを作って。LLMはGoogle Gemini APIを使って。GEMINI_API_KEYは.envに入ってます。pythonとgradioでの実装が良いです。」と指示してみました。
暫く待つとProceed While Runningボタンが表示された状態で止まっていたのでクリックします。
翻訳が納得いかん。。。
Task Completedと出てきたので表示された http://127.0.0.1:7860/ をクリックしてみます。ブラウザが開きます。
画面が開きました！
さっそくこんにちはと入力してSubmitをしてみると……
あえなく撃沈。。。
Cursorに戻ってみると下部TERMINALにエラーメッセージが表示されています。TERMINALのエラーメッセージを丸ごとコピーして、Clineのチャット欄にエラーをデバッグしてと入力した後にエラーメッセージをペーストで追記して送信します。
再度Proceed While Runningを経て、Task Completedと出てきたので表示された http://127.0.0.1:7860/ にアクセスします。
再度ブラウザからこんにちはを入力してSubmitをしたら……
ついに返事をしてくれた！！！
ついでにあなたは誰ですか？と訪ねてみる。すると私はGeminiと返してくれました！！
結果はご覧の通り大成功！！
プログラミングしている様子を動画でも見れるようにしました。ほとんどAI自動実装です。
セットアップができれば、たった3分でこれが作れます。
まあ、カンタンな内容だからね。。。
AI自動実装のその先は？
AIによる自動実装が非エンジニアができるようになって、どんなことができるようになるだろうか？
開発は安くなるだろうか？正直あまり現状と変わらないような気もします。
今までエンジニアがカツカツの状態で無理くり作っていたものが少し余裕を持って作れるようになるとは思います。余った時間があるとしたら、精度を上げるところに使うのが良いと思います。
もちろんAIで安かろう悪かろうで開発人達は増えると思います。安く作りたい人はそれで良いと思います。私はそこに責任は持ちませんが。
じゃあAIを使わないエンジニアの仕事はAIに奪われるのかというと、AIに奪われるのではなくAIを使うエンジニアに奪われるんだと思います。
じゃあ、なんで非エンジニア向けにこんな記事を書くんよって話になるんですが、これを非エンジニアがやることによって、エンジニアとのコミュニケーションコストがかなり減ると思います。それをすることで開発費用は減ると思います。
結局のところ、AIをフル活用するエンジニアは、AIを使う非エンジニアやAIを使わないエンジニアよりも難易度の高いことをやることになるので、どんどん差が広がるだけだと思います。
かつて馬車から自動車に移り変わったようなことがこれから起こると思います。
AIで私より先を行ってるエンジニアを見ていると、そんな未来になっていくんだろうなぁとしみじみ感じております。
宣伝
弊社ではAI駆動開発を学びながら開発をしてくれるエンジニアを募集しております！
条件は厳しくもゆるくもないと思います。
興味ある方は下記をご覧ください！
https://mamaworks.jp/job/25037