AIアシスタント搭載のIDEを使い回す

 ・ 2 min

photo on Unsplash

ChatGPT、Claudeなど数多くの開発向けモデルが登場しており、IDEにもAIが搭載されてコーディングを支援する時代に生きています。どこが勝つかは分かりませんが、まるで春秋戦国時代のようです。

これまでVS Codeをずっと使っていましたが、AIアシスタントが付いているCursorを一度使ってみたところ、開発体験が非常に良かったので皆さんもぜひ試してみてください。ただ、今すぐはお金を払わずに開発する方法を見つけたので、それを共有しようと思います。節約術のようなものだと思ってください。

IDEを複数使う理由
各IDEには無料アカウントでAI機能を無料で使える上限があります。
この上限を使い切ったら別のIDEを使って上限まで使い、また別のIDEに切り替えるという過程を毎月行うわけです。
このポリシーは変わる可能性がありますが、使い方も似ていてまだ有効だと思うので共有します。

使ってみたところ、サービスによっては月ごとの使用量がリセットされないケースがほとんどなので、この方法は何かをサブスクリプションする前にさまざまな製品をテストする用途で使ってください

CursorのようなIDEがいくつあると思いますか?約3〜4個ほど見つけました。

これ以外にもいくつかあるかもしれませんが、2〜3個のIDEを使うだけでも1ヶ月程度は使えるので、4つあれば十分だと思います。各サイトやIDEへのアカウント登録はGitHubアカウントで行いました。

Cursorの使用量
image

Windsurfの使用量
image

Aideの使用量
image

GitHub Copilotの使用量(どこで確認できるのか分かりません)
image

VS Codeを除くと、すべてVS Codeをフォークして作られたIDEなので、Profileを活用すれば環境構築をより簡単にできます。それだけお伝えしますね。

Profiles機能を使って開発環境を構築する#

まず上記から好みの製品をダウンロードして開発用PCにインストールしてください。
基準としては、VS Code以外は最近インストールしたため、Profileのベースとなるcontentsを持つVS Codeを選びました。おそらくほとんどの方がこれに該当すると思います。
Contentsとは何かというと、VS Codeに設定してインストールしたsettings、keyboard shortcuts、tasks、snippets、extensionsのことです。ここから他のIDEに移す必要があるものを選んでプロファイルを作ります。
こうする理由は、別のIDEを初めて起動した時に同じ設定を構築するのが面倒だからです。
VS Codeから設定をインポートできるIDEもありますが、対応していないIDEもあるため、同じ環境をすべてに適用するためにプロファイルを作ります。

より正確な説明はProfiles in Visual Studio Codeを参照してください。

Profileを保存する#

  1. VS Codeの下部にある設定(歯車アイコン)ボタンを選択してください

  2. Profilesボタンを選択してください
    image

  3. 保存したいプロファイルの横にあるその他ボタンを選択してください

  4. Exportを押してください

  5. 好きな名前を入力してください

  6. 好きな場所に保存してください(Local fileとして保存しました)
    image

これで保存は完了です。

Profileを読み込む#

各IDEを起動してProfileメニューを探し、Import Profileを押してファイルを選択してください。
メニューに表示されないIDEもあるので、cmd + shift + pでコマンドパレットを開いてProfile: New Profileを選択した後、そのプロファイルをCancelしてからImport Profileを実行してください。
image

そして各種設定とextensionsをダウンロードするとプロファイルが作成されます。
その後、利便性のためにUse for New WindowsUse this profile as the default for new windowsにチェックを入れてください。

image

これでほぼ同じ環境で各IDEからAIと一緒に開発できるようになります!

AIと開発する方法#

ChatGPTのようなものを使ったことがあれば、方法は簡単です。ChatGPTを使うようにIDEでチャットすればいいのです。ただしIDEと統合されているため、いくつか便利な機能があります。大きく分けて、AIが直接書いてくれるWriteモードと、会話だけして自分で書くChatモードがあります。そしてコーディング中に書こうとしているものを提案するオートコンプリート(completion)モードもあります。

このようなIDEを使う最も大きな理由は、会話を通じてコードの改善点や問題を見つけること、単純な繰り返し作業を代行する役割が大きいと考えています。

Rulesを設定する
プロジェクトに合った開発をするために、AIに事前の指示事項を設定する方法です。
すべて同じ内容を各ファイルに指定しました。一つのファイルを参照させる方法もありますが、とりあえずこうしています。
どんな内容を入れるべきか悩む方は、Cursor Rulesというサイトでプロジェクトに合うruleを見つけて設定してください。
Flutterフレームワークを検索してコピーし、追加した内容(Clean architectureと韓国語の使用)を入れました。

Rulesを設定するためのパス
GitHub Copilot: プロジェクトルート/.github/copilot-instructions.md を作成して内容を記述
Cursor: プロジェクトルート/.cursorrules を作成して内容を記述
Windsurf: プロジェクトルート/.windsurfrules を作成して内容を記述
Aide: docsを探してみましたが、なさそうです

チャットウィンドウを開くショートカット
VS Codeでチャットウィンドウを開く: ctrl + cmd + I
Cursorでチャットウィンドウを開く: cmd + shift + l
Windsurfでチャットウィンドウを開く: cmd + shift + l、モード切替: cmd + .
Aideでチャットウィンドウを開く: 常に開いています

この他にもファイルを参照して質問したり、コード行を参照して質問したりなど、さまざまな方法でAIと対話する方法がありますが、それはdocsや他の記事、動画を参考にしてください!

各IDEのドキュメントは以下にリンクしておきます。

便利なリンク


Transformation doesn't take place with a vacuum; instead, it occurs when we are indirectly and directly connected to all those around us.

— Byron Pulsifer


他の投稿
Figmaのためのデザイン学習まとめ 커버 이미지
 ・ 1 min

Figmaのためのデザイン学習まとめ

C言語とは何か?オープンソースなのか? 커버 이미지
 ・ 1 min

C言語とは何か?オープンソースなのか?

Route 53のレコード入力フィールドを見てみる 커버 이미지
 ・ 1 min

Route 53のレコード入力フィールドを見てみる