#意識低いAICodingチュートリアル #01 インターネット老人会のサイトを作ろう [GitHub Copilot Agent mode 版]

皆さまこんにちは、ちょまどです。
GitHub Copilot の Agent モードを使った、AI coding 入門のチュートリアルを書いていこうと思います。

その連載名は「 **5 分で試す！意識低い AI coding チュートリアル** 」でいきます。

最初はちゃんとしたやつ（業務改善 chat bot 作成！とか）書いていこうと思っていたのですが、
意識高い系は私がなかなか筆が乗らなかったので、
やっぱり意識低めに書いていきます。

この「 **意識低い AI coding チュートリアル** 」シリーズは、
AI を使って **業務や人生に全く役に立たないもの** を作っていくことで、
Vibe coding, AI coding なるものを「実際に触って体験」していくシリーズにします。

**本当に役に立たないもの** を作っていきます。

## この記事の目標

第一回目の今回は、最初なので、
**VS Code で GitHub Copilot の Agent モード** を使い、
静的ペラいちサイト（HTML＋CSS）を **“丸投げ生成”** する
ことをゴールとします。

### 手順

1. とりあえず叩き台を作ってもらう
1. それの改善をしてもらう（サンプルプロンプトあり）

今回はふざけたやつを作るけど、
実業務でも「 **とりあえず叩き台を作って、それを改善していくことで完成形に近づけていく** 」という手順は同じなので、
それをやっていきます。

## 今日つくるものと完成イメージ

個人的に大好きな「90-00 年代の古の web サイト」を作ってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/f58a47b3-2366-4e8f-b7f1-a8babb7743d4.png)


![インターネット老人会ホームページ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/0ef34d36-187b-47ac-9bef-3492a4bf2d74.gif)

( **懐かしさを感じない令和の若者** は ポートフォリオサイトでもなんでも何か別のやる気の出るものを代わりに作ってみてください。(Copilot に出す指示 (自然言語) を変えるだけなので, 以下の手順はあまり変わりません))

**インターネット老人会の仲間たち** は
こんなかんじのを一緒に作っていきましょう！

- *index.html*：90-00年代を感じる、古の個人サイト  
- 所要時間：**5 分**（ダウンロード等を除く） 

# 準備

## 拡張機能 GitHub Copilot Chat を入れておく

VS Code にこれ入れておいてください。

https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat

そして GitHub アカウントでサインインして云々など、「使える状態」にしておきます。（そのやり方は省略します）（需要があったら別記事で書きます）

### 余談：Peer programmer

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/0f417be3-b8f0-46e0-a9e3-4099d6605cfb.png)

余談ですが、この " `GitHub Copilot - Your AI peer programmer` " という見出し、個人的には胸熱です。

私が 2024 年春に産休に入ったころは、GitHub Copilot は、まだ「コード補完ツール」としての側面が強く、「 `Copilot (副操縦士)` 」というメッセージを今よりも強く打ち出していたように記憶しています。
あくまでメインパイロットはあなたです。Copilot は、隣に座ってあなたをサポートしてくれる副操縦士です、みたいな。

それが今は「 `AI Peer Programmer` 」というメッセージを強く打ち出していますね。ピアプログラマー。

英単語 `peer` は「(年齢・地位・能力などが)同等の者、同僚」とか「仲間」とかいう意味がありますから、
**Copilot (AI) が、「あなたと一緒に働く仲間」** という立ち位置になっていっているんだなあ、と、先月（１年以上ぶりに）育休から復帰して時代の流れを感じました。

まあ今は **Copilot くんに pull request のレビューや issue とかもアサインしてぶん投げ（丸投げ）** られる時代だもんなあ

https://docs.github.com/ja/copilot/using-github-copilot/coding-agent/about-assigning-tasks-to-copilot

![](https://pbs.twimg.com/media/GnwC3mebYAAlz7N?format=png&name=small)

https://x.com/chomado/status/1908403898739810636/photo/1

## 拡張機能 Live Preview

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/580429d0-08e0-4fa5-8f22-b38345c23f30.png)

また、作っている web ページのレンダリングを即時確認したいので
VS Code の拡張機能「Live Preview」も入れます 

https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

# 手順

とりあえず適当な空っぽのフォルダを作って
それを VS Code で開きます。

私は「website」というフォルダを作りました

```bash
mkdir website && cd website
code .
```

(`code .` は VS Code でカレントディレクトリを開くコマンドです)

(もちろん GUI 派の方は `フォルダ右クリック→「VS Code で開く」` でも同じです)


## GitHub Copilot Chat 

