#意識低いAICodingチュートリアル #02 ネット老人会サイトをバージョン管理してもらおう [GitHub Copilot Agent mode 版]

こんにちは、ちょまどです。

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

**本当に役に立たないもの** を作っていきます。(AI の無駄遣い)

今回は、その第二話目でございます！

## 前回のあらすじ

[前回の記事](https://qiita.com/chomado/items/acaf251a2f6bf984a3df) では、
**GitHub Copilot Agent mode を使った「AI コーディング」**　を体験してみる、
ということで
インターネット老人会の仲間たちからアイデアを賜り（ありがとうございました）、
かなり再現度の高い **†古(いにしえ)の個人サイト†** を作成しました。

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

![インターネット老人会](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F24609%2Ff58a47b3-2366-4e8f-b7f1-a8babb7743d4.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=5ff0af9d1afc8489793337ca1fd41234)

## フィーチャーアップデート

生成された古のサイトのスクショを上げてから
Twitter にて さらに様々なアイデアをいただきまして
もっとたくさん色々とアップデートをしていきたくなりました。

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

## 言葉選びが違うという issue

https://x.com/StRongENNNNG/status/1932266351273627869

> なにかが足りないって見てたんだけど、全体を通して言葉選びに†当時感†がないんだ

https://x.com/StRongENNNNG/status/1932267101915623647

> 「いらっしゃいませ！」→「XXXXへようこそ」/「ようこそXXXXへ」（XXXXは厨二感ある表現がベター）

> カウンターも「999999人目のXXXXXです」で訪問者なんてトガりのない表現じゃなくて「夢追い人です」とかそういう奴

> カウンターの下にはキリ番の踏み逃げ禁止の文言がないのもダメ

なるほど！！！！！！！！！！
たしかに！！！！

**たしかにオブザイヤー受賞！！！**
　
たしかに、たとえば、そもそも、当時は「個人サイト」じゃなくて「ホームページ」って言ってた気がする、
など、
**†言葉選び†** が違う気がする！　

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

という、これからどんどん変更していく予定ですので、

そろそろバージョン管理したくなってきました。

# そろそろバージョン管理がしたい

## バージョン管理するぞ

脊髄反射で `git init` 叩いてもいいんですけど、
せっかくなので GitHub Copilot の Agent mode さんに頼んでみましょう
　

```
git でバージョン管理できるようにしてください
```

と頼んでみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/911dcf35-454c-4e8f-9e78-f93b44e0f19f.png)

すると GitHub Copilot くんが動き出し、

```bash
cd /Users/chomado/作業フォルダ/website && git init
```

を叩くけどいい？　と聞いてくるので「`続行`」を押します。
（万が一 やばいコマンド叩かれたら困るので、こうしていちいち聞いてくれるのは安心できて良いですね）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b186d4df-d6b0-42ff-ba4f-8175f6d5e485.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/e59d9c4e-dbd0-4c2c-a84f-ef7b8042fca4.png)

ええええ！！！

勝手に `README.md` 作ってくれた上に
initial commit のコミットメッセージまで勝手に生成してくれているww
「git でバージョン管理したい」しか言ってないのに。
しゅごい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/380bbfd1-9c75-48d0-a3f1-2ae7750be614.png)

### ちなみに：生成された README.md

ちなみに、勝手に生成された README.md はこちらです

```markdown
# 古のオタクのホームページ

2000年代初頭の個人サイト風HTMLページです。

## 特徴

- テーブル多重入れ子レイアウト
- 原色・ポップ体タイトル
- marquee点滅・カウンター
- キラキラエフェクト
- 右クリック禁止
- レガシーJS/CSS

## ファイル構成

- `index.html` - メインページ
- `.gitignore` - Git除外設定

## 表示方法

ブラウザで `index.html` を開いてください。

## バージョン

- 2025/06/12 - 初回作成
```

あのネタサイトにすごい丁寧なちゃんとした README.md 書いてくれて感動しました。しごでき。

## git push するぞ

とりあえず何も考えずに

```bash
git push してください
```

と頼んだら

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/53be4989-bcbb-4931-9229-a5544b369db7.png)

要約すると

```
Copilot くん「
git push する先のリモートリポジトリの設定がまだされてないでしょ。
    方法１: コマンドから設定する
    方法２: 既存の GitHub 上のリモートリポジトリを選ぶ
どっちか選んで
」
```

正直 GUI で GitHub の web ページからポチポチ空リポジトリを生やしたほうが 慣れてるので好きなのですが、
せっかくなので全て Copilot くんにやってもらおうと思います。

```
では、「方法１」のほうで、github に新しいリポジトリを作成してください。
リポジトリの名前は「retro-homepage」でお願いします
```

実はこの作業は、購入したばかりの真っさらな MacBook Air を使っている (普段は自宅にある Windows ゲーミング PC を使っているんですけど、最近は気分で 10 年ぶりくらいに mac 使ってみてる (Microsoft 入社前は mac ユーザだった)) ので、

