Github Copilot エージェントモードで試してみた

GithubCopilotのエージェントモードを使って、
Blazorでガントチャートを作る実験を試みてみました

制約事項：
・既存のオープンソースや外部ライブラリを使わない
・昼休みにだけ行う（1 日に約 10 分程度使う）
・カスタム指示を使う
・カスタム指示以外は何もない状態から始める
・出来うる限りソースコードは読まない

Transcript

1. 2025/01/20 Github Copilot エージェントモードで試してみた with GPT-4.1
2. X：@ochtum18 Github：ochtum Youtube：@ochtum18 Tiktok：@ochtum 準備中 IT 関連の情報発信（とゲームや日常をポスト） よかったらフォローしてください!! 猫とゲームを愛するエンジニア
3. 実験： GithubCopilot のエージェントモードを使って、 Blazor でガントチャートを作る実験を試みてみました
4. きっかけはX投稿でみつけたこのサイト マジで？ よく見るビッグマウスじゃないの？
5. どうせウソだろうけど試してみよう！！
6. ・昼休みにだけ行う（1 日に約10 分程度使う） ・既存のオープンソースや外部ライブラリを使わない 制約事項： ・カスタム指示を使う ・カスタム指示以外は何もない状態から始める ・出来うる限りソースコードは読まない
7. （時間は60 分） 6/4( 水) ～6/13( 金) の間で、合計6 日 使った日数：
8. （時間は60 分） ・カスタム指示に「ミッション」と「手段」を定義 やったこと(1) # ミッション このレポジトリはBlazor でガントチャートのBlazor コンポーネントを作成することを目的としています。 # 手段 現時点でBlazor でガントチャートを実装するためには有償の外部サービスを利用するか、JavaScript やTypeScr ipt （あるいはVue を使ったりOSS を利用して）でガントチャートの実装をするしかありません。 つまり、Blazor でガントチャートを実装するためには有償の外部サービスや、JavaScript やTypeScript （ある いはVue やOSS ）で実装されたガントチャートの仕組みを利用して、Blazor 用に組み替える必要があります。
9. やったこと(2) ・カスタム指示にサイトの内容をコピペする（何も改変 しない）
10. 「Blazor でガンチャートアプリを作成してください。」 そしてついに実行！！
11. タスク管理はできるようになったが、ガントチャートのバ ーがない状態だった・・・
12. が、しかしこうも言っていた Blazor ガントチャートアプリの雛形が作成できました。 ・タスク追加・編集・削除、JSON 保存は動作します。 ・タイムライン（ガントバー）は今後JSInterop で実装予定です。 ・日付入力や進捗率編集も可能です。 次のステップでタイムライン部分やファイル読込、祝日・今日のハイライト等を追加できます。 ご希望があれば、さらに詳細な機能追加やUI 改善も対応可能です。
13. 「次のステップをお願いいたします」 よし、次を実行だ！！
14. しかし、ここでビルドエラー発生・・・
15. でも大丈夫！！ Copilot アイコンをクリックしたらすぐに治りました！！
16. そしてついに・・・ ガントチャートのバーが実装！！
17. 驚くなかれ、ここまでが初日の内容です。 （カスタム指示の記入はさておき）
18. ここまでまったくソースコードを読まずに かつ、 まったく知らない技術を まったく勉強せずに 10 分で到達
19. タスクデータの保存と表示範囲の選択機能の実装 ２日目：
20. ローカルストレージに実装する形で実装
21. ＋ボタンとバー移動の実装 3 日目：
22. ＋ボタンが想定と動きが違うものの、バー移動は完璧に実 装！！
23. バーの左右の端にマウスカーソルをあてると、ドラッグで 開始日・終了日を変える処理 4 日目：
24. ここで問題発生！！
25. GPT-4.1 はもちろんのこと、ask モードでo3 を使っても解決できず、6 日目を迎える （なんならエラーが拡大してしまうという）
26. 引き続き以下の内容を進める バーの左右の端にマウスカーソルをあてると、ドラッグで 開始日・終了日を変える処理 6 日目：
27. 結局、開発者モードで動作確認をしてみると、左右にある 要素では表示されない「隠し要素」があることが判明。 （バー移動のときには表示される）
28. マウスカーソルを ⇔ に変える要素でも、隠し要素が表示さ れるように変更してみると・・・
29. 「バーの左右の端にマウスカーソルをあてると、ドラッグ で開始日・終了日を変える処理」に実装成功！！
30. AI で作ったという内容に偽りはないと感じた。 まとめ： Github 上ではない手法で、Blazor でガントチャートが 作れてしまったから。 （では既存の既存のオープンソースや外部ライブラリ があるならもっと簡単に、かつ完璧にできるであろう ）
31. AI エージェントの力が便利だからといって、それに頼 るばかり考えてしまうと、かえって効率が落ちる場合 もある。 しかし、いままでよりも遥かに高い生産性を生み出す 力を確認できました。
32. ついでですが・・・ 驚いたので共有です。。。 ちょろっとお願いするだけで、Qiita 記事(Markdown) からHTML+CSS でプレゼンドキュメントに してくれました。
33. 最後に： 「AI と創るJavaScript ツールキット」のサイト管理者様、 本資料へのサイト使用許諾、ありがとうございました！！ https://lifebook2021.github.io/app/website/ サイトへはこちらから アクセスできます ↓
34. Thank you https://github.com/ochtum/blazor-​ gantt-​ chart リポジトリはこちら ↓