こんにちは、AIQ株式会社のWebエンジニアのまさぴょんです！
今回は、『AI時代のソリューション力 〜AIを活用して問題解決する〜』 2023年話題になったAIツールを使ってみる🌟
というテーマで、社内のAI・LTに登壇した際の資料と共に、AIツール関連のナレッジをまとめてご紹介します🐱
社内で、2/2にAIをテーマとしたLTをすることに！
AIQ 株式会社の社内AI LTイベントが発足されて、私たちITG(イノベーション推進)チームは、2024/2/2(金)に、AI LTを実施することとなりました。
各々が、AI・LTの準備を進める中、
欲張りな私は、2023年、話題になったAIツールを一通り使って、その特徴やメリット/デメリット、使い方のポイントなどを紹介するLTにするという方針を決めました。
今回のLTを迎える前の状況
ちなみに、今回のLTを迎える前の私のAIツールの活用状況は、次のような状況でした。
話題のGPT Builderや、Cursor、GitHub Copilotなども、まったく触っていないという嘆かわしい状況です。。。🥺
今回、AI・LTで取り扱った内容
そして、今回、AI・LTで取り扱った内容(LTに向けて、実際に使ってみたり、調査をしたりした)は、次のとおりです。
完成したスライド
そうして、できたのが次のスライドです🐱
この記事では、上記のスライドの説明内容を、文章として、残す。
また、社外の人にも学びを共有するために書きました。
私のLTのテーマ『AIを活用した問題解決』
AIによる問題解決が加速するのが、これからの『新時代』です。
「来るぞ、新時代が！」というより「もう来てます、新時代が！！」って感じです🥺
課題(Task)ごとに、その解決に特化したAIツールが、どんどん生まれています！
なので、自分を取り巻く課題(Task)を解決するAIツールは、
どんどん使って、試して、効率をUpさせて行った方がいろいろな面で、楽になると思います。
そこで、今回のLTでは、2023年に話題になったAIツールから、興味があるものをとにかく使ってみました！
LTスライドや、この記事を読んでいただいている皆さんには、AIツールの知識のindexや、興味を持ってもらえたら嬉しいです🌟
ChatGPT活用編
まずは、みんな大好きChatGPTの活用方法からご紹介します。
深津式プロンプトについて
まず、有名なプロンプトのフォーマットについて、ご紹介します。
深津式プロンプトは、次の4つのパートで、プロンプトを組み立てます🌟
- 命令: LLMに対する人格(ペルソナ)設定 & 指示
- どんな人格・役割(ペルソナ)なのか？
- どんな使命(ミッション)を持っているのか？
- どんな課題(Task)を解決するのか？
- 制約条件: ルール(制約)を定義する,
- 何をしてOK、何がNGなのか？
- 入力(Input): 判断材料・データを渡す
- 出力(Output): 出力フォーマットの指定など
プロンプトのフォーマットを提示すると、次のような形です。
# 命令書:
あなたは{プロの編集者}です。
以下の制約条件と入力文をもとに{最高の要約}を出力してください。
# 制約条件:
•文字数は 300 文字程度。
•小学生にもわかりやすく。
•重要なキーワードを取り残さない。
•文章を簡潔に。
# 入力文：
{入力文章}
# 出力文：
最適な回答を引き出すために4つの内容を必要に応じて、カスタマイズすることが重要です。
プロンプト作成のポイント🌟
深津式プロンプトは、最適なフォーマットとして活用すべきですが、
より大事な本質を意識して、プロンプトを作成する必要があります。
その、プロンプト作成の本質は、 プロンプトは、AIとの対話(コミュニケーション) であるということです。
つまり、人と話すのと一緒です。
判断材料や、何をすればいいのか、明確に提示してあげないと、その人は、質問にどう答えたらいいかわからないわけです。
プロンプトは、AIとの対話(コミュニケーション) であるという本質を意識した上で、
私がプロンプトを作成しているときに意識しているポイントをまとめると、次のような感じです。
- 何をしてもらいたいか、明確に示す。
- どんな課題を解決してほしいかの明示
- 出力形式(Text, Code, Dataフォーマットなど)の明示
- 判断材料を渡す。
- SampleCode, Table定義など
- ChatGPTの人格を定義する。
- どんな人格・役割(ペルソナ)なのか？
- 制約条件(ルール)を定義する。
- 何をしてOK、何がNGなのか？
必ず深津式プロンプトのフォーマットにしなくても、OK🌟
最初に、深津式プロンプトのフォーマットを紹介しましたが、
これは、1つのフォーマットであって、必ず深津式プロンプトのフォーマットにしなくてOKです！
(判断の材料があれば、ChatGPTは十分、仕事をしてくれます)
例えば、次のような「コメント & SrcCode」だけでもプロンプトになります👀
(Codeの変換LogicをChatGPTに依頼している)
// 次の list を objectList にのように変換するには、どうしますか？
const list = [
["id", "participant", "affiliation"],
[1, "ロボたま", "エンジニア"],
[2, "まりたま", "エンジニア"],
];
const objectList = [
{ id: 1, participant: "ロボたま", affiliation: "エンジニア" },
{ id: 2, participant: "まりたま", affiliation: "エンジニア" },
{ id: 3, participant: "白桃", affiliation: "営業部" },
];
上記のプロンプトに対して、次のような回答が返ってきました。
回答のフォーマット指定プロンプト(JSON)を指定する
LangChainなどを使って、プログラム内で、LLMと対話する場合、JSONなどのプログラムが扱いやすいフォーマットで、回答をほしい場合があると思います。
そういった時も、次のように、回答のフォーマットをJSONと指定すれば、ほぼ100%、JSONで返してくれます。
### 1. ChatGPTの設定(人格)・プロンプト作成 ###
# 1-1. ChatGPTの設定(人格)・プロンプト
prompt = '''
あなたは、日本の会社に詳しいChatbotとして、質問に対して、必ずJSONの形で回答します。
また、あなたは、以下の制約条件と回答条件を厳密に守る必要があります。
制約条件:
* あなたは、日本の会社に詳しいChatbotで、必ずJSONの形で回答します。
'''
マルチモーダル機能を活用する🌟
GPT V4から登場したマルチモーダル機能も、とても役立つ機能です。
例えば、次のように、画像を渡して、画像と同じ内容のMarkdown Tableを作成してくださいと依頼を投げます。
すると、画像と同じ内容のMarkdown Tableを作ってくれたので、プレビューをしてみると、いい感じです。
PluginでChat GPTをカスタムする🌟
Chat GPTには、Plugin Storeがあり、そこでPluginを追加して、カスタムすることができます。
今回は、数ある中から、2つご紹介します。
Web Pilot
Web Pilotは、URLリンクをChatGPTに渡せるようになるPluginです🌟
次のように、URLリンクの中身の説明などもできるようになります。
Diagrams Show Me
Diagrams Show Meは、フロー図を作成できるようにするPluginです🌟
X(Twitter)のbotを作成するプロジェクトのフロー図を作ってもらった結果は、次のとおりです👀
GPT Builderを使ってみる🌟
GPT Builderの使い方、My GPTsの作り方に関しては、すでに記事にしてあるので、
詳細が気になる方は、こちらの記事をCheckしてみてください。
ここでは、GPT Builderの概要と、ポイントを説明します。
GPT Builderで作ることのできる GPTs とは 「特定のタスクに特化するようにカスタマイズされたChatGPTのモデルの総称」 です。
GPT Builderでは、次のような8つの項目を設定することができます。
- アイコン（Icon）
- GPTの名前（Name）
- GPTの説明（Description）
- GPTへの指示文・プロンプト（Instruction）
- ユーザーの入力プロンプトの例（Conversation starters）
- 参照ファイル（Knowledge）
- 利用ツール（Capabilities）
- 外部API（Action）
GPT系のChrome拡張の使えるやつ
ここからは、GPT系のChrome拡張の使えるやつをご紹介します。
Web ChatGPT
Web ChatGPTは、ChatGPTの弱点であるリアルタイムの情報を学習できていない点を補強する
Chrome専用の拡張機能です。
例えば、Web ChatGPTをONにした状態で、次のように、ChatGPTで質問をすると、
リアルタイムの情報を学んだ上で、参照したSrcのリンクまで教えてくれます。
普通に検索する時にも、SideBarとして、現れてくれます🌟
ChatGPT・サイドバー
ChatGPT・サイドバーは、Webサイトを閲覧しながら、ChatGPTと対話できるようにしてくれるChrome専用の拡張機能です。
例えば、Web APIのページにいるときに、SideBarを開くと、そのWeb APIページに関する質問などをChatGPTとそのままできます。
Chrome Search Labs 機能 (Chrome 組み込み機能)
最近、試験導入されている Chromeの組み込み機能として、
Chrome Search Labs なんてものもあったりします。
これは、Google検索を実行すると、検索結果とは別に、生成AIによる回答も出力されるという機能です。
Cursor活用編
続いて、話題になった、AIエディター Cursorについてもご紹介します。
Cursorの基本的な使い方は、次のとおり。
【基本的な使い方】
- Command + K で、対話Windowを開く🌟
- プロンプトを入力 & 実行
Cursorは、多機能でいろいろな機能が備わっていますが、特筆すべきは、Docs機能というものになります。
このDocs機能は、ライブラリのDocumentをCusorのAIに学習させることができる機能で、そのDocsを学習した上で、Codeを提案してくれるので、情報の少ないライブラリに特化した実装をする時に役立ちそうです。
Cursorについて調査した内容をまとめたスクラップ：
GitHub Copilot活用編
ここからは、今回、使ったAIツールの中で、私イチオシのGitHub Copilotについてご紹介します。
これは、控えめに言って、神ツールです🔥
GitHub Copilot = ジョセフ・ジョースター？
GitHub Copilotの使い方はシンプルで、 「コメントを書く = Copilotと対話する」 という感覚で使えます。
Copilotは、コメントやSrcCodeの状況から「あなたが次の書きたいCodeは、これだろ？」って感じで、
Codeの自動補完(提案)をしてくれます。マジで惚れます。。。ぽっ///
書いている途中に 「推論 -> 自動補完(Code提案)」 が実施されるので、
Codeを書くスピードが、圧倒的に上がります。
画像の出典：『ジョジョの奇妙な冒険』
GitHub Copilotでコメント駆動開発🌟
GitHub Copilotは、Code説明のコメントを書く習慣がある人には、特に嬉しいと思っています。
なぜなら、コメントからCodeを自動補完(提案)してくれるからです。
つまり、コメントの鬼である私が所望する 「コメント駆動開発」ができる！ ができる点でも、GitHub Copilotは優秀なわけです。。。🥺
もう、話さないぞ、Copilot！！
なんなら、Codeを書いた後にコメントを追加しようとすると、コメントも提案してくれる。。。🥺
できるやつすぎるぞ、Copilot！！
VSCode ✖️ GitHub Copilot 初期Set Up とセキュリティ設定
会社のプロジェクトのCodeを読ませる場合は、Code情報の流出など、セキュリティ面が心配だと思います。
そこで、設定で「自分のコードを製品の改善に利用することを許可するか(On / Off)」というものがあるので、これをOffにしておきます。
「GitHub Copilot」の開始手順は、次のとおりです。
(1) 「GitHub」アカウントを持ってない人は、アカウントを準備。
(2)「GitHub Copilot」のサイトで、「GetHub Copilot」を有効化。
以下の2つの設定を聞かれるので設定します。・Suggestions matching public code
公開コードに一致する提案を許可するか (Allow / Block)
・Allow GitHub to use my code snippets for product improvements
自分のコードを製品の改善に利用することを許可するか(On / Off)
GitHub Copilot の使い方
GitHub Copilot について調査をまとめたスクラップ：
Cursor VS GitHub Copilot🔥
それでは、おまちかねの『Cursor VS GitHub Copilot🔥』について、見ていきましょう。
AIが、Editor上で、Codeのサポートをする点で、Cursor と GitHub Copilotは非常に似ていますが、
機能として、「できること/できないこと」があります。
それぞれの機能の比較表をまとめてくれている記事があったので、そこから比較表を引用します👀✨
| Feature | Cursor | GitHub Copilot |
|---|---|---|
| Command K | あり | あり |
| Chat | あり | あり |
| @ Symbols | あり | あり |
| Codebase Answers | あり | なし |
| Docs | あり | なし |
| Auto-Debug | あり | なし |
| Fix Lints | あり | あり |
| コード自動補完 | なし | あり |
| プロジェクト生成 | なし | あり |
両方とも、それぞれの強みを持ったいいAIツールですが、
個人的に、それぞれのツールには、次のような特有の強みがあると考えています。
比較結果・まとめ
Cursor派には、申し訳ないですが、私は圧倒的にCopilotの方が開発生産性を上げてくれると感じました🌟
理由は単純で、CopilotのCode自動補完(提案)機能が、開発のスピードアップに、すごく役立つからです🔥
CopilotのCode自動補完(提案)機能のスピード感に慣れると、
CursorでいちいちCommand + Kするのが、めちゃくちゃ遅く感じます。。。🥺
Vercel v0活用編
Next.jsを開発したVercel社が開発した、React Component
プロンプトや画像から、React Componentを作成できるWeb AI サービスが、『v0』です🌟
- 作りたいReact Componentに関する具体的な指示をプロンプトで表現して作成してもらう。
- FigmaでデザインしたMockの画像をUploadして、React Componentで表現してもらう。
- 気に入ったUIデザインの画像をUploadして、React Component化してもらう。
などの使い方が考えられます。
React使いには、嬉しいAIツールとなっております🙌
CodeRabbit: 自動Code Review AIツール
CodeRabbitの2つの主要機能
CodeRabbitには、次の2つの主要機能があります。
- PRの要約機能
- PRを作成した際のトップコメントに要約が提供されます。
- この要約を読むことで、どんなファイルにどんな変更が加えられたかが明確になり、非エンジニアでもどのような機能が作成されたのかわかりやすくなります。
- AIによるレビュー
- Typoやエラーハンドリングの有無、デバッグ用のPrintが残っている、マジックナンバーなど、機械的に判定できそうなところは基本的にすべて指摘してくれます。
今回のCodeRabbitの調査スクラップは、次のとおりです🌟
CodeRabbitに関しては、こちらの記事が詳しく説明してくれています。
Relicx: E2Eテストの自動生成・自動実行AIツール
Relicxは、プロンプトを出すことでE2Eテストを作成、実行してくれるAIです。
今までのE2Eテストでは、SeleniumやPlaywright, Cypressなどでコードで書いてテストを作成しますが、Relicxの場合は、プロンプトでテストの作成や実行ができる、対話型のテストツールです。
Cypressで、1日ぐらいかかるテスト構築も、1時間でできると言っております✨
(おまけ) Hacker AI: 脆弱性診断 AIツール
今回のAI・LTでは、紹介していませんが、この『Hacker AI』 (脆弱性診断 AIツール)も気になっています。
Hacker AIは、プログラムに含まれる脆弱性を診断してくれるAIツールで、登録等は必要なく、診断してほしいコードをzipで固め、サイトからアップロードするだけで利用することができるようです。
『新時代に向けて💪🥺🌟』のメッセージ
AI時代の始まりだとか、AI元年とか言われたのが、2023年でした。
ChatGPTの登場, 生成AIと対話しながら開発できるEditorのCursorの登場, GitHub Copilotによる開発体験の向上など、その他多くのLLM・生成AIを基盤としたAIツールが登場しました。
ただでさえ、技術の進化スピードが速いエンジニアリング界隈のスピードがさらに上がるのは、明白だと思います。
次第に、ソフトウェアエンジニアリングの領域もAIによる自動化の範囲が広がっていくでしょう。
新時代でも、AIと共存して、エンジニアとして生き抜こう💪🥺🌟
新時代でもエンジニアとして生き抜くために、
新しく生まれたAIをどんどん活用するスキルも磨いていきましょう💪🥺✨
注意事項
この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。
求む、冒険者！
AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨
詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。
参考・引用
AIQ 株式会社 に所属するエンジニアが技術情報をお届けします。 ※ AIQ 株式会社 社員による個人の見解であり、所属する組織の公式見解ではありません。 Wantedly: wantedly.com/companies/aiqlab
Discussion