右上にある Copilot のロゴをクリックします　
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/9a387e62-6476-435e-99ab-aec66700ad75.png)

すると、GitHub Copilot Chat の画面が開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/44aadb94-1ad2-42ab-ad05-38d27e8a9172.png)

## Agent mode に切り替え

デフォルトでは「Ask」モードになっているので、
プルダウンから「Agent」モードに切り替えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/142d06d2-905d-46ef-a9d8-86cba71b9152.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/44d79ad5-42f8-498c-95bc-c19280e38516.png)

## まずは叩き台を生成してみる

今回は「とりあえず使ってみて生成してみる」なので、
プロンプトの良し悪しとか関係無く、
とりあえず ふわふわに指示してみます。

たとえば

```
２０００年台のオタクの間で流行っていた感じの、
古き良き web サイトを生成してください。
```

だけ書いてみます。（本当はもっと詳細に指示した方がいいんですけど、とりあえず今回は Copilot くんの察しパワーを見てみます）

これをチャットビューのテキストボックスに入れて送信してみます。
すると、Copilot くんがモリモリ作成していってくれます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/4637ecb4-2634-43cc-879a-2ac168f7cdcc.png)
　

## 叩き台のプレビューを見てみる

開いている (生成された）index.html ファイルの
右上の虫眼鏡マークをクリックして
レンダリングのプレビューを見てみます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/04541e97-be59-4fcf-9f72-564c05fe208c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/07000184-150b-408a-92cc-4d1154e57de2.png)

（ちなみに、私が実行したらこれが生成されたけど、皆さんが自分の手元でやったら別のものができると思います。）

**うーーーーーーーーーーーーーん、**

わかる、
わかる　が、
なんとなく、 **惜しい。**

なんというか、
***†痛さ†* (褒め言葉) というか、パワーが足りない。**

https://x.com/chomado/status/1931925299979268105


ちなみに、
Copilot くんが生成してくれたファイルに関して、
勝手に生成して勝手に上書き保存されることはなく、
ちゃんと毎回こうしてファイルごとに「保持」と「元に戻す（無かったことにする）」を聞いてくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/2d2676a6-2380-45d1-aa57-4a8b75f28ba4.png)

## 叩き台をもとに改善のお願いを出す

では、この叩き台サイトについて、改善案を出していきましょう。

とはいえ、私の場合、
「「惜しい」」ことはわかるんだけど、
具体的にどうしたらいいのか言語化が難しかったので、

ついったランドに いる *インターネット老人会* の仲間の方々のお知恵をお借りしました。

https://x.com/chomado/status/1931924552231317637

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/aecf8a48-2af1-42a5-9610-99eac418f96c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/ca9313bf-a6e1-4f7e-9e86-220bc6ec28c9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/7c216a81-fe7a-40af-bb73-b39345d3c1d5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/41bcbcef-ed30-46d0-a430-e05f1036516a.png)

皆さまありがとうございます！！

また、これ↓の作者の よんてんごPさん にも
アドバイスをおうかがいしました。

https://x.com/manarisu9475/status/1538352446984327168

https://x.com/yontengoP/status/1931933028601012728

## ChatGPT を使って仕様をまとめていく

いただいたアドバイスをまとめて、
改善版の仕様としてまとめていきます。

手動でやってもいいんですけど、 ChatGPT に頼んでみました。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/082fc132-27f1-497d-ba9d-e423bcbd1258.png)

私の場合は↑だったんですけど、
「チュートリアルの手順」としては、
別にこれをやる必要はないです。
ただたんに GitHub Copilot くんに「ここをこうして欲しい」と頼むだけで大丈夫です。
（私の場合、その具体的な指示が思いつかなかったので、他の人に聞いて、それを ChatGPT にまとめてもらう、という手順が入りましたが）

### 生成されたプロンプト

修正（改善）するにあたり、
ChatGPT により生成されたプロンプトです。

皆様もこちらを参考にしてみてください。

