前回の記事ではCursorの主要機能や特徴をお話ししました。言葉だけではイマイチピンとこないところもあったと思います。実際にCursorを使いながらAIを活用した統合開発環境での開発を体験してみましょう。
本記事では、AIエディタCursorの実際の使い方について、ハンズオン形式で初心者にもわかりやすく解説していきます。AIと共に進化する新しい開発スタイルを、ぜひ体感してみてください。最終的に最近話題のMCP（Model Context Protocol：AIが外部のデータソースやツールと標準化された方法でやり取りを行うためのオープンなプロトコル）を活用した開発まで体験したいと考えています。
※ 本ハンズオンはMacで行います
Cursorの導入
早速Cursorを導入してみましょう。なお、2025年6月20日時点（Version1.1.3）での解説になります。この辺はバージョンアップによる画面の変更などもあるため文字のみで説明します。
- cursor.com にて自分の環境に合うインストーラーをダウンロードして、指示に従ってインストールしてください
- インストールが終わったら起動します。初回起動時に、幾つかの設定が出来ますが基本的にはお好みで設定してください。Codebase-wide項目はONにしておくと良いでしょう。ONだとプロジェクト全体に対してAIに質問できます
- 次にVSCodeの拡張機能を読み込む事ができます。既にVSCodeで開発されている方はこれにより、普段使い慣れた環境を維持しつつ、CursorのAI機能をすぐに活用できます
- 設定が終わったらCursorへのログインまたはアカウント作成画面が表示されるのでアカウントを作ってしまいましょう
これでCursorが使えるようになりました。Cursorをの初期画面はこのように表示されます。
最初のアプリ開発
AI Editorを導入したのでまずはその威力を試してみましょう。
まずはFinderやTerminalなどで空のフォルダを一つ作っておきます。
その後、Cursor初期画面で「Open project」を選択し、新規に作ったフォルダを選択します。
空のプロジェクトを開きました。
右側のNew Chatがある領域がAIと疎通するところになります。Chat欄に以下のように自然言語での指示を入れて実行してみます。
無料オンラインセミナー登録用ランディングページを作ってください。すると忠実にページを作成する旨の返事と作業を開始するためのディレクトリ構造を確認するという報告をして、そのコマンドーを実行するための支持待ちの枠が表示されています。
ここで「Run」ボタンを押すと処理を継続してくれます。
途中、何をやっているか随時報告しながら必要なHTML、CSS、JSファイルを作成してくれました。とりあえず結果を見るために下のチャット枠の上の方にある「Accept all」を押してCursorの作業を受け入れます。
どういった画面になるかワクワクしながら、VSCodeの拡張機能であるLive Serverを使えばすぐに画面が見れるはずですが今回はCursorに実行もお願いしてみましょう。
Pythonでローカルサーバーを起動するようです。「Run」ボタンを押してしばし待ちます。
しばらく待ってもRunning terminal command…と表示されるまま一向に処理が終わりません。
待ちくたびれて再度お願いしてみます。たまに処理が止まっていると感じたら続きをお願いする指示を出すと継続して処理してくれます。
ちゃんと謝罪もしつつ今度はちゃんと起動してくれました。一言でお願いしたのになかなかのものを作ってくれました。
今回はCursorの導入とChat機能を使って、AIに指示を出して、簡単なランディングページを作成してみました。Reactやバックエンド実装は全く入っていないものなのでChatGPTで作るものと何が違うの？という感じだったと思いますが、従来のエディタと同じようなインターフェイスで、シームレスにAIが支援してくれている感じはざっくり掴めたのではないでしょうか？
次回はCursorの設定やもう少し複雑なアプリ開発をしてみたいと思います。
