AIエディター「Cursor（カーソル）」初心者向けガイド、VS Codeベースの使い勝手とは
ステップ1：Cursorのインストール
以下では、実際にCursorを使い、実際のWebサイトをつくってみたい。Cursorは最も人気のある統合開発環境「VS Code」の派生版であり、見た目はVS Codeとほぼ同じ。普段から、VS Codeを利用している人にとっては、扱いやすいツールといえる。 以下、Mac mini環境における手順を解説していく。 まず、CursorのWebサイトでツールをダウンロードし、PCにインストールする。 インストール時、以下のような選択肢が表示される。必要に応じて、変更してほしい。筆者は、変更なしでインストールを行った。
ステップ2：必須ライブラリのインストールとプロジェクトファイル生成
インストールが完了したら、アプリケーションを起動する。すると以下のような画面があらわれる。 今回は、モダンWebサイト／Webアプリで使用されるフレームワーク「Next.js」を使ってWebサイトを構築したい。これは、速さと効率性に優れ、検索エンジンに優しく、また開発がしやすく、多機能なフレームワークで、多くのモダンWebサイト／アプリに使用されているフレームワークとなる。 まず、Cursorの上部メニューバーより「Terminal」をクリックし、ターミナルを表示。 cdコマンドで任意のフォルダに移動する。 筆者の場合、Homeディレクトリ直下にweb_projectsフォルダを作成、ここで作業を進めていく。 ※Next.jsを使うために、Node.jsが必要となるので、ターミナル上でインストールしておく。 MacOSの場合： brew install node Linux Ubuntuの場合： sudo apt update sudo apt install nodejs npm 任意のフォルダ（筆者の場合、web_projects）に移動した後、Cursorのターミナル上で「cmd＋K」を押し（※Windowsの場合「Ctr + K」）、CursorのAIインストラクションポップアップを表示する。ここに、Next.jsを使ってWebサイトを作成したい旨を記述する。 たとえば「筆者（Gen Hosoya）のAIコンテンツライティングに関する個人WebサイトをNext.jsを使って作成したい」というプロンプトを入力してみる。執筆時点では、Claude3.5 Sonnetが使われているので、英語でも日本語でも、問題なく理解してくれるはずだ。 プロンプトを入力したら、青色の「Submit」ボタンをクリックする。 すると、ターミナルに自動で以下のコマンドが入力される。これは、Next.jsの新しいプロジェクトを作成するためのコマンドやプロジェクトフォルダ作成のコマンドなど。Enterを押すと、これらが実行される。 genhosoya@Gens-Mac-mini web_projects % npx create-next-app gen-hosoya-ai-wr iter --typescript --eslint --tailwind --app --src-dir --import-alias "@/*" 上記のコマンド実行で、新たにプロジェクトフォルダが作成されるので確認する。たとえば、以下の画像は、現在いるフォルダ内に、「ai-content-writer-gen-hosoya」というプロジェクトフォルダが作成されたことを示している。 ここでもう一度Cursorのメイン画面に戻り、「Open a foder」をクリックし、先ほど作成されたフォルダを開く。 すると以下の画像のように、右側のサイドバーに、プロジェクトファイルと複数の関連ファイルが作成されたことが確認できる。
