【体験記】GitHub CopilotでBlazorガントチャートを自動生成してみた！AI活用のリアルと落とし穴

**＜本記事のターゲット層＞**
- Github Copilotで開発をすることに関心がある人
- Github Copilotでどこまでできるか情報収集している人
- エンジニアつらたん、楽したいおって人

※本記事は、LTで作成したPDFファイルをChat-GPTに読み込ませて作成しました。手直しも行いましたが、なんと全体の10%ほどになります。

## 🟦 はじめに：AIでコーディングって本当に楽になるの？

「JavaScriptの力と生成AIのサポートがあれば、コーディング経験がなくても高度なWebアプリケーションを創り出せます。」
そんな夢のようなサイトをX投稿で見つけた筆者は、「本当に？よくあるビッグマウスじゃないの？」と考えある実験を開始しました。

テーマは、\*\*「GitHub Copilotのエージェント機能で、Blazor製のガントチャートアプリをノーリサーチで作れるのか？」\*\*というもの。

本記事ではその一部始終を、AI時代のエンジニアのリアルな体験談としてお届けします。BlazorやGitHub Copilotに興味がある方、AIとの付き合い方に悩む方は、ぜひ最後までご覧ください。

---

## 🟨 実験内容：Copilotエージェントに「Blazorでガントチャート作って」と指示してみた

### 前提条件

* **使用技術**：Blazor（C#でフロント開発ができるWeb技術）
* **制限**：既存のオープンソースや外部ライブラリは使わない
* **サポート**：Copilotのエージェントモードのみ
* **事前学習**：Blazorは知っているが、ガントチャートで使う技術に関する学習はなし

完全にCopilotまかせで進めるという、ある意味「AI依存」の極限チャレンジです。

---

### 試したこと：カスタム指示を作り、空フォルダの状態で丸投げする
[こちら](https://lifebook2021.github.io/app/website/)のサイトにあるガントチャートの説明をカスタム指示にコピペし、VS Codeでそのフォルダを開いた状態でGithub Copilotエージェントモード(GPT-4.1)に「Blazorでガンチャートアプリを作成してください。」とだけ伝えてみました。

![GithubCopolot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755626/24bfffca-244a-4543-8080-047f1b569104.jpeg)

### 結果：「動くっぽい」アプリが生成された…が？

2回のステップに分けることになりましたが、結論としてはタスク管理ツールはあっという間に作成されました！！

- 1回目指示：

「Blazorでガンチャートアプリを作成してください。」
↓
1回目結果：Blazorガントチャートアプリの雛形が作成される。タスクは追加・編集・削除できましたが、ガントチャートは実装されていませんでした。
続いて、Copilotは以下のように答えました。

```
Blazorガントチャートアプリの雛形が作成できました。
・タスク追加・編集・削除、JSON保存は動作します。
・タイムライン（ガントバー）は今後JSInteropで実装予定です。
・日付入力や進捗率編集も可能です。
次のステップでタイムライン部分やファイル読込、祝日・今日のハイライト等を追加できます。
ご希望があれば、さらに詳細な機能追加やUI改善も対応可能です。
```

- 2回目指示：
「次のステップをお願いいたします」
↓
2回目結果：
ガントチャートは実装してくれましたが、ビルドエラーが発生します。

そして、エラーメッセージでCopilotアイコンをクリックして、脳死で適用。
https://gyazo.com/43ee38fa35a275ff764ef72abb51341f


起動すると、なんとガントチャートを実装成功！！
![GithubCopolot (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755626/df7b6904-a97b-4761-bb58-dc17e661ff42.jpeg)

デザインはまだイマイチですが、最初の指示からここまでわずか10分のできごとです。

ここまでまったくソースコードを読まずにかつ、まったく知らない技術をまったく勉強せずに、ここまで**10分・ノーリサーチ・ノーコーディング**。
まさに魔法のような体験です。

---

## 🟥 しかし、その後の3日間で筆者はこうなった
その後、バーの左右の端のドラッグで開始日・終了日を変える処理の実装で3日つまりました。

AIの提案をそのまま使ってみたものの、思うように動作せず…。
結局、3日（といっても合計25分）かけて調査・試行錯誤することに。

Copilotの出力が正しいのかを調べるために、ソースコードを一部読み込み、ブラウザで動作をチェック…。
結局、**基本的なエンジニアの確認作業**を通じて、問題は5分かからずにすぐに解決。
https://i.gyazo.com/15ab35847b90440cfb19000ee78ac15c.mp4

「最初からそれやればよかったじゃん…」

---

## 教訓：AIは魔法ではない、使いこなしてこそ力になる

今回の実験を通じて得た最大の学びは、**Copilotはとても便利だが、頼りすぎると逆に非効率になる**ということです。

Copilotは「正しそうに見えるコード」を提案してくれますが、それが**本当に動くか、目的に合っているかは自分で確認する必要がある**のです。

ビジネスにおける投資とは生産性を上げることが目的です。生産性が上がらなければ偉い人たちは納得しないのです。

実際に試して感じたポイントは以下の通り：

| ポイント                    | 内容                 |
| ----------------------- | ------------------ |
| 🔍 **AIの出力は必ず検証すべし**    | 動作確認しないと見た目で騙される   |
| 🧠 **技術の基本は自分で知っておくべし** | 最低限の理解がないとトラブル時に詰む |
| ⚙️ **AIは補助輪、バイクではない**   | 自走できないとどこにも行けない    |

---

## GitHub Copilotのメリットと課題

### ✅ メリット

* 未知の技術でも雛形レベルなら短時間で試せる
* ソース読解ゼロでも動くコードが出てくる
* コミュニケーションベースで開発を進められる

### ❌ 課題

* 提案内容の正確性は保証されない
* 細かな挙動や設計意図までは考慮していない
* デバッグ・トラブルシュート力が求められる

---

## まとめ：Copilotは“賢い助手”、でも操縦するのは自分

Copilotを使ってみて感じたのは、「AIと共創する時代が本当に来ている」という手ごたえです。

ただし、「AIにおまかせ」ではなく、「AIを活かす」姿勢が求められます。

もしあなたが、

* 新技術を学ぶ時間がないけど試してみたい
* アプリのプロトタイピングを高速で行いたい
* Copilotって本当に使えるの？と疑っている

という方であれば、ぜひ一度試してみてください。
Copilotはあなたの可能性を広げる強力な味方になるはずです。