SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発用エディタのド定番「VSCode」を使いこなそう

VSCodeにChatGPTを! 導入方法や使い方を理解して次世代の開発環境を整えよう

開発用エディタのド定番「VSCode」を使いこなそう 第4回

  • X ポスト
  • このエントリーをはてなブックマークに追加

APIキーを取得する

 VSCodeから拡張機能経由でアクセスするには、OpenAIのAPIキーを取得します。アカウントを取得してログインできたら、右上の組織名が表示されている箇所をクリックして表示されるメニューから、[View API keys]をクリックします。この画面(図2)になっていない場合は、以下のURLに直接アクセスしてください。

図2:OpenAI APIのトップ画面
図2:OpenAI APIのトップ画面

 「API keys」と表示された画面になるので、[+ Create new secret key]をクリックします。「Create new secret key」ウインドウがポップアップするので、キーの名称(Name)を入力して[Create secret key]をクリックします。「Optional」と表示されているように省略可能ですが、区別のためにできれば指定した方が良いでしょう。作成されるとキーが表示されるので、これをコピーしてテキストエディタなどで保存しておきます(図3)。キーが表示されるのはこの機会だけなので、保存を忘れたら再度新規作成が必要になるので注意してください。

図3:「Create new secret key」ウインドウ(作成後)
図3:「Create new secret key」ウインドウ(作成後)

 [Done]をクリックして表示される一覧に、作成されたキーが表示されていることを確認してください。キーの削除は、右側にあるごみ箱アイコンをクリックします。ただし、2個目以降のキーの作成では無料枠が反映されないという報告もあります(筆者は未検証)。キーを削除する場合には注意してください。

[NOTE]ChatGPT APIの無料利用枠

 ChatGPT APIは有償のサービスです。ただしトライアルによる無料利用枠があり、登録後3カ月を経過するか、利用料が18米$に達するまで無料で利用できます。利用料は、1000トークンあたり0.002米$(約0.27円)となっています。日本語の場合、1文字が1~3トークンに相当するので、トークンの消費には注意が必要ですが、本記事のような検証の範囲なら無償で十分に利用が可能です。

拡張機能をインストールする

 APIキーを取得できたら、Genie AIによる拡張機能「ChatGPT - Genie AI」(genieai.chatgpt-vscode)をVSCodeにインストールします(図4)。拡張機能の探し方やインストール方法については、連載第3回を参照してください。

図4:ChatGPT - Genie AI(genieai.chatgpt-vscode)
図4:ChatGPT - Genie AI(genieai.chatgpt-vscode)

 拡張機能をインストールすると、アクティビティバーに魔法のランプのアイコンが追加されます。これをクリックすると、プライマリサイドバーが「GENIE: CONVERSATION VIEW」に変化します(図5)。下方にある「Ask a question...」と表示されているテキストボックスに適当な質問文を入力して紙飛行機アイコンをクリックすると、初回のみAPIキーの入力を求められます。APIキーを入力すると、質問に対する回答文が表示されます(APIキーは記憶されます)。これで準備は完了です。

図5:ChatGPT - Genie AIのプライマリサイドバー
図5:ChatGPT - Genie AIのプライマリサイドバー

Genie AIの基本的な設定

 Genie AIの利用に入る前に、基本的な設定を済ませておきます。拡張機能の設定画面の呼び出し方は、連載第3回で紹介しているので参照してください。基本的には、拡張機能の一覧や詳細画面にある歯車アイコンをクリックするか、コマンドプロンプトで「Genie: Show settings」を入力してと呼び出すことができます。設定項目は、バージョン0.0.8で30個あります。主な設定項目を表2に挙げておきます。

表2:Genie AIの主な設定項目
項目 デフォルト 概要
genieai.personalizedName Genie AIプログラマープログラマの名前。 返答に付けられる名前なので好きなものにしてよい
genieai.openai.model gpt-3.5-turbo 使用するOpenAIのモデル。 最新のgpt-4以下、10個以上のモデルから選択。利用が制限されていたり廃止されたりしたモデルは利用できない
genieai.openai.temperature 0.9 回答への熱量。 0でprecise(正確性重視)、0.5でbalance(バランス重視)、0.9でcreative(創造性重視)となる
genieai.openai.generateCode-enabled true コード生成のためのGenerate Codeをコンテキストメニューで有効にするか(genieai.openai.modelがcode-*《Codex》である場合のみ有効。ただしCodexが廃止されたので使用できない)
genieai.promptPrefix.* 質問文(英語) Add Tests~Custom Promptまでのおのおのの質問文
genieai.promptPrefix.*-enabled true Add Tests~Complete Codeまでのおのおのの質問文をコンテキストメニューで有効にするか
genieai.promptPrefix.*-enabled false Custom Promptのおのおのの質問文を有効にするか

 設定では、応答が日本語になるようにのみしてみます。ここで設定していくのは、表2の「Genieai › Prompt Prefix: *」(genieai.promptPrefix.*)に相当するプロンプトです。既定値は英語なので、応答も英語になります。表3のように、これらを日本語化し、応答も日本語になるようにしてみます。カスタムプロンプトも2つ設定できるので、必要な場合には有効化にチェックを入れた上で設定してください。

表3:日本語化した質問文
項目(*の部分)
Add Tests(addTests) 以下のコードにテストコードを追加してください。
Find Problems(findProblems) 以下のコードの問題点を探してください。
Optimize(optimize) 以下のコードを最適化してください。
Explain(explain) 以下のコードの内容を説明してください。
Add Comments(addComments) 以下のコードにコメントを追加してください。
Complete Code(completeCode) 以下のコードを完成させてください。

次のページ
Genie AIによるコーディング支援

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/17730 2023/05/15 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング