COLUMN コラム

皆さんはAIツール、使っていますか？筆者は主にChatGPTを利用していますが、AI技術の進化はとても早く、最近はテキスト生成だけでなく、医療分野での画像診断や契約書類のリーガルチェックなど、様々な業界に特化したAIも出てきています。それは、Web制作や開発の現場でも同様で、特に注目されているのが、AIと連携してコード補完やレビューを行えるエディタ「Cursor（カーソル）」です。今回は、初心者の方でも簡単に始められるように、Cursorの導入方法から実際の使い方まで、わかりやすく解説します。

1. Cursorとは

Cursorは、「GitHub Copilot」というAIコード補完ツールをベースにして作られたAIコードエディタです。UIはVisual Studio Code（VS Code）をベースにしており、VS Codeから拡張機能の移行も簡単に行えます。コードの生成はもちろん、レビューも行うことができるため、効率よくWeb制作や開発が進めることができます。

GitHub Copilotとの違いは？

GitHub Copilotでも、すでにコードの「予測」や「補完」といった機能は利用可能でした。
Cursorの大きな特長の一つは、コード全体のレビューを行えるという点です。GitHub Copilotでは精度が十分でなかったコード全体のリファクタリングやレビューといった用途にも、Cursorは対応しています。さらに、GitHub Copilotがあくまでエディタの拡張機能であるのに対し、Cursorはインストールして使用する独立したテキストエディタである点も大きな違いです。

2. Cursorの導入方法

それではここから、Cursorの導入方法について解説します。
Cursorの公式サイトにアクセスします。
右上のダウンロードをクリックします。キャプチャはMacOSのダウンロードリンクになっていますが、お使いのOSに合ったダウンロードリンクをクリックしてください。

Cursorをインストールすると、アカウント作成かログインを求められます。本記事では新しくアカウントを作成する方法で解説するので、「Sign Up」をクリックします。

メールアドレスを入力すると認証コードが送られてくるので、入力しましょう。以上でアカウントの作成は完了です。

「Cursorアプリからこの画面に来た場合はログインしてください」といった内容のポップアップが出るので、「Yes, Log In」をクリックします。

ここからアプリの初期設定に入ります。すでにVS Codeをお使いの場合は、「Import from VS Code」をクリックします。

すべての設定を引き継ぐ場合、「Import」をクリック。拡張機能は引き継ぎたくない場合、「Import without extentions」をクリックしてください。

テーマはお好みのものをクリック

Quick Startの画面は、特にこだわりが無ければ初期表示の状態で「Continue」をクリックで問題ありません。

AIの精度向上のためのデータの共有に同意できる場合チェックを入れます

「Language for AI」はAIからの返答言語なので、「Japanese」を選択します。ターミナルからCursorアプリを起動したい場合、Open from Terminalの項目の「Install」もクリックします。

以上で初期設定は完了です。

3. Cursorの使い方

Cursorの実際の使い方について解説します。
初期設定が完了すると以下のような画面になります。左側がファイル表示エリア、右側がAIとチャットを行うエリアです。

まずは空のディレクトリ「cursor_practice」を任意の場所に作成し、「Open project」から開きます。
それでは早速AIに指示してみましょう。今回は、以下のようなプロンプトを入力してみました。

出力結果が以下です。数秒でhtmlファイルとcssを作成してくれました。内容に問題なければ、チャットエリア右下の「Accept all」をクリックします。

VS Codeから引き継いだ、Live Previewプラグインで表示確認をしてみます。よく見るレイアウトのトップページになっています。レスポンシブ対応については、一部追加で指示が必要そうな箇所もありましたが、概ね問題ありませんでした。

これをそのまま使うということは少ないですが、普段忘れがちなtableタグやcssのグラデーションなど、web検索で一から調べると地味に時間がかかるものを、このAIで生成できたら、それだけで時間の節約になると感じました。

一部を修正したい場合

生成したコードの一部を修正したい場合、該当箇所をカーソルで選択し、「Add to Chat」をクリックします。

すると、チャットの上部にアットマーク（ファイル名の該当行）といった表示が追加されます。その状態で、プロンプトを入力してみましょう。

プロンプトに応じた修正をCursorが行ってくれます。問題なければ右下の「Accept」をクリックします。

ボタンが緑色になり、ホバー時の動きも少し派手になりました。

おわりに

いかがでしたでしょうか？
筆者自身、まだ使い始めたばかりで、十分に使いこなせているわけではありませんが、それでも非常に効率よくコーディングを進められると感じました。今後の案件でも少しずつ活用していきたいと思います。
また、今回は記事の都合上ご紹介できませんでしたが、Cursorではコード全体のリファクタリングも行うことができます。コーディングを始めたばかりの頃は、どうしても可読性や保守性の低いコードを書いてしまいがちですが、AIにリファクタリングしてもらうことで、「可読性・保守性の高いコードとはどういうものか」を学ぶ良い機会にもなると感じました。
ぜひ、サイト制作や開発業務にCursorを活用してみてください。