```markdown
**System (role=system)**
あなたは 1998～2003 年頃の「個人ホームページ」職人です。
Netscape 4.7 と IE5 で動けば十分という前提で、最新のベストプラクティスやアクセシビリティは *一切* 気にしません。
レガシー感・素人感を最優先にしてください。

**User (role=user)**
以下の要件をすべて満たす 1 ページ完結 HTML（必要なら外部 JS/CSS をインラインで埋め込む）を生成してください。

### レイアウト & 技術
- ページ全体を `<table>` の多重入れ子で構築し、`div` は使わない。
- 背景はタイル画像 `bg_pattern.gif` を敷き詰め。
- 虹色罫線（`<hr>` に `size`, `color`, `noshade`）風のセル・境界。
- 1×1 px 透明 GIF (`secret.gif`) をリンクにして “隠しページ” (secret.html) へ。

### 見出し・フォント
- タイトルを画像化し、創英角ポップ体風で「古の個人サイト」。
- 原色（#ff0000, #00ff00, #0000ff など）＋縁取り／影でド派手に。

### ウィジェット
1. **来訪者カウンター** (`counter.cgi` を想定)。初期値 200123。
2. **キリ番報告フォーム** → `guest.cgi`。
3. **ゲストブック / 掲示板** へのリンク。
4. **相互リンクの部屋** へのリンク。
5. **足あと帳** へのリンク。

### アニメーション & エフェクト
- `<marquee>` で点滅＋横スクロールする「いらっしゃいませ！！！」。
- 「工事中」「NEW‼️」2 コマ GIF (`under_construction.gif`, `new.gif`) をループ。
- マウスカーソルに追従してキラキラが出る JS（`mousemove` で star div を生成→fade）。

### ネットマナー & ポップアップ
- 右クリック (`contextmenu`) をキャンセルし `alert('右クリック禁止！')`。
- 「毒吐きネットマナー」へのリンクを `_blank`。

### コンテンツ置き場
- 200×40 の同盟リンクバナーを 3 枚横並び (`alliance1.gif` など)。
- 「○○お題バトン」ページへのリンク。
- 自作萌え絵 `moe.png` をセンター配置。

### その他
- セル間に余白 0、インライン CSS は可。
- すべて 1 ファイル内に書き切ること。
- 生成するコードをコメント付きでわかりやすく。

### チェックリスト（プレビュー時に必ず確認）
1. タイトルが原色＆ポップ体画像で表示される。
2. カウンターが “200124” 以上で増える。
3. キラキラエフェクトがカーソルに追従する。
4. `<marquee>` テキストが点滅しながら左右へ流れる。
5. 右クリックでアラートが出る。

**Assistant (role=assistant)**
テーブルレイアウト＋レガシー JavaScript で要件を満たす完全 HTML を出力します。
```

## 生成物

https://x.com/chomado/status/1931958943418622409

![インターネット老人会ホームページ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/0ef34d36-187b-47ac-9bef-3492a4bf2d74.gif)

よくあった右クリック禁止ポップアップも対応

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/29b92e9a-bf05-45a9-801d-d6527be28421.png)

　
「「「「ホンモノ」」」」では？
やったぜ！

## まとめ

どんなにくだらなくてもいいから、
とりあえず何か作ってみましょう！

そして Twitter でアイデアをくださった、たくさんの老人会の方々、誠にありがとうございました！

## 次回予告

第二回目の記事について。
チュートリアルらしく、次は「git で管理してみよう」にしてみようかと思います。

また、需要があったら そもそもの「#00 GitHub Copilot とは（インストールの仕方も含め）」みたいな入門記事（導入記事）もいいなと思っています。

でももし他に **何か役に立たない作りたいネタ** を思いついてしまったら、そっちにしようと思います。(募集しています！)

# 追記： 翌日 6/10(火) 

マイクロソフトのつよつよエンジニアの大川さんからリプライをいただきました！

https://x.com/tokawa_ms/status/1932261085303947276

> GitHub Copilot のリポジトリ カスタム命令を使ってテンプレート化しておきました。「サイト名」と「サイトで取り扱いたい内容」くらいをプロンプトで指示すれば、あとは勝手に古のサイトが出来上がるので黒歴史の大量生産が可能になりましたw

**どういうこと！！？？？！？？？**

何その **誰得** テンプレート！！！

**おもしろそう！！！！**

## 「GitHub Copilot のカスタム指示」

custom instructions for GitHub Copilot

公式ドキュメント：

https://docs.github.com/ja/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot

私が産休でログアウトしてる間に現れていた機能だと思う。
今日の時点でまだ パブリック プレビュー 版とのこと。

https://zenn.dev/microsoft/articles/github-copilot-custom-instructions

# 追記：6/12(木)㊗️トレンド１位

Qiita トレンド 1 位ありがとうございます！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/1a16c3c7-3b29-45a2-aab3-9c3761a104bd.png)

https://x.com/QiitaTrend/status/1932905805495632139

めっちゃ嬉しい！
続きも書くぞ〜〜！！！

# 追記２：続き書いた

6/17(火) 続きを書きました！ぜひご覧ください

https://qiita.com/chomado/items/ef5e645f90b55b803fc3