CursorはAI機能を搭載したVSCodeの拡張版で、フロントエンド開発を効率化するための自動コード生成やスタイリング提案が可能。新機能「Composer」により、複数のタスクを一度の指示で実行できる。無料プランと有料プランがあり、GitHubとの連携も簡単にできます。
今年は爆速でコーディングできるようになりたい！
毎回同じような処理を手で書くのは疲れた…
jsの記述に毎回超時間がかかる…
と思っていたWebエンジニアのあなた！！
あなたがこれを発見したこと。これは縁です。
本コースを受講すると、AIコーディングがすぐに使い始める準備が整います！
Cursorの概要
Cursorは、Anysphere（エニースフィア）社によって開発され2023年に公開された、
AIを活用した次世代のコードエディタです。従来のコードエディタの機能に加えて、GPT-4、Claudeなどの強力なAIモデルを統合でき、コーダーの生産性を劇的に向上させます。
Cursorは操作性がVSCodeとほぼ同一なため、エディタの基本機能、ショートカットキー、UIの配置などは、今までの経験をそのまま活かすことができます。
つまり、VSCodeで使い慣れた操作方法を変更する必要がなく、新しく覚えるのはAI機能に関する部分だけで済みます。
参考）
Cursor
OpenAI社から800万ドルの出資
プラン
ポイント！ 新機能である”Composer”を使えるのは、Proプランからになります。
【プラン概要】 Cursorには3つのプランがあります：
• Hobby（無料）：2週間のPro試用期間、月2000回のコンプリーション、月50回の遅いプレミアムリクエスト
• Pro（$20/月）：無制限のコンプリーション、月500回の速いプレミアムリクエスト、無制限の遅いプレミアムリクエスト、日10回のo1ミニ使用可能
• Business（$40/ユーザー/月）：組織全体のプライバシーモード、チーム課金、管理ダッシュボード、シングルサインオン
ダウンロードとインストール
Cursorのダウンロードとインストールは以下の手順で簡単に行えます：
- 公式サイトにアクセス：
- ブラウザでcursor.comにアクセスします。
- 「DOWNLOAD」ボタンをクリックします。
- ブラウザでcursor.comにアクセスします。
- インストーラーのダウンロード：
- お使いのOSに合わせたインストーラーが自動的にダウンロードされます。
- Windows、macOS、Linuxの各バージョンが用意されています。
- インストールの実行：
- ダウンロードしたインストーラーを実行します。
- 画面の指示に従って、インストール先を選択し、インストールを完了させます。
- 初回起動時の設定：
- Cursorを起動し、必要に応じてアカウントを作成またはログインします。
ポイント！ ちなみに、GIthubアカウントでログインできていると、Cursor機能の一つである、”Githubとの連携”のさいにより簡単にセットアップ可能です。
Cursorアカウントを通常のメールアドレスで作成しても、後からGitHubアカウントとの連携設定が可能であることがほとんどです。
ただし、初期設定がやや手間になる可能性があります。
VSCodeからの設定のインポート
VSCodeからの設定移行をすることで、VSCodeを使っていた方は同様の開発環境をそのまま引き継ぎながら、新しいAI機能を追加することができます。
VSCodeからの設定をインポートする手順は以下の通りです。
- VSCode設定のエクスポート： Visual Studio Code (VSCode)は、優れたカスタマイズ性を誇るエディタです。そのカスタマイズの要となるのが、
settings.jsonファイルです。この設定ファイルを活用することで、開発環境を細かく調整し、プロジェクトごとに異なるニーズに応じた環境を構築することができます。- VSCodeで設定をJSONファイルとしてエクスポート
- 拡張機能のリストも別途エクスポート
- ユーザー設定：
settings.jsonは通常、以下のディレクトリに保存されています。- Windows:
C:\\Users\\<ユーザー名>\\AppData\\Roaming\\Code\\User\\settings.json - Mac:
~/Library/Application Support/Code/User/settings.json
- Windows:
- Cursorの設定を開く：
- メニューから「File」→「Preferences」→「Settings」を選択
- または、キーボードショートカット「Ctrl+,」（Windows）/「Cmd+,」（Mac）を使用
- 設定のインポート：
- Cursorの設定画面で「Import from VS Code」オプションを選択
- エクスポートしたJSONファイルを選択してインポート
- 拡張機能の再インストール：
- 必要な拡張機能を個別にインストール
- VSCodeの拡張機能リストを参照しながら、同等の機能をCursorに追加
インポート後は、設定が正しく反映されているか確認し、必要に応じて微調整を行うことをお勧めします。
AIのモデル選択について
カスタム API キーについて
独自のOpenAI APIキーを使用することで、より柔軟なAI機能の利用が可能になります。APIキーの設定は簡単で、設定画面から直接入力できます。これにより、使用量の管理や請求の一元化、さらにはカスタマイズされたAIモデルの利用なども可能になります。
ポイント！ Cursorのいくつかの機能（Tab、Apply from Chat、Composer）はカスタムモデルを必要とし、これらのAPIキーの登録では使用できません。 そのため、Cursorの最新の機能をフルに利用するためには、APIキーではなくCursorのProプランかBuisinessプランのアカウントを登録する必要があります。
AIのモデル選択について
モデルの選択は、設定メニューから簡単に変更することができます。プロジェクトの規模や要件に応じて、適切なモデルを選択することをお勧めします。
Cursorでは複数のAIモデルを選択できます。デフォルトではGPT-4oが使用されますが、特定のタスクや開発言語に特化したモデルを選択することも可能です。各モデルの特徴や得意分野を理解し、プロジェクトの要件に最適なモデルを選択することで、より効率的な開発が可能になります。
参考）
続きはUdemy講座にて詳しく解説しています。
続きとなる以下の内容については、おそらく動画で動く画面を見ながらのほうが理解が深まると思います。
- Githubとの連携のしかた
- Githubリモートリポジトリを作成する
- リモートリポジトリにpushする
- リモートリポジトリからpullする
- プロジェクトの別ブランチを作成する
- リモートリポジトリのプロジェクトをローカル上に複製する
- よく使う機能とショートカット
- ファイル内検索
- プロジェクト内検索
- プロジェクト内置換
- ファイル内複数選択
- Chatタブ内で対話形式でコード生成する
- エディタ内で対話形式でコードを直接生成する
- 標準搭載されたEmmetの機能を使う
- 新機能”Composer”について
この記事を見た方への期間限定クーポン情報
1ヶ月間限定 90% OFF OFF クーポン
【クーポン適用後価格】
¥3,300 → ¥1,980
【クーポン使用可能期間】
【クーポンコード】
PRYTHM_SPECIAL_GUEST【クーポン付き受講リンク】
