株式会社カンリー、エンジニア部の角谷（@motsuo373）です。
最近ChatGPTと対話しながら、Golangについて勉強をしているフロントエンドエンジニアです。

今回は、ChatGPTとGitHub Copilotを実際に数ヶ月使用した私が、どのように開発を進めているか、その際に意識している事や注意点などについてまとめました。

ChatGPT編

カンリーのChatGPT Plus利用料補助について

カンリーではChatGPT Plusの社員全員の全額補助制度が開始しました。
最先端のAI技術を触れていき、業務効率化やイノベーションのヒントにすべく本制度が導入されました。

この制度により、カンリーでは社員全員がChatGPTを用いて、業務へ活用することできるようになりました。
私もこの制度を利用して、なんの躊躇いもなくChatGPT Plusに課金をすることができプロンプトエンジニアリングを体験出来ています。圧倒的感謝。

ChatGPTの活用方法 〜ブラウザ質問&スニペットツール活用編〜

ChatGPTを活用する方法として、下記を意識して使用しています。

• 同じスレッド内で同一の言語についての質問を行い続ける。

• スニペットツールを活用して最初のプロンプトを効率化。

ChatGPTにはスレッド単位で会話を切り分けることができます。
使用する際、スレッド自体を都度削除するのではなく、事前にこのスレッドでは「下記のルールに従って」と伝えるようにして対話を行なっていきます。

実際のプロンプトは下記のようにしています。

プログラミングに関する質問を投げますので、下記のルールに従って回答をしてください。

- 開発言語には typescript を使用してください。
- フレームワークに Next.js を使用しています。
- 解説は不要です。

次のメッセージから質問を投げます。

目的に応じて上記のプロンプトを設定して、同一のスレッドで基本的に質問を投げています。
同一スレッドで行うことで都度言語に対しての説明などが不要になるため、より効率化につながるためです。

また、万が一消してしまったり、ネットワークエラーのため会話が途切れてしまうこともあるので、上記のようなテンプレートをスニペットツールを利用して保存しています。

私が使用しているツールは「Raycast」というランチャーアプリのsnippet機能を利用しています。

実際の使用例です。

snippetで保存をした上で、Keyword設定もしておくと、その文章を入力をしてもらった際に自動補完をしてくれます。

Raycast側は下記画像のように設定をしており、Keyword設定をすることで
[ :gpt-q ] と入力するだけで良くなるように設定しています。

コードの質問をして欲しい時以外にも、

• コード自体を短くする方法を答えて欲しい時。

• コードレビューをして欲しい時。

• 別言語の使用例

などのパターンをsnippetに用意することで、用途別に使用することができます。

ChatGPTの活用方法 〜Genie AI編〜

Genie AIとはVSCodeのプライマリ サイドバーでChatGPTを扱うことができるようになる拡張機能のことです。

弊社では、「GenieAIを使った効率的な開発手法」をテーマに社内向け勉強会を開きました。

この勉強会をきっかけに私はこの拡張機能を使用し始めたのですが、
AIとペアプログラミングをする形で開発を進めることができ、
より効率的に開発を進めることができるようになりました。

後述しますが、ブラウザ版のChatGPTは質問した内容が学習データとして使用されてしまうため、実際のコードを貼り付けて質問をする際にはAPIトークンを利用して質問をする手法を用いています。

注意点: APIを使用して質問するには課金が必要です。

実際の使用例です。

使い方としては、通常のChatGPTのようにVScodeの拡張パネルで質問を投げることもできますが、このGenie AIの特徴としては、ドラック&ドロップを行い、右クリックで聞きたい内容を選択することでコードについても質問を簡単に投げることができます。

インストールした時点で質問を投げられるものとしては、

• テストを追加するプロンプト

• コメントを追加するプロンプト

• 問題がないかを確認するプロンプト

• コードを完成させるプロンプト

• コードを最適化するプロンプト

• 問題を指摘するプロンプト

上記6つが設定されており、質問をすることができます。

また、インストールした直後では送信されるプロンプトが英語のため返答が英語で返ってきてしまいます。

