![#意識低いAICodingチュートリアル #02 ネット老人会サイトをバージョン管理してもらおう [GitHub Copilot Agent mode 版] #AIエージェント](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMjQ2MDklMkZwcm9maWxlLWltYWdlcyUyRjE3NDk3MDE3NjI_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9NzExZGY0MmU4NDk4N2I1ZGUwZDYxNDA4Yjc1Yzc5M2I%26blend-x%3D120%26blend-y%3D467%26blend-w%3D82%26blend-h%3D82%26blend-mode%3Dnormal%26s%3D98a7dbeb5c5f56679f6f2d4e4d6b0b3f?ixlib=rb-4.0.0&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTIzJUU2JTg0JThGJUU4JUFEJTk4JUU0JUJEJThFJUUzJTgxJTg0QUlDb2RpbmclRTMlODMlODElRTMlODMlQTUlRTMlODMlQkMlRTMlODMlODglRTMlODMlQUElRTMlODIlQTIlRTMlODMlQUIlMjAlMjMwMiUyMCVFMyU4MyU4RCVFMyU4MyU4MyVFMyU4MyU4OCVFOCU4MCU4MSVFNCVCQSVCQSVFNCVCQyU5QSVFMyU4MiVCNSVFMyU4MiVBNCVFMyU4MyU4OCVFMyU4MiU5MiVFMyU4MyU5MCVFMyU4MyVCQyVFMyU4MiVCOCVFMyU4MyVBNyVFMyU4MyVCMyVFNyVBRSVBMSVFNyU5MCU4NiVFMyU4MSU5NyVFMyU4MSVBNiVFMyU4MiU4MiVFMyU4MiU4OSVFMyU4MSU4QSVFMyU4MSU4NiUyMCU1QkdpdEh1YiUyMENvcCVFMiU4MCVBNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTdlMTM3ZTc3MjU2NTA1YWViM2FiOTNjZDRhNGY0N2E2&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBjaG9tYWRvJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ZDFlOWI0OGZmYjM0NTc1Y2MzY2Q4MGRlYWI3ZTA5M2M&blend-x=242&blend-y=480&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&s=f05fae77f8b2957dff2b95a730ffaf82)
こんにちは、ちょまどです。
この「 5 分で試す！意識低い AI coding チュートリアル 」シリーズは、
AI を使って 業務や人生に全く役に立たないもの を作っていくことで、
Vibe coding, AI coding なるものを「実際に触って体験」していくシリーズにします。
本当に役に立たないもの を作っていきます。(AI の無駄遣い)
今回は、その第二話目でございます！
前回のあらすじ
前回の記事 では、
GitHub Copilot Agent mode を使った「AI コーディング」 を体験してみる、
ということで
インターネット老人会の仲間たちからアイデアを賜り（ありがとうございました）、
かなり再現度の高い †古(いにしえ)の個人サイト† を作成しました。
フィーチャーアップデート
生成された古のサイトのスクショを上げてから
Twitter にて さらに様々なアイデアをいただきまして
もっとたくさん色々とアップデートをしていきたくなりました。
言葉選びが違うという issue
なにかが足りないって見てたんだけど、全体を通して言葉選びに†当時感†がないんだ
「いらっしゃいませ！」→「XXXXへようこそ」/「ようこそXXXXへ」（XXXXは厨二感ある表現がベター）
カウンターも「999999人目のXXXXXです」で訪問者なんてトガりのない表現じゃなくて「夢追い人です」とかそういう奴
カウンターの下にはキリ番の踏み逃げ禁止の文言がないのもダメ
なるほど！！！！！！！！！！
たしかに！！！！
たしかにオブザイヤー受賞！！！
たしかに、たとえば、そもそも、当時は「個人サイト」じゃなくて「ホームページ」って言ってた気がする、
など、
†言葉選び† が違う気がする！
という、これからどんどん変更していく予定ですので、
そろそろバージョン管理したくなってきました。
バージョン管理するぞ
脊髄反射で git init 叩いてもいいんですけど、
せっかくなので GitHub Copilot の Agent mode さんに頼んでみましょう
git でバージョン管理できるようにしてください
と頼んでみます。
すると GitHub Copilot くんが動き出し、
cd /Users/chomado/作業フォルダ/website && git init
を叩くけどいい？ と聞いてくるので「続行」を押します。
（万が一 やばいコマンド叩かれたら困るので、こうしていちいち聞いてくれるのは安心できて良いですね）
ええええ！！！
勝手に README.md 作ってくれた上に
initial commit のコミットメッセージまで勝手に生成してくれているww
「git でバージョン管理したい」しか言ってないのに。
しゅごい
ちなみに：生成された README.md
ちなみに、勝手に生成された README.md はこちらです
# 古のオタクのホームページ
2000年代初頭の個人サイト風HTMLページです。
## 特徴
- テーブル多重入れ子レイアウト
- 原色・ポップ体タイトル
- marquee点滅・カウンター
- キラキラエフェクト
- 右クリック禁止
- レガシーJS/CSS
## ファイル構成
- `index.html` - メインページ
- `.gitignore` - Git除外設定
## 表示方法
ブラウザで `index.html` を開いてください。
## バージョン
- 2025/06/12 - 初回作成
あのネタサイトにすごい丁寧なちゃんとした README.md 書いてくれて感動しました。しごでき。
git push するぞ
とりあえず何も考えずに
git push してください
と頼んだら
要約すると
Copilot くん「
git push する先のリモートリポジトリの設定がまだされてないでしょ。
方法１: コマンドから設定する
方法２: 既存の GitHub 上のリモートリポジトリを選ぶ
どっちか選んで
」
正直 GUI で GitHub の web ページからポチポチ空リポジトリを生やしたほうが 慣れてるので好きなのですが、
せっかくなので全て Copilot くんにやってもらおうと思います。
では、「方法１」のほうで、github に新しいリポジトリを作成してください。
リポジトリの名前は「retro-homepage」でお願いします
実はこの作業は、購入したばかりの真っさらな MacBook Air を使っている (普段は自宅にある Windows ゲーミング PC を使っているんですけど、最近は気分で 10 年ぶりくらいに mac 使ってみてる (Microsoft 入社前は mac ユーザだった)) ので、
まじで買ったばかりなので、なんと GitHub CLI がまだ入っていませんでした。
すると GitHub Copilot くんが よしなに入れてくれます。
GitHub.com にログイン
GitHub にコマンドライン上からログインを試みる、ということで、
いったん (GitHub Copilot Chat 窓からターミナル窓に移ります)
GitHub.com を使いたいので、最初の選択は上を選択します。（というかこの先も大体デフォルト選択肢で良いのでリターンキー連打します）
「web ブラウザからログインする」を選択すると、
ワンタイムパスワードが発行され、それをコピーしておいてから、
エンターキーを押して web ブラウザが立ち上がります。
次のページでワンタイムパスワードを入力し、指示通りに進むと、
ログインが完了します。
この画面が出たら VSCode に戻ってください。
GitHub に push する
続きももりもりやってもらいます。
できた！！
GitHub Copilot Agent くんに作ってもらったリポジトリがこちらです
開発ブランチを切る
main ブランチしか無くて、今後 main に直 push というカオス運用していくのも不安なので（まあ老人会だし別にそれでもいいんだけど）
一応 開発ブランチも切っておこうと思います。
それくらい自分でコマンド叩いた方が早いと思いながら全部 Copilot くんに丸投げします。
今ブランチが main しか無いの不安なので、
一応 dev ブランチを切っておいてください
すごい親切に解説までしてくれる … !
新機能案を issue に投げてもらう
アップデート案をいくつかいただいているので、それぞれ とりあえず issue に登録しておきたいですね。
この古の個人サイトですが、
「全体を通して言葉選びに†当時感†が足りない」という
フィードバックを貰いました。
対応したいので、とりあえず issue に投げておいてくれますか？
すげええええええええええええええ！！！
とくに
## 現状の問題点
- 文章が現代的すぎる
- 当時のオタク特有の表現や語彙が不足
- †中二病的†な装飾や言い回しが少ない
## 改善案
- [ ] 「いらっしゃいませ」→「ようこそ我が聖域へ」的な表現に変更
- [ ] 「管理人」→「主（ぬし）」「騎士」等の表現を検討
- [ ] †や★などの装飾記号を増やす
- [ ] 「〜だったりします」「〜なのです」等の当時の語尾を追加
- [ ] 「闇」「光」「魂」等の厨二ワードを適所に配置
- [ ] HTMLコメントにも当時感のあるメッセージを追加
改善案とか特に具体的なものは与えてなかったのに 的確で草
あと
優先度
High – サイトの世界観に直結する重要な要素
–label “enhancement,priority:high”
勝手に優先度高く設定されてるのもうける（とてもよい）
最初の issue が生えたぞ！！！！
[次回予告] 実装も丸投げする
長くなってきたからこれは次回に回そうと思うんだけど、
なんとこの issue に対する実装（プルリク）も GitHub Copilot に丸投げすることができます。
次回は「issue も Copilot に丸投げしよう」で書きたいと思います！！
今回は以下のことをしました（というか GitHub Copilot Agent mode くんに全て丸投げしました）：
- 老人会サイトのバージョン管理
- ブランチ分けた
- 改善案を issue で管理するようにした
次回はその issue を捌いてもらおうと思います！
Views: 0
