こんにちは。
株式会社アドグローブ ソリューション事業部のI・Yです。
2023年年末ごろからAI搭載のテキストエディター【Cursor】が話題になっていました。
実際に業務にGPTなどのAIを使用しているエンジニアは増えてきており、これから業務の効率化が進んでいきそうだと感じています。
今回はその話題になっていた【Cursor】を導入して、簡易的なプロジェクトの作成を行ってみたので
導入方法から、実際に業務の補助で使用した感想までを共有したいと思います。
今後、AIエディターを試してみたいという方に参考にしていただければ幸いです。
※この記事はAIエディターを試しに導入してみたいけど足が重い方、英語が苦手で導入に踏み切れない方向けの記事です
インストールとセットアップ
Windowsを使っているのでWindowsを選択してsetup用のexeをダウンロードしました。
実行すると以下画像の内容を選択してセットアップできます。
AIに質問するための言語設定を日本語に指定しました。
それ以外はすべてデフォルトでContinueします。
次にVS Codeのextensionを引き継ぐかを選択できます。
今回は業務で秘伝のタレ状態のものを見たくないので引継ぎませんでした。
最後にデータの扱いについて聞かれます。
今回はHelp Improveを選択しました。(扱う予定の情報に合わせて個人で選択してください。)
お疲れ様です。セットアップの完了です！
セットアップ後は、Googleアカウントで入れます。
Cursorの初期画面が表示されました。
日本語化
英語が苦手なかた向けです。
VS Codeをextensionで日本語化するのと同じ方法で日本語化できます。
(筆者は英語のまま使用していますので、その後の画像は英語です。)
利用枠の説明
basic枠を利用します。
50回のGPT-4(slow)と200回のGPT‐3.5が毎月無料で使用できます。
新規プロジェクトの作成
実際に使ってみようと思います。
File → New AI Project を選択すると新規でプロジェクトを作成できます。
どんなプロジェクトを作成したいか質問されました。
早速日本語で作って欲しいものを記載します。
次に保存するフォルダ先とプロジェクト名を聞かれるので入力します。
これで実際に生成してもらうと以下のようなものが出来上がりました。
index.html
style.css
script.js
実際の画面
動作確認
指定してないのにcssファイルとjsファイルを分けて作成してくれてたり、痒いところに手が届いていています。
AIのEdit機能を使用
「ctrl + K」 でAIを使ったEdit機能を利用できます。
今のままではヘッダーが無いのでヘッダーを追加で作ってもらいました。
緑色の箇所が追加されたコードになります。
実際の画面
画面全体に大きくボタンが出てますが、大方期待したものを作ってくれました。 script.jsを作っているのでscriptは可能な限りscript.jsに纏めたいと思います。
Symbol機能を使ってみる
まずchat機能でコードの変更内容を質問してみました。
chat内で、「@ + ファイル名」 とすると、そのファイル全体を読み込んでくれます。
html側に書かれたscriptを選択してから「ctrl + L」 でchatを開きます。
「@ + ファイル名」で指定したファイルを読み込んでくれます。
gpt3.5に直接聞いてた時と違いコードをコピペしなくてもいいのは凄く楽に感じました。
実際に返ってきた返答が以下となります。
chat機能なのであくまで返答だけのようですが、要望を満たす返答を返してくれました。
可能であれば複数のファイルにまたがった修正を一括でおこなって欲しかったですが、動作させることが出来ませんでした。
無料枠の使用回数で動作させるのは難しそうだったので、次回に追加調査・トライしてみようと思います。
今回はscript.js側でindex.htmlを読み込んでJavaScriptのコードをピックアップして移植しました。
その後index.html内のJavaScriptの削除するという2回指示を出す方法で実現させました。
script.js側でのedit文
修正提示内容
感想
AIを活用し大まかなプロジェクトの骨組みを簡単に作成できるのは、大きく作業効率を上げることができると感じました。
クオリティーを担保する必要がある場合は、レイアウトや異常系の制御等の細かい箇所をヒトが修正する必要はありますが、
プロジェクト単位で簡単に自然言語で作成することができる点などはとても魅力的です。関数など細分化して質問を投げることで、より効率的に使うこともできそうです。
いかがでしたでしょうか。
今回は、実際に業務でOpenAIから受け取った文章をストリーミングする機能を作成した際に骨組みを組んでもらいました。
細かい調整が必要でしたが、作業時間を短縮でき効率的に該当部分の関数を作成できました。
今後、AIは発展していき使用者もどんどん増えてくると思いますので、遅れを取らないようにアップデートしていきたい分野だと強く感じました。
最後までお読みいただき、ありがとうございました。
アドグローブでは、さまざまなポジションで一緒に働く仲間を募集しています！
詳細については下記からご確認ください。みなさまからのご応募お待ちしております。