日本語で回答してもらうために、プロンプトを日本語に置換しています。

最終的に私のsetting.jsonは下記のような設定になっています。

  "genieai.promptPrefix.addComments": "このコードにコメントを追加してください。",
  "genieai.promptPrefix.addTests": "このコードにテストを追加してください。",
  "genieai.promptPrefix.completeCode": "このコードを完成させてください。",
  "genieai.promptPrefix.explain": "このコードの解説をしてください。",
  "genieai.promptPrefix.optimize": "このコードをより最適化してください。",
  "genieai.promptPrefix.findProblems": "このコードで、問題があれば指摘をしてください。",
  "genieai.promptPrefix.customPrompt1-enabled": true,
  "genieai.promptPrefix.customPrompt1": "このコードの一部を別ファイルに切り出してください。切り出した後の元ファイルのコードと、新規ファイルのコードのみ表示してください。",
  "genieai.promptPrefix.customPrompt2-enabled": true,
  "genieai.promptPrefix.customPrompt2": "このコードのレビューをしてください。誤っている部分があれば指摘をし、修正したコードを提示してください。"

個人的には、カスタムプロンプトを使用してGithub Copilot Labsにもある機能のChunk機能をGenie AIでも行うプロンプトを実装してみました。

これ以外のショートカットのプロンプトを利用したい場合は、
[Ad-hoc prompt] を選択するとコードに対しての質問ができます。

セキュリティとしての観点

エンジニアとして気になるのがセキュリティとしての観点です。
個人開発のものであれば、学習データにされようがあまり気にしないかと思いますが、会社のコードが学習データに使用されると機密情報の漏洩に繋がってしまいます。

APIを利用することで、現段階では学習データには使用しないことが明記されています。

また、学習自体はされませんが、OpenAI側に保存ポリシーのもと30日間データが保存されているということも明記されています。
学習には使われないが、使用する際の通信自体は行われています。
このあたりは企業の情報セキュリティのポリシーによるため、会社のプロダクト開発で利用する際には確認をしておくと良いかもしれません。

ブラウザ版ChatGPTとGenie AIをどのように使い分けるか。

現在ブラウザ版ChatGPTを用いると、GPT-4と呼ばれる高い精度で質問を回答するAIモデルを利用することができます。
一方、Genie AIはGPT-3.5 turboと呼ばれる、精度がGPT-4より落ちるものの、スピード重視で回答をするモデルを使用することができます。

つまり、コード上で実装の大雑把な概要を知りたいときなどは、
Genie AIでスピード重視で質問に回答してもらった方がよく、
逆に精度重視で質問をしたいときはブラウザ版を使用した方が良いと言えるでしょう。

※GPT-4のモデルでAPIを申請が通れば、Genie AIでもGPT-4のモデルは使用することが可能です。

Github Copilot編

私はChatGPTに加えて、Github Copilotも利用しながら開発をしています。
Github Copilotとは、コードを書いていく中でコードの上下部分を読み取り、瞬時にコード補完をしてくれる拡張機能です。

現在私はGithub Copilot for Businessプランで利用しています。
(Github CopilotもChatGPT同様Open AI社のAIを利用したツールです)

実際に使用してみて思うこと

現段階のGithub Copilotは使用されているAIモデルが、ChatGPTよりも昔のAIモデルということもあり、精度はChatGPTよりは劣ります。

しかし、Reactの最初のコンポーネントを作成するときや、簡単なロジックのfunctionを作成するときなどは、瞬時にやりたいことを推測して補完をしてくれるため、全く使えないというわけではありません。

実際に使用してみた例です。

上記のGIFアニメーションでわかるように、
コメントで何をしたいか記述した上で、Github Copilotの補完機能のみでコードを書いてもらいましたが、
パッと見た感じでは問題なさそうなコードを生成してくれます。

Github Copilotで生成されたコードは、実際に実行できるかを確認することを忘れないようにしましょう。

Github Copilotの得意なところ

下記は実際にGithub Copilotを使用してみた上での所感になります。

