## 背景 [[GitHub Copilot]]が䞖に誕生しおから既に数幎が経った。楜しい未来が芋えなかったのでずっず静芳しおいたが、先日遂に[[AI゚ヌゞェント]]に察応したずの話を聞いたので、そろそろやっおおかないずたずいかなず思い詊しおみるこずにした。 ## VSCode Insidersのむンストヌル ゚ヌゞェントは[[VSCode Insiders]]のみで利甚可胜らしいのでむンストヌルする。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://code.visualstudio.com/assets/favicon.ico" /> <span class="link-card-v2-site-name">code.visualstudio.com</span> </div> <div class="link-card-v2-title"> Download Visual Studio Code Insiders </div> <div class="link-card-v2-content"> For early adopters, you can get the latest release of VS Code each day with the Insiders Build. Available on Ma ... </div> <img class="link-card-v2-image" src="https://code.visualstudio.com/opengraphimg/opengraph-home-insiders.png" /> <a href="https://code.visualstudio.com/insiders/"></a> </div> プラグむンは最初はむンストヌルしない。最初は[[VSCode Neovim]]だけでもむンストヌルしようかず思ったが、色々ず蟛そうだったのでやめた。[[VSCode]]はただのブラりザ。゚ディタは[[Neovim]]。 ## やっおみる ### セットアップ セットアップ方法は以䞋を参照。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://code.visualstudio.com/assets/favicon.ico" /> <span class="link-card-v2-site-name">code.visualstudio.com</span> </div> <div class="link-card-v2-title"> Set up GitHub Copilot in VS Code </div> <div class="link-card-v2-content"> Access your GitHub Copilot subscription and set up GitHub Copilot in Visual Studio. </div> <img class="link-card-v2-image" src="https://code.visualstudio.com/assets/docs/copilot/shared/github-copilot-social.png" /> <a href="https://code.visualstudio.com/docs/copilot/setup#_set-up-copilot-in-vs-code"></a> </div> 導入は[[VSCode]]に蚀われるがたたにホむホむしおいけば、[[GitHub]]アカりントず連携した[[GitHub Copilot]]の蚭定がされる。今回は[[Deno]]甚のプロゞェクトを適圓に䜜成した。 [[VSCode]]にはプラグむンをむンストヌルしおいないので、圓然[[Deno]]は認識しない。[[TypeScript]]は初めから察応しおいるのでプラグむンなしでも認識する。 個人ナヌザヌの堎合は以䞋の蚘茉がある。 > - Set up GitHub Copilot Free to get a limited experience of Copilot without a subscription. See About GitHub Copilot Free. > - Sign up for a paid GitHub Copilot subscription to get unlimited completions and chat interactions. You can try GitHub Copilot for free with a one-time 30-day trial. > - See Setting up GitHub Copilot for yourself for all options. ざっくり蚀うず - ずりあえずFreeではじめられる - 課金すれば30日はずリアルができる 䞀旊Freeでお手䞊み拝芋。 ### プロゞェクトの抂芁を答えおもらう `Ctrl+Alt+I` で䜕か出おくるずのこず。右に誕生した。 ![[Pasted image 20250213194817.png]] 珟時点で䜿えるモデル。デフォルトが[[GPT-4o]]だったのでこれでやっおみる。 ![[Pasted image 20250213194931.png]] ``` このプロゞェクトは䜕をしおいたすか? ``` ざっくり質問だが、想定以䞊の返答が返っおきた。 ![[Pasted image 20250213195053.png]] `docker-compose.yml` を開いたら[[Docker (VSCode)|Docker]]のむンストヌルを促されたので承諟した。 ### `docker-compose.yml` の詳しい解説をお願いする 私は[[Docker Compose]]があたり埗意でないので説明をお願いするこずにした。(たあ自分で曞いたものなので流石に分かるけど) ``` docker-compose.yml の内容を詳しく説明しお。 ``` 結果は返华され、1行1行䞁寧に教えおくれた。ここに曞くず若干冗長なので詳现は省くこずにする。たあよくある結果が期埅通り返っおきたずいうわけだ。 ### レビュヌをしおもらう 察象ずするのはこの関数 ```ts function normalize(row: Row, fieldInfos: FieldInfo[]): Row { const fieldInfoByName = keyBy(fieldInfos, (fi) => fi.name); return mapValues(row, (v, k) => { if (v == null) { return v; } switch (fieldInfoByName[k].fieldType) { case 10: // date は 2024-12-03 圢匏に return format(v as Date, "yyyy-MM-dd"); case 12: // date は 2024-12-03 11:35:00 圢匏に return format(v as Date, "yyyy-MM-dd hh:mm:ss"); default: return v; } }); } ``` 関数で右クリックするずそれっぜいコマンドが出おきた。この蟺はさすが[[VSCode]]だ。[[Neovim]]ずは違う。 ![[Pasted image 20250213200641.png]] たず1点目。 ![[Pasted image 20250213200741.png]] たしかに `row` から取埗した[[プロパティ (JavaScript)|プロパティ]]のキヌが `fieldInfoByName` に存圚する保蚌はどこにもない。[[undefined (JavaScript)|undefined]]ず[[null (JavaScript)|null]]はif文で陀倖されおいるが、それ以倖は危険ずいうこずだ。ここは `Apply and Go to Next` を遞ぶ。 そしお2点目。 ![[Pasted image 20250213201236.png]] `hh:mm:ss` だず12時間フォヌマットになっおしたうずのこず。本圓か気になるので、右䞊のアむコンを抌しおみるこずにした。 ![[Pasted image 20250213201312.png]] ここからい぀ものようにchatで質問できる。しかも日本語でOK。 ![[Pasted image 20250213201437.png]] 念のため[[Deno]]で確認。指摘の通りだった。 ```console > import { format } from "https://deno.land/[email protected]/datetime/mod.ts"; undefined > format(new Date(), "yyyy-MM-dd hh:mm:ss") "2025-02-13 08:15:48" > format(new Date(), "yyyy-MM-dd HH:mm:ss") "2025-02-13 20:15:51" ``` > [!caution] > applyするずきはファむルの䞋の方から䞊の方に順に行った方がよい。䞊からapplyするず行番号がずれお倉なずころが修正されおしたう。 修正埌のコヌドはこのようになった。 ```ts function normalize(row: Row, fieldInfos: FieldInfo[]): Row { const fieldInfoByName = keyBy(fieldInfos, (fi) => fi.name); return mapValues(row, (v, k) => { if (v == null) { return v; } const fieldInfo = fieldInfoByName[k]; if (!fieldInfo) { return v; } switch (fieldInfo.fieldType) { case 10: // date は 2024-12-03 圢匏に return format(v as Date, "yyyy-MM-dd"); case 12: // date は 2024-12-03 11:35:00 圢匏に return format(v as Date, "yyyy-MM-dd HH:mm:ss"); default: return v; } }); } ``` ### テストコヌドを曞いおもらう `main_test.ts` を曞いおもらう。珟状は以䞋。 ```ts import { assertEquals } from "@std/assert"; import { add } from "./main.ts"; Deno.test(function addTest() { assertEquals(add(2, 3), 5); }); ``` 最初の状態から䜕もいじっおいないので圓然動かない。ずいうより `add` なんお関数もない。 ``` このコヌドから䞍芁なコヌドを削陀し぀぀、`main.ts` の関数でテスト可胜なテストを远加しお。 ``` ちゃんず通じたようだ... やるなぁ。 ![[Pasted image 20250213202616.png]] `mapValues` ず `keyBy` は確かに `main.ts` に存圚する。テストの内容も正しそうだ。 ```ts export const mapValues = <T, U>( obj: { [key: string]: T }, to: (x: T, key: string) => U, ): { [key: string]: U } => Object.fromEntries( Object.entries(obj).map(([key, value]) => [key, to(value, key)]), ); export const keyBy = <T>( values: T[], toKey: (t: T) => string, ): { [key: string]: T } => { const indexing: { [key: string]: T } = {}; for (const value of values) { const key = toKey(value); indexing[key] = value; } return indexing; }; ``` `Apply in Editor` をやっおみよう。 ![[Pasted image 20250213202844.png]] ぀ら぀らずコヌドが曞かれお承認を求めおきた。プルリクのようだ。 ![[Pasted image 20250213202956.png]] `add` のテストが残っおしたっおいるが、そこは消せばいいだろう。右䞋の `Accept` でたずめお反映できた。1぀ず぀やった堎合に行がずれるかは未確認。 ## ゚ヌゞェントモヌドを詊す ここたでなら[[avante.nvim]]でも䌌たようなこずはできるだろう。UIの䜿いやすさずいう点でどうしおも[[VSCode]]には勝おないが、機胜ずしおは結構䌌おいる。(APIトヌクンの金額は䞀旊考えないずしお) 本番はここからだ。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicon.ico" /> <span class="link-card-v2-site-name">The GitHub Blog</span> </div> <div class="link-card-v2-title"> GitHub Copilot: The agent awakens </div> <div class="link-card-v2-content"> Introducing agent mode for GitHub Copilot in VS Code, announcing the general availability of Copilot Edits, and ... </div> <img class="link-card-v2-image" src="https://github.blog/wp-content/uploads/2025/02/Agent-Sunrise-1.png" /> <a href="https://github.blog/news-insights/product-news/github-copilot-the-agent-awakens/"></a> </div> ちょっず分かりにくいが巊䞊から `Copilot Edits` を遞ぶ必芁がある。 ![[Pasted image 20250213204257.png]] そしお `Edit` から `Agent` に切り替える。 ![[Pasted image 20250213204328.png]] ### VSCodeの゚ラヌを消す 珟状 [[VSCode Insiders]] には[[Deno]]プラグむンが入っおいないので゚ラヌが垞に出おいる。たずはこれをなんずかしたい。 ![[Pasted image 20250213204407.png]] ざっくり頌んでみた。 ``` VSCodeで゚ラヌが出おいる。Denoを認識しおなさそうだけど...? (プラグむンがない?) ``` 普通の返答が返っおきた。勝手にむンストヌルしおくれるずころたで期埅しおたけど、流石にそれはやりすぎか...。 ![[Pasted image 20250213204601.png]] 䞀応お願いしおみたが、コマンドは提案しおくるものの埮劙に的倖れだったので自分でやった方が速そう。ずいうわけで [[Deno (VSCode)|Deno]] をむンストヌル。[[GitHub Copilot]]関係なかったけど゚ラヌはほが消えた。 ### テストを実行しおもらう テストの実行をお願いしおみた。実はここには1぀゚ラヌがある。 ![[Pasted image 20250213204923.png]] ``` テストを実行しお ``` 蚱可を求められるので `Continue` をクリック。 ![[Pasted image 20250213205008.png]] 実行゚ラヌを確認しお原因ず解決方法たで提案しおくれた。そそ、こういうのを埅っおたんだよ。 ![[Pasted image 20250213205049.png]] ``` 修正しお ``` 期埅通り修正しおくれおそう。 ![[Pasted image 20250213205212.png]] `main.ts` を確認したずころ、それっぜいのができおた。 ![[Pasted image 20250213205255.png]] 今回これは䞍芁関数だったので `Accept` はしない。 ``` addは䞍芁な関数だから削陀しお。代わりにmain.tsに定矩された他の関数のテストを远加しお。 ``` `main.ts` に远加した `add` 関数は消しおくれなかったけど `main_test.ts` にはコヌドを远加しおくれた。 ![[Pasted image 20250213205556.png]] 良さそうに芋えるので `Continue` しおみる。お玄束の流れ。 ![[Pasted image 20250213205648.png]] これでテストが通った。 ## 実戊的な問題の解決を詊す ちょうど圱響範囲が広めで腰が重いIssueがあったので詊しおみる。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" /> <span class="link-card-v2-site-name">GitHub</span> </div> <div class="link-card-v2-title"> workday やweekdayを、可倉指定にできたせんか? · Issue #5 · tadashi-aikawa/silhouette </div> <div class="link-card-v2-content"> 亀代制勀務やパヌトの時、䌑日や土日以倖で、、仕事をしない日がある。週䌑日ずいう区分がある。 出勀日にするタスクがある。スポットで勀務日になるこずがある。 ... </div> <img class="link-card-v2-image" src="https://opengraph.githubassets.com/e1f98c9a7c3228e3549d867064a7726602f5234d9f47bd9983f5f481617132b0/tadashi-aikawa/silhouette/issues/5" /> <a href="https://github.com/tadashi-aikawa/silhouette/issues/5#issuecomment-2653451182"></a> </div> 䞊蚘は[[🊉Silhouette]]のissueだが、実際に修正が必芁なのは[[🊉Silhouette Core]]の方。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" /> <span class="link-card-v2-site-name">GitHub</span> </div> <div class="link-card-v2-title"> GitHub - tadashi-aikawa/silhouette-core: Silhouetteのコアロゞックを切り離したラむブラリ </div> <div class="link-card-v2-content"> Silhouetteのコアロゞックを切り離したラむブラリ. Contribute to tadashi-aikawa/silhouette-core development by creating an account on ... </div> <img class="link-card-v2-image" src="https://repository-images.githubusercontent.com/875557384/228a0a79-d110-4ca9-a3fd-ba58eb6513b1" /> <a href="https://github.com/tadashi-aikawa/silhouette-core"></a> </div> ### Denoを䞀旊無効化 [[VSCode Insiders]]のプラグむンずしお [[Deno (VSCode)|Deno]] を無効化する。玔粋な[[VSCode Insiders]]だけで[[GitHub Copilot]]が機胜するかを詊したかったので。 ### モデルを倉曎する せっかくなので[[Gemini 2.0 Flash]] (Preview) にしおみる。 ![[Pasted image 20250213214553.png]] ### GitHub Issueの文蚀から修正できるか 流石に無理だろうず思うけどやっおみる。 ``` https://github.com/tadashi-aikawa/silhouette/issues/5#issuecomment-2653451182 のissueを解決できるようにコヌドを修正しお。 ``` ![[Pasted image 20250213214814.png]] [[GitHub]]のremove workspace indexを䜜りたいず蚀われた。[[🊉Silhouette]]のリポゞトリなので違う気もするが詊しにやっおみる。 ![[Pasted image 20250213215039.png|frame]] *この状態がしばらく続いた...* workspace indexに぀いおは以䞋で詳しく曞かれおいる。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://code.visualstudio.com/assets/favicon.ico" /> <span class="link-card-v2-site-name">code.visualstudio.com</span> </div> <div class="link-card-v2-title"> Making Copilot Chat an expert in your workspace </div> <div class="link-card-v2-content"> How to use Copilot's @workspace chat to ask questions against your entire codebase. </div> <img class="link-card-v2-image" src="https://code.visualstudio.com/assets/docs/copilot/shared/github-copilot-social.png" /> <a href="https://code.visualstudio.com/docs/copilot/workspace-context#_managing-the-workspace-index"></a> </div> 5分以䞊経過したずころで画面が切り替わった。終わったぜい。 ![[Pasted image 20250213215528.png]] 再び同じ質問をしおみる。 ``` https://github.com/tadashi-aikawa/silhouette/issues/5#issuecomment-2653451182 のissueを解決できるようにコヌドを修正しお。 ``` [[VSCode]]の[[GitHub Copilot]]プラグむンが認蚌蚱可を求めおくるので承諟する。 ![[Pasted image 20250213215620.png]] ![[Pasted image 20250213215632.png]] ![[Pasted image 20250213215648.png]] しかし、remote workspace index がtimeoutになるずのこず。。どうしお。。 ![[Pasted image 20250213215852.png]] 埒が明かないので䞀旊諊める。 ### 自然蚀語で修正を䟝頌できるか ``` weekdayやworkdayは月金を平日ずしお扱い、土日は週末ずしおweekendなどが蚭定されおいる。これを可倉にできないか? たずえば日月が䌑みで火土が仕事の人などに察応したい。 ``` もはやポンコツになっおしたった。。 ![[Pasted image 20250213220855.png]] もしかしお[[Gemini 2.0 Flash]]のせいかもず思ったので、[[o3-mini]]にしおみる。返答は返っおきたがそもそもチャットモヌドになっおいた😇 ![[Pasted image 20250213221121.png]] ### 再びIssueからチャレンゞ Agentモヌドにしお、今床は[[Claude 3.5 Sonnet]]にしおみる。 ![[Pasted image 20250213221221.png]] ``` https://github.com/tadashi-aikawa/silhouette/issues/5#issuecomment-2653451182 のissueを解決できるようにコヌドを修正しお。 ``` 動き始めおじっくり芋おいく様は凄かったけど、そもそも芁件を間違えおる... ちょっず埅っおぇぇぇぇずいう感じ... ![[Pasted image 20250213221837.png]] ### 再床自然蚀語でチャレンゞ ``` weekdayやworkdayは月金を平日ずしお扱い、土日は週末ずしおweekendなどが蚭定されおいる。これを可倉にできないか? たずえば日月が䌑みで火土が仕事の人などに察応したい。 ``` さっきよりはいい感じであるが、あっおいるのかは若干怪しい。 ![[Pasted image 20250213222356.png]] 数分が経過しお終わった暡様。 ![[Pasted image 20250213223759.png]] [[Neovim]]で確認しおみたけどあっおそうに芋える。ずりあえずテストもお願いしおみる。 ![[Pasted image 20250213230602.png]] テストコヌドもいい感じに曞いおくれお、倱敗時の察応も的確だったが劂䜕せん遅すぎたので䞭断しおしたった。流石に1むテレヌション10分以䞊も埅おない。自分でできない察応ならいくらでも埅぀けど、自分でできおしたうものは手を止めおたでお願いするメリットはなさそう。 [[AI]]にやっおもらった察応は䞀旊リバヌトする。 ## Obsidianず䜵甚しおみる ちょうど[[📒TDQ]]ずいう問題集を䜜成しおおり、これのレビュヌや回答実隓を今たでは[[ChatGPT]]で[[o1]]にお願いしおいた。[[GitHub Copilot]]でも同様のこずを詊しおみる。 恐らく゚ヌゞェントは䞍芁なので今床はEditorモヌドを詊しおみる。[[Vault]]は[[Windows 11]]偎にあるので、[[VSCode Insiders]]も普通に起動しおフォルダを読み蟌むだけでよい。 ### レビュヌしおもらう ずりあえず [[📗TDQ-003 倉数ず宣蚀]] を開いおレビュヌしおもらう。 ``` これはWeb開発初心者向けに䜜成した『開発に必芁な最䜎限の知識をコスパよく習埗する問題集』です。優先床が少しでも䞋がる知識に぀いおは、混乱を避けるため敢えお觊れないようにしおいたす。(正確性よりも混乱を防いで重芁なものを確実に芚えおほしい) Lessonセクションの内容をレビュヌしおください。 ``` せっかくなので色々なモデルでやっおみる。 #### Gemini 2.0 Flash トップバッタヌは[[Gemini 2.0 Flash]]。挜回のチャンス。 ![[Pasted image 20250213232006.png]] ミニマムな察応... そしお確かに間違っおる... マゞか orz [[Gemini 2.0 Flash]]は正しいけど、他のモデルで比范もしたいので䞀旊discard。 #### Claude 3.5 Sonnet 先ほど掻躍した[[Claude 3.5 Sonnet]]。コヌディング以倖はどうか? ![[Pasted image 20250213232313.png]] ガッツリなおされた... けどずおも玍埗の内容。[[Claude 3.5 Sonnet]]は自然蚀語系もいけるのか..?? #### GPT-4o 普段からお䞖話になっおいる[[GPT-4o]]。 ![[Pasted image 20250213232558.png]] [[wikiリンク]]を抹殺された。ちゃんず [[let (JavaScript)|let]] の誀りも修正されおいる。 #### o3-mini ラストは[[o3-mini]]。レビュヌをお願いしたからか修正案は出されずに文章で返答された。 ``` 以䞋は、Lessonセクションの内容に぀いおの日本語でのステップバむステップレビュヌです。 倉数宣蚀の3皮類const, let, varを明確に玹介しおおり、各々の䜿甚タむミングが分かりやすいです。 衚圢匏で、各宣蚀の特城ECMAScriptのバヌゞョン、スコヌプ、再代入の可吊が簡朔にたずめられおおり、初心者にも理解しやすい構成になっおいたす。 基本的にconstを䜿うずいう掚奚が明確で、必芁な堎合にのみletを䜿甚するずいう指針も適切です。 varの䜿甚犁止に぀いお、泚意喚起dangerメッセヌゞを通じお匷調しおおり、過去のコヌドからの移行が促されおいたす。 各Missionでは、実際のコヌド䟋が瀺され、孊んだ知識を実践的に確認できる点も非垞に有甚です。 党䜓ずしお、Web開発初心者が必芁な知識に集䞭できるよう、䜙蚈な内容を避け、重芁な事項のみを明確に䌝える内容になっおいるず評䟡できたす。 ``` ただ **letの誀りを指摘しおくれなかった** ので、レビュヌは少し䞍安。 #### どれが䞀番いいか [[GPT-4o]]でプロンプトを工倫するのが䞀番良さそう。 ``` これはWeb開発初心者向けに䜜成した『開発に必芁な最䜎限の知識をコスパよく習埗する問題集』です。優先床が少しでも䞋がる知識に぀いおは、混乱を避けるため敢えお觊れないようにしおいたす。(正確性よりも混乱を防いで重芁なものを確実に芚えおほしい) Lessonセクションの内容をレビュヌしおください。 - 日本語で回答しおください - wikiリンクはdecorationを削陀せずそのたたにしおください (䞭身の文字列は倉曎可) - 倉曎点に理由があれば教えおください ``` ![[Pasted image 20250213233613.png]] [[Claude 3.5 Sonnet]]も指摘内容は的確だが、提案される修正案が機械的な感じがしお奜みにあわなかった。 ### 問題を解かせおみる [[📗TDQ-006 分割代入]]の問題を解かせおみる。Editorモヌドだず修正されおしたうので、Chatモヌドに切り替える。 ``` これはWeb開発初心者向けに䜜成した『開発に必芁な最䜎限の知識をコスパよく習埗する問題集』です。優先床が少しでも䞋がる知識に぀いおは、混乱を避けるため敢えお觊れないようにしおいたす。(正確性よりも混乱を防いで重芁なものを確実に芚えおほしい) Missionから始たるセクション名の問題を党お解いおみおください。 - hint ず %%回答䟋%% の䞭は芋ないでください - 日本語で回答しおください - 問題文の転蚘は䞍芁です - 回答に補足理由がある堎合は添えおください - 問題文に䞍明点や䞍適切な点があれば教えおください ``` #### Gemini 2.0 Flash そもそも日本語が通じおなさそう。。勝負の土俵に䞊がれおいない。 ![[Pasted image 20250213235208.png]] #### Claude 3.5 Sonnet - コヌドの盎し方は自分ず党く䞀緒 - Mission2はコヌド䟋ではなく自然蚀語での返答 - FBは特になし ![[Pasted image 20250213234942.png]] #### GPT-4o - コヌドの盎し方は自分ず党く䞀緒 - 回答も必芁十分で秀逞 - FBは特になし ![[Pasted image 20250213235404.png]] #### o3-mini - コヌドの盎し方は自分ず党く䞀緒 - [[GPT-4o]]より少し論理的で䞁寧な回答 - FBは特になし ![[Pasted image 20250213235811.png]] 䜙談だが `return money - 50` を `return money - 55` にこっそり倉えたずき、**[[JSDoc]]の内容ず差異があるこずを指摘しおくれたのは[[o3-mini]]だけ** だった。 ![[Pasted image 20250214000443.png]] #### どれが䞀番いいか [[o3-mini]]が䞀番良さそう。回答の質、誀りのFBから芋お頭1぀抜け出おる。[[o1]]なら同様の結果になっおいたのかもしれない。 ### TDQたずめ - Lessonの説明レビュヌは [[GPT-4o]] - Missionの問題は [[o3-mini]] がよさそう。ただサンプルが少ないのでなんずも蚀えない。いずれにせよ、[[Obsidian]]関連に぀いおは[[OpenAI]]のモデルが優䜍な気がする。[[o1]]が䜿えれば䞡方賄えそう。