まじで買ったばかりなので、なんと GitHub CLI がまだ入っていませんでした。

すると GitHub Copilot くんが よしなに入れてくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/1391ef3f-d091-4438-a8f9-ab15fdcc7da7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/57db1fe4-f42f-4a3a-9dbf-77e580dd82e6.png)

### GitHub.com にログイン

GitHub にコマンドライン上からログインを試みる、ということで、
いったん (GitHub Copilot Chat 窓からターミナル窓に移ります) 

![スクリーンショット 2025-06-17 12.52.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/41939ed2-2511-4588-8829-138af7e53129.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/8a0ffa0a-baec-4423-9090-436b2096fec6.png)


GitHub.com を使いたいので、最初の選択は上を選択します。（というかこの先も大体デフォルト選択肢で良いのでリターンキー連打します）

![スクリーンショット 2025-06-17 12.57.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/e1961704-c706-47e1-9fab-13caf7f27d6a.png)

「web ブラウザからログインする」を選択すると、
ワンタイムパスワードが発行され、それをコピーしておいてから、
エンターキーを押して web ブラウザが立ち上がります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/b9f2331a-24ea-49e1-a6ea-69a4312bbb7a.png)

次のページでワンタイムパスワードを入力し、指示通りに進むと、
ログインが完了します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/8a3bea2e-43dd-40e7-bb75-d618d25a3cf8.png)

この画面が出たら VSCode に戻ってください。

### GitHub に push する

続きももりもりやってもらいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/4d22acdd-20d1-491a-bec5-2baa6d00f2e7.png)

できた！！
GitHub Copilot Agent くんに作ってもらったリポジトリがこちらです

https://github.com/chomado/retro-homepage

## 開発ブランチを切る

main ブランチしか無くて、今後 main に直 push というカオス運用していくのも不安なので（まあ老人会だし別にそれでもいいんだけど）
一応 開発ブランチも切っておこうと思います。

それくらい自分でコマンド叩いた方が早いと思いながら全部 Copilot くんに丸投げします。

```
今ブランチが main しか無いの不安なので、
一応 dev ブランチを切っておいてください
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/476a227c-fd16-455f-b986-13be80754077.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/bef481c8-9b37-40c3-be6c-d9f9e2bbdda4.png)

すごい親切に解説までしてくれる ... !

## 新機能案を issue に投げてもらう

アップデート案をいくつかいただいているので、それぞれ とりあえず issue に登録しておきたいですね。

```
この古の個人サイトですが、
「全体を通して言葉選びに†当時感†が足りない」という
フィードバックを貰いました。
対応したいので、とりあえず issue に投げておいてくれますか？
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/8a97a6e0-24b2-48f4-91b1-4d97d57b574c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/42fa0c37-ac5f-4513-8036-edbd17dde236.png)

すげええええええええええええええ！！！

とくに

```markdown
## 現状の問題点
- 文章が現代的すぎる
- 当時のオタク特有の表現や語彙が不足
- †中二病的†な装飾や言い回しが少ない

## 改善案
- [ ] 「いらっしゃいませ」→「ようこそ我が聖域へ」的な表現に変更
- [ ] 「管理人」→「主（ぬし）」「騎士」等の表現を検討
- [ ] †や★などの装飾記号を増やす
- [ ] 「〜だったりします」「〜なのです」等の当時の語尾を追加
- [ ] 「闇」「光」「魂」等の厨二ワードを適所に配置
- [ ] HTMLコメントにも当時感のあるメッセージを追加
```

改善案とか特に具体的なものは与えてなかったのに 的確で草

あと

> 優先度
> High - サイトの世界観に直結する重要な要素

> --label "enhancement,priority:high"

勝手に優先度高く設定されてるのもうける（とてもよい）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/4c9f4f3e-08c5-4c13-84c3-198150e8cef6.png)

最初の issue が生えたぞ！！！！

https://github.com/chomado/retro-homepage/issues/1

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24609/f5d14ae2-7443-4f1f-9c68-eb4ce4089166.png)

## [次回予告] 実装も丸投げする

長くなってきたからこれは次回に回そうと思うんだけど、
なんとこの issue に対する実装（プルリク）も GitHub Copilot に丸投げすることができます。

https://docs.github.com/ja/copilot/using-github-copilot/coding-agent/using-copilot-to-work-on-an-issue

![](https://docs.github.com/assets/cb-52480/mw-1440/images/help/copilot/coding-agent/assign-to-copilot.webp)

次回は「issue も Copilot に丸投げしよう」で書きたいと思います！！

# まとめ

今回は以下のことをしました（というか GitHub Copilot Agent mode くんに全て丸投げしました）：

* 老人会サイトのバージョン管理
* ブランチ分けた
* 改善案を issue で管理するようにした

次回はその issue を捌いてもらおうと思います！