• 基本的なテンプレート文章などは、前後の文などから推測して高い精度で補完できる。

• コメント文と、変数名であらかた何をしたいか推測して補完できる。

• 未使用のコンポーネントがあった際、推測してimport文を表示できる。

• テストコードを書く際には、通常コードより精度高く補完できる。

• 先頭にjp: や en: などをつけて聞くなど、翻訳に強い。

上記GIFアニメーションのように、瞬時に補完をしてもらえるため、キーボードを入力する回数自体も減らせて、効率化につながります。

Github Copilotを使用する際は、コメント駆動開発を意識してコードを書くことで、より真価を発揮してくれると私は考えています。

セキュリティとしての観点

現在私は「GitHub Copilot for Business」プランをカンリーのプロダクトで使用しています。
通常プランと異なり、ビジネス向けにセキュリティ周りの強化がされているプランになります。

懸念材料として、下記の記事を参考にいたしました。

• 学習に使用されないか？

ここでいうテレメトリと呼ばれるものは、簡潔にいうと学習データに使用するか？という意味です。
Businessプランでは、デフォルトで学習データに使用されないことが明記されています。
また、コード スニペット データと呼ばれる補完をするための付近のデータの読み取り自体も、Githubと通信は行われますがデータ自体はすぐに破棄されることも明記されています。

• 他者の著作物のコードを勝手に使用し、著作権の侵害をしてしまわないか？

現在、第三者から著作権侵害の申し立てをされた際のGitHubの立ち位置としては下記のようなものになっています。

つまり、GitHub Copilot側のフィルタリング機能をしっかりとつけた状態で使えば問題なさそうということでした。

現在あるフィルタリング機能は、パブリックに公開されているコードと一定数の文字数を超えて一致しないようにするという機能のみがついています。
詳しい設定については下記リンクをご参照ください。

※GitHub Copilot for Businessプランを使用している場合、Organization(会社単位)でのフィルタリング機能となっています。

Github Copilot Xについて

Githubは今年3/22に新たに「Github Copilot X」を発表しました。GPT-4のモデルを使用した新しいGithub Copilotが使えるとのことです。
他にも、音声認識を利用してコードを書いてくれる機能が追加されたり、CLI用の補助機能や、ドキュメントを読み取って書いてくれるツールなども登場するそうです。

現在はWaitListのため、まだ使用することはできません。

二つのツールを使ってみて

二つのツールについて説明をしてきましたが、お互い二つのツールの役割は違うため、それぞれ用途に分けて使うのが良いと考えています。

• GitHub Copilotを使用する時

  • コードを実際に手を動かして、修正する際の補佐としての役割

  • コードを書く際の基本となる形を書く際の補完機能

• ChatGPT(Genie AI)を使用する時

  • 既存コードの要約をして欲しいとき。

  • 新規コードを書く際の、走り出しの部分を書くとき。

個人的には、GitHub Copilotを使用しながらコードを書き進めていきながら、コード上でわからないときにGenie AIを使用する。
より精度高く質問をしたいときはブラウザ版のChatGPTでGPT-4モデルに質問をするというのが、現時点での一番効率の良い開発手法だと考えています。

今までは、Googleで検索するというスキルが基本的に求められていましたが、このようにAIツールをうまく使いこなせるかがこれからのエンジニアに求められるスキルにこれからは代替していくのではないでしょうか。

さいごに

いかがでしたでしょうか。

AIと共存したプログラマーになるには、常に最新のテクノロジーに触れて普段の業務の中でどのように活かすかを考え続けることが重要だと考えています。

その第一歩として、今回はChatGPT,GitHub Copilotの私が使用している方法について紹介させていただきました。

あくまで現時点で私がこのように活用しています。
という事例に過ぎないので、新しいツールや、より効率的な手法を模索し導入していくべきだと考えています。
この記事を見て、少しでもAIツールに興味を持っていただき導入の手助けになれたらと思います。

株式会社カンリーでは一緒に働く仲間を募集しています！カンリーのバリューに共感できる方、ちょっと話を聞いてみたいという方、ぜひご応募ください！