Slide 1
Slide 1 text
『AI時代のソリューション力』
AIを活用して問題解決する🌟
2023年話題になったAIツールを使ってみる🔥
AIQ 株式会社 まさぴょん🐱
Slide 2
Slide 2 text
目次
1. 私のLTのテーマ『AI時代のソリューション力』
2. ChatGPT・活用編
3. Cursor・活用編
4. GitHub Copilot活用編
5. その他の活用したいAIツール紹介
6. まとめ『新時代に向けて』
Slide 3
Slide 3 text
世はまさに、大AI時代🌟
「来るぞ新時代が！！！」
画像の出典：
『ワンピース』
Slide 4
Slide 4 text
課題に応じたAIツールを使っていこう🌟
よくわからんツール怖い。。。ぴえん🥺
とか言っている場合では、ありません！！
Slide 5
Slide 5 text
私のLTのテーマ『AIを活用した問題解決』
LTの目的：おすすめAIツールと、その使い方などを伝える🌟
1. AIによる問題解決が加速するのが、これからの『新時代』🌟
2. 今回のLTでは、2023年に話題になったAIツールから、興味があるも
のをとにかく使ってみました！
3. 知識のindexと興味を持ってもらえることを目指す🔥
Slide 6
Slide 6 text
ChatGPT編🌟
Slide 7
Slide 7 text
変換・Logicをお願いする
(プロンプトは、次のコメント & SrcCode)
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
回答のフォーマット指定プロンプト(JSON)
Slide 10
Slide 10 text
深津式プロンプトについて
● 深津式プロンプトのフォーマット
○ 命令, 制約条件, 入力(Input), 出力
(Output) の4つのパートで、プロンプトを
組み立てる。
○ 最適な回答を引き出すために4つの内
容をカスタマイズする。
Slide 11
Slide 11 text
プロンプト作成のポイント🌟
結局は、AIとの対話(コミュニケーション)
1. 何をしてもらいたいか、明確に示す。
○ 出力形式(Text, Code, Dataフォーマットなど)の明示など
2. 判断材料を渡す。
○ SampleCode, Table定義など
3. ChatGPTの人格を定義する。
○ どんな人格・役割(ペルソナ)なのか？
4. 制約条件を定義する。
○ 何をしてOK、何がNGなのか？
Slide 12
Slide 12 text
マルチモーダル機能も活用する🌟
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Markdown・プレビュー結果
Slide 15
Slide 15 text
Chrome拡張の使えるやつ紹介🌟
Slide 16
Slide 16 text
Web ChatGPT
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
AIQについて質問
1. Web Access のON/OFF可能
2. 出典を明示してくれます。
# ChatGPTとのやり取り Link
https://chat.openai.com/share/718b1a9d-4fcf-
45b3-bc6b-743312ffb191
Slide 19
Slide 19 text
ChatGPT・サイドバー
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
音声・自動テキスト変換機能(議事録向け)
Slide 22
Slide 22 text
【おまけ】Chrome Search Labs 機能
(Chrome 組み込み機能)
Slide 23
Slide 23 text
PluginでChat GPTをカスタムする🌟
Slide 24
Slide 24 text
『Web Pilot』
Web URLリンク
をChatGPTに渡
せるようになる
Plugin🌟
Slide 25
Slide 25 text
『Diagrams Show Me』
フロー図を作成できるようにするPlugin🌟
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
GPT Builderを使ってみる🌟
Slide 28
Slide 28 text
基本情報技術者試験のメンターGPTを作成🌟
GPT Builderでは、次のような8つの項目を設定できる🌟
1. アイコン（Icon）
2. GPTの名前（Name）
3. GPTの説明（Description）
4. GPTへの指示文・プロンプト（Instruction）
5. ユーザーの入力プロンプトの例（Conversation starters）
6. 参照ファイル（Knowledge）
7. 利用ツール（Capabilities）
8. 外部API（Action）
きほちゃんの記事：
https://zenn.dev/aiq_dev/articles/e0b1e45f291bec
Slide 29
Slide 29 text
Cursor編🌟
Slide 30
Slide 30 text
【基本的な使い方】
1. Command + K で、対話Windowを開く🌟
2. プロンプトを入力 & 実行
他にDocsなどのCursorならではの役立つ機
能があるが、後ほどCopilotとの比較にて紹
介します🔥
Cursorについて調査した内容をまとめたスク
ラップ：
https://zenn.dev/manase/scraps/eebfd43f91
d5b3
Slide 31
Slide 31 text
GitHub Copilot編🌟
Slide 32
Slide 32 text
Copilotのセットアップ・セキュリティ設定🌟
「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)
Slide 33
Slide 33 text
Copilotの特徴・すごさ🌟
1. 使い方はシンプルで、「コメントを書く = Copilotと対話する」
2. CopilotのCode自動補完(提案)機能が、圧倒的に開発速度をUpさせる🔥
3. Code説明のコメントを書く習慣がある人には、特に嬉しい🌟
○ コメントからCodeを自動補完(提案)してくれるから！
○ コメント駆動開発ができる！
4. Codeを書いた後にコメントを追加しようとすると、コメントも提案してくれる🙌
✨
控えめに言って、神ツール🔥
「Copilotはいいぞ🌟 Copilotのない開発にはもう戻れない💪🥺✨」
Slide 34
Slide 34 text
書いている途中に、
推論 -> 自動補完( Code提案 )が
実施される🌟
-> Codeを書くスピードが上がる
🔥
GitHub Copilot について
調査をまとめたスクラップ：
https://zenn.dev/manase/scraps/
18562ea7737358
Slide 35
Slide 35 text
Cursor VS GitHub Copilot🔥
Slide 36
Slide 36 text
Cursor VS GitHub Copilot🔥
両方ともいいAIツールだが、
Cursor特有の強みは、Docs機能！！
ライブラリのDocなどを学習させることができる🌟
詳細は、こちら(左の表の出典)を確認👀
https://zenn.dev/umi_mori/books/ai-code-editor-cursor
/viewer/how_to_use_docs
Copilotのコード自動補完(提案)機能が、
Copilotの圧倒的な強み🌟
1. 圧倒的・対話速度🔥
2. コメント書きながら、対話する🌟
Slide 37
Slide 37 text
Copilot VS Cursor の個人的な使い方・感想🌟
1. Cursor 内では、今のところ Copilotの拡張機能が機能しない。
○ ちゃんと調べてないけど、私の環境だけ？
2. CopilotのCode提案機能が、開発のスピードアップにすごく役立つ。
3. 基本は Copilotでこと足りる。
4. Cursorを使うのは、Docs機能で特定のライブラリについて学習させた上で
開発サポートしてもらいたい時など。
Slide 38
Slide 38 text
その他の活用したい
AIツール🌟
今回は、活用できず。。。🥺
Slide 39
Slide 39 text
Vercel v0🌟
Next.jsを開発したVercel社が開発
プロンプトでReact Componentを作
成できる
Web AI サービス🌟
React使いは、試してみてもいいか
も🔥
Slide 40
Slide 40 text
CodeRabbit🌟
CodeRabbitの2つの主要機能
1. PRの要約機能
● PRを作成した際にPRの要約が提供されます。
● この要約を読むことで、どんなファイルにどんな変更が加えられたかが明確になる。
2. AIによるレビュー
● Typoやエラーハンドリングの有無、デバッグ用のCodeが残っている、マジックナンバーなど、機械的に
判定できそうなところは基本的にすべて指摘してくれます。
費用は、従量課金：1営業日・5PRの会社で、Day 2,000円 -> 月換算で約4万円 (高い。。。)
CodeRabbitの調査スクラップ🌟：
https://zenn.dev/manase/scraps/66c0d7e376ea14
Slide 41
Slide 41 text
Relicx🌟 ~AIテストツール~
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
まとめ
新時代に向けて🌟
Slide 45
Slide 45 text
新時代でもエンジニアとして生き抜こう🌟
新時代でもエンジニアとして
生き抜くために、
新しく生まれたAI活用スキルも磨いて
いきましょう💪🥺✨