AWS Prescriptive Guidance にある「The CI/CD litmus test: Is your pipeline fully CI/CD?」は CI/CD の基礎からトランクベースアプローチ・ベストプラクティスまでまとまっていておすすめドキュメントの一つ ＼( 'ω')／
その中に Litmus test for CI/CD pipelines という「CI/CD レベル」を測定できる「計20種類」の質問（Yes or No）がある．そして，ドキュメントにもリンクが載っている通り CI/CD litmus test (https://litmus.devops.aws.dev/) という CI/CD レベルを測定するウェブサイトもあった（過去形）．今はアクセスできなくなっている...😇 仕事で CI/CD 改善を支援するときに使っていたのに〜
CI/CD Level Checker
前置きが長くなったけど，アクセスできなくなってしまった CI/CD litmus test は Vibe Coding のネタとしてイイな〜と思って実装してみることにした．ウェブサイトのデザインは全然違うけど（前に書いた記事 と Internet Archive 参照），ちゃんと CI/CD レベルを測定できるウェブサイトができあがった💪（今のところ非公開）
作業時間は試行錯誤した時間も含めて2時間だった⌛️
Vibe Coding
今回の作業の流れとツールをまとめておこうと思う．とは言えツールセットは他にもたくさんあるから同じテーマで Vibe Coding してみたいな〜と思ってる😀もっと改善できる流れもあると思う．
- Step.1: ドキュメント取得 / Firecrawl
- Step.2: 要件定義 / ChatGPT GPT-4o
- Step.3: 技術設計 / ChatGPT GPT-4o
- Step.4: テスト設計 / ChatGPT GPT-4o
- Step.5: Vibe Coding / GitHub Copilot Agent Mode + Claude 3.7 Sonnet
- Step.6: git commit / OpenCommit + GPT-4o mini
- Step.7: 動作確認 / Playwright MCP
🏃♂️ Step.1 ドキュメント取得
まずは Firecrawl を使って Litmus test for CI/CD pipelines ウェブサイトの内容を Markdown ファイルに変換した．
🏃♂️ Step.2 要件定義
次に ChatGPT GPT-4o を使って CI/CD Level Checker の要件定義をまとめた．Step.1 で変換した Markdown を読ませつつ，計20問を1つの画面で回答させるのではなく「1問ずつ考えながら回答できるような画面遷移に〜」などの要件を壁打ちしながら伝えた．最終的に 要件定義.md に出力した．
1. 🎯 目的 2. 🧩 機能要件 3. 🖥️ 非機能要件 4. 🔐 セキュリティ要件 5. 📘 利用資料・参考
🏃♂️ Step.3 技術設計
同じく ChatGPT GPT-4o を使って CI/CD Level Checker の要件定義をまとめた．「データベースは使わず完全に静的サイトで〜」や「フロントエンドは React ベースで〜」という要件を伝えつつ，他は ChatGPT GPT-4o のおすすめで OK ということにした．ちなみに UI ライブラリのおすすめを聞いたら shadcn/ui とのことだった💡最終的に 技術設計.md に出力した．
1. 🏗️ アーキテクチャ構成 2. 📦 技術スタック 3. 🌐 ホスティング 4. 🖥️ ローカル開発 5. 🎨 デザイン方針 6. 🚫 除外事項（現時点）
🏃♂️ Step.4 テスト設計
Vibe Coding の後にテストをするために，ChatGPT GPT-4o を使ってテスト項目を洗い出した．計20問に対する Yes/No の入力値と CI/CD レベルの期待値をまとめた．最終的に テスト項目.md に出力した．
## 🧪 Case.1 期待値：Neutral ## 🧪 Case.2 期待値：Fully CI/CD ## 🧪 Case.3 期待値：Not CI/CD
🏃♂️ Step.5 Vibe Coding
あとは GitHub Copilot Agent Mode + Claude 3.7 Sonnet に Markdown ファイルを読み込ませて，Vibe Coding を楽しむ❗️実際にサイトにアクセスして，気になったところは変更を指示したりもした．ちょっとした修正だと自分でやりたくなってしまうけど，次に指示したときに戻ってしまうのが嫌だったので，最終的に一度も自分で直すことなく進めてみた👌
🏃♂️ Step.6 git commit
実装を進めながら，区切りで差分を確認して git commit をした．そのときにコミットメッセージを考えるところも OpenCommit で GPT-4o mini に任せた💪 最近個人では OpenCommit を使うようにしててホント便利だ〜．
🏃♂️ Step.7 動作確認
CI/CD スコアの計算を確認するために テスト項目.md と Playwright MCP で動作確認をした．以下のように Playwright で画面遷移が進んでいくのを眺めつつ，最終的な CI/CD スコアが正しいことも確認できた❗️
GitHub Copilot Agent Mode でそのまま MCP を呼び出せるから便利だったけど，プロンプトによっては Playwright MCP ではなくローカル環境に Playwright をインストールしようとしてしまうこともあって，調整が必要だった😇
まとめ
金曜日の午前中に自由時間を捻出できたので，少し前から作りたいな〜と思っていた CI/CD Level Checker を Vibe Coding で実装してみた❗️とにかく楽しかった〜．次は別のツールセットを使った Vibe Coding で CI/CD Level Checker v2 を実装してみるぞ〜 ＼( 'ω')／
