バイブコーディング6ヶ月、Wireframe MCPを作ってみた
「いくら文章でうまく説明しても、画面の代わりにはなりませんでした。」 e-torchプロジェクトは順調に進んでいました。ただ、詳細な画面を説明するほどテキストの限界が感じられました。この不便さがDSLプロジェクトにつながりました。
タグ
- AI 14
- Claude Code 14
- 自動化 10
- プロンプトエンジニアリング 9
- エージェント 9
- 生産性 2
- vue-pivottable 1
- Vue 1
- 学習 1
- サイドプロジェクト 1
- バイブコーディング 1
- 開発経験 1
- 開発ツール 1
- React 1
- tailwind-grid-layout 1
- オープンソース 1
- DSL 1
- Wireweave 1
- MCP 1
- ワイヤーフレーム 1
AI
バイブコーディング6ヶ月、6年放置したイシューを1週間で
「いつかやろう。」 6年間先延ばしにしていたイシューがありました。1週間で12個すべて解決しました。
バイブコーディング6ヶ月、不便なことから一つずつ
「不便なことを見つけたら自動化する、それがパターンになりました。」 6ヶ月の振り返りでこう書きました。大げさな計画なしに、不便なことから一つずつ作りました。この記事では、そうして作ったツールについて話します。
バイブコーディング6ヶ月、バカになると思っていたのに
「自分はバカになっているんじゃないか？」 Claude Codeを使い始めて数ヶ月経った頃、ふとこんな考えが浮かびました。AIがコードを書いて、私はそれをレビューするだけ。手でタイピングしていた感覚が消えていくようでした。 6ヶ月経った今、その不安は全く違う感覚に変わりました。これはその旅の記録です。
[AIエージェントパイプライン #10] 完成したアプリと回顧
前回の記事では、パイプラインを運用しながら発見した改善点を扱いました。 今回は最終回です。2025年8月に始めて6ヶ月、ついに完成です。完成したアプリのUIと技術選択に関する回顧を扱います。
[AIエージェントパイプライン #9] パイプラインの単純化
前回の記事では、リトライとロールバックメカニズムを扱いました。 今回は、パイプラインを運用しながら発見した改善点をまとめました。
[AIエージェントパイプライン #8] リトライとロールバック
前回の記事では、パイプラインの正常実行フローを扱いました。 今回は、失敗したときどう処理したかをまとめました。
[AIエージェントパイプライン #7] シェルスクリプトでエージェントを実行する
前回の記事では、7つのエージェントの協業構造とハンドオフプロトコルを扱いました。 今回は、コンテンツ生成パイプラインの7つのエージェントを実行するために私が構成したシェルスクリプトオーケストレーションをまとめました。
[AIエージェントパイプライン #6] 7つのエージェントはどのように協業するか
前回の記事では、エージェントプロンプトを完成させるまでの過程を扱いました。プロンプトを扱いながら「失敗」「成功」と話しましたが、その結果はパイプラインを実行しながら確認したものでした。 今回は、私が構成したパイプライン構造をまとめました。
[AIエージェントパイプライン #5] プロンプト完成までの4段階
前回の記事では、行き詰まった状況でAI-DLC方法論を適用することを決めた話を扱いました。 今回は、AI-DLCを適用しながらプロンプトをどのように完成させていったかをまとめました。
[AIエージェントパイプライン #4] 分離したのになぜまだうまくいかなかったのか
前回の記事では、一つのプロンプトがなぜうまくいかなかったか、そして7つのエージェントに分離した過程を扱いました。 今回は、エージェントを分離した後に何を試したか、そしてそれでもなぜうまくいかなかったかを扱います。
[AIエージェントパイプライン #3] 一つのプロンプトではなぜうまくいかなかったのか
前回の記事では、メタデータパイプラインでcategory.yamlと空のコンテンツファイルを自動生成しました。 今回からは学習コンテンツ生成パイプラインを扱います。最初は一つのプロンプトで試しましたが、失敗しました。
[AIエージェントパイプライン #2] 何を生成するか
前回では、なぜ学習アプリを作り始めたかについて話しました。 今回は生成するコンテンツをどのように定義したかを扱います。
[AIエージェントパイプライン #1] 学習アプリを作り始めた理由
LLMで勉強していて疲れたことはありませんか？ 私はそうでした。だからLLMで学習コンテンツを自動生成し、それをアプリにすることにしました。 このシリーズは2025年下半期に行ったサイドプロジェクトの経験をまとめたものです。
Claude Code
バイブコーディング6ヶ月、Wireframe MCPを作ってみた
「いくら文章でうまく説明しても、画面の代わりにはなりませんでした。」 e-torchプロジェクトは順調に進んでいました。ただ、詳細な画面を説明するほどテキストの限界が感じられました。この不便さがDSLプロジェクトにつながりました。
バイブコーディング6ヶ月、6年放置したイシューを1週間で
「いつかやろう。」 6年間先延ばしにしていたイシューがありました。1週間で12個すべて解決しました。
バイブコーディング6ヶ月、不便なことから一つずつ
「不便なことを見つけたら自動化する、それがパターンになりました。」 6ヶ月の振り返りでこう書きました。大げさな計画なしに、不便なことから一つずつ作りました。この記事では、そうして作ったツールについて話します。
バイブコーディング6ヶ月、バカになると思っていたのに
「自分はバカになっているんじゃないか？」 Claude Codeを使い始めて数ヶ月経った頃、ふとこんな考えが浮かびました。AIがコードを書いて、私はそれをレビューするだけ。手でタイピングしていた感覚が消えていくようでした。 6ヶ月経った今、その不安は全く違う感覚に変わりました。これはその旅の記録です。
[AIエージェントパイプライン #10] 完成したアプリと回顧
前回の記事では、パイプラインを運用しながら発見した改善点を扱いました。 今回は最終回です。2025年8月に始めて6ヶ月、ついに完成です。完成したアプリのUIと技術選択に関する回顧を扱います。
[AIエージェントパイプライン #9] パイプラインの単純化
前回の記事では、リトライとロールバックメカニズムを扱いました。 今回は、パイプラインを運用しながら発見した改善点をまとめました。
[AIエージェントパイプライン #8] リトライとロールバック
前回の記事では、パイプラインの正常実行フローを扱いました。 今回は、失敗したときどう処理したかをまとめました。
[AIエージェントパイプライン #7] シェルスクリプトでエージェントを実行する
前回の記事では、7つのエージェントの協業構造とハンドオフプロトコルを扱いました。 今回は、コンテンツ生成パイプラインの7つのエージェントを実行するために私が構成したシェルスクリプトオーケストレーションをまとめました。
[AIエージェントパイプライン #6] 7つのエージェントはどのように協業するか
前回の記事では、エージェントプロンプトを完成させるまでの過程を扱いました。プロンプトを扱いながら「失敗」「成功」と話しましたが、その結果はパイプラインを実行しながら確認したものでした。 今回は、私が構成したパイプライン構造をまとめました。
[AIエージェントパイプライン #5] プロンプト完成までの4段階
前回の記事では、行き詰まった状況でAI-DLC方法論を適用することを決めた話を扱いました。 今回は、AI-DLCを適用しながらプロンプトをどのように完成させていったかをまとめました。
[AIエージェントパイプライン #4] 分離したのになぜまだうまくいかなかったのか
前回の記事では、一つのプロンプトがなぜうまくいかなかったか、そして7つのエージェントに分離した過程を扱いました。 今回は、エージェントを分離した後に何を試したか、そしてそれでもなぜうまくいかなかったかを扱います。
[AIエージェントパイプライン #3] 一つのプロンプトではなぜうまくいかなかったのか
前回の記事では、メタデータパイプラインでcategory.yamlと空のコンテンツファイルを自動生成しました。 今回からは学習コンテンツ生成パイプラインを扱います。最初は一つのプロンプトで試しましたが、失敗しました。
[AIエージェントパイプライン #2] 何を生成するか
前回では、なぜ学習アプリを作り始めたかについて話しました。 今回は生成するコンテンツをどのように定義したかを扱います。
[AIエージェントパイプライン #1] 学習アプリを作り始めた理由
LLMで勉強していて疲れたことはありませんか？ 私はそうでした。だからLLMで学習コンテンツを自動生成し、それをアプリにすることにしました。 このシリーズは2025年下半期に行ったサイドプロジェクトの経験をまとめたものです。
自動化
バイブコーディング6ヶ月、不便なことから一つずつ
「不便なことを見つけたら自動化する、それがパターンになりました。」 6ヶ月の振り返りでこう書きました。大げさな計画なしに、不便なことから一つずつ作りました。この記事では、そうして作ったツールについて話します。
[AIエージェントパイプライン #10] 完成したアプリと回顧
前回の記事では、パイプラインを運用しながら発見した改善点を扱いました。 今回は最終回です。2025年8月に始めて6ヶ月、ついに完成です。完成したアプリのUIと技術選択に関する回顧を扱います。
[AIエージェントパイプライン #9] パイプラインの単純化
前回の記事では、リトライとロールバックメカニズムを扱いました。 今回は、パイプラインを運用しながら発見した改善点をまとめました。
[AIエージェントパイプライン #8] リトライとロールバック
前回の記事では、パイプラインの正常実行フローを扱いました。 今回は、失敗したときどう処理したかをまとめました。
[AIエージェントパイプライン #7] シェルスクリプトでエージェントを実行する
前回の記事では、7つのエージェントの協業構造とハンドオフプロトコルを扱いました。 今回は、コンテンツ生成パイプラインの7つのエージェントを実行するために私が構成したシェルスクリプトオーケストレーションをまとめました。
[AIエージェントパイプライン #6] 7つのエージェントはどのように協業するか
前回の記事では、エージェントプロンプトを完成させるまでの過程を扱いました。プロンプトを扱いながら「失敗」「成功」と話しましたが、その結果はパイプラインを実行しながら確認したものでした。 今回は、私が構成したパイプライン構造をまとめました。
[AIエージェントパイプライン #5] プロンプト完成までの4段階
前回の記事では、行き詰まった状況でAI-DLC方法論を適用することを決めた話を扱いました。 今回は、AI-DLCを適用しながらプロンプトをどのように完成させていったかをまとめました。
[AIエージェントパイプライン #4] 分離したのになぜまだうまくいかなかったのか
前回の記事では、一つのプロンプトがなぜうまくいかなかったか、そして7つのエージェントに分離した過程を扱いました。 今回は、エージェントを分離した後に何を試したか、そしてそれでもなぜうまくいかなかったかを扱います。
[AIエージェントパイプライン #3] 一つのプロンプトではなぜうまくいかなかったのか
前回の記事では、メタデータパイプラインでcategory.yamlと空のコンテンツファイルを自動生成しました。 今回からは学習コンテンツ生成パイプラインを扱います。最初は一つのプロンプトで試しましたが、失敗しました。
[AIエージェントパイプライン #2] 何を生成するか
前回では、なぜ学習アプリを作り始めたかについて話しました。 今回は生成するコンテンツをどのように定義したかを扱います。
プロンプトエンジニアリング
[AIエージェントパイプライン #10] 完成したアプリと回顧
前回の記事では、パイプラインを運用しながら発見した改善点を扱いました。 今回は最終回です。2025年8月に始めて6ヶ月、ついに完成です。完成したアプリのUIと技術選択に関する回顧を扱います。
[AIエージェントパイプライン #9] パイプラインの単純化
前回の記事では、リトライとロールバックメカニズムを扱いました。 今回は、パイプラインを運用しながら発見した改善点をまとめました。
[AIエージェントパイプライン #8] リトライとロールバック
前回の記事では、パイプラインの正常実行フローを扱いました。 今回は、失敗したときどう処理したかをまとめました。
[AIエージェントパイプライン #7] シェルスクリプトでエージェントを実行する
前回の記事では、7つのエージェントの協業構造とハンドオフプロトコルを扱いました。 今回は、コンテンツ生成パイプラインの7つのエージェントを実行するために私が構成したシェルスクリプトオーケストレーションをまとめました。
[AIエージェントパイプライン #6] 7つのエージェントはどのように協業するか
前回の記事では、エージェントプロンプトを完成させるまでの過程を扱いました。プロンプトを扱いながら「失敗」「成功」と話しましたが、その結果はパイプラインを実行しながら確認したものでした。 今回は、私が構成したパイプライン構造をまとめました。
[AIエージェントパイプライン #5] プロンプト完成までの4段階
前回の記事では、行き詰まった状況でAI-DLC方法論を適用することを決めた話を扱いました。 今回は、AI-DLCを適用しながらプロンプトをどのように完成させていったかをまとめました。
[AIエージェントパイプライン #4] 分離したのになぜまだうまくいかなかったのか
前回の記事では、一つのプロンプトがなぜうまくいかなかったか、そして7つのエージェントに分離した過程を扱いました。 今回は、エージェントを分離した後に何を試したか、そしてそれでもなぜうまくいかなかったかを扱います。
[AIエージェントパイプライン #3] 一つのプロンプトではなぜうまくいかなかったのか
前回の記事では、メタデータパイプラインでcategory.yamlと空のコンテンツファイルを自動生成しました。 今回からは学習コンテンツ生成パイプラインを扱います。最初は一つのプロンプトで試しましたが、失敗しました。
[AIエージェントパイプライン #2] 何を生成するか
前回では、なぜ学習アプリを作り始めたかについて話しました。 今回は生成するコンテンツをどのように定義したかを扱います。
エージェント
[AIエージェントパイプライン #10] 完成したアプリと回顧
前回の記事では、パイプラインを運用しながら発見した改善点を扱いました。 今回は最終回です。2025年8月に始めて6ヶ月、ついに完成です。完成したアプリのUIと技術選択に関する回顧を扱います。
[AIエージェントパイプライン #9] パイプラインの単純化
前回の記事では、リトライとロールバックメカニズムを扱いました。 今回は、パイプラインを運用しながら発見した改善点をまとめました。
[AIエージェントパイプライン #8] リトライとロールバック
前回の記事では、パイプラインの正常実行フローを扱いました。 今回は、失敗したときどう処理したかをまとめました。
[AIエージェントパイプライン #7] シェルスクリプトでエージェントを実行する
前回の記事では、7つのエージェントの協業構造とハンドオフプロトコルを扱いました。 今回は、コンテンツ生成パイプラインの7つのエージェントを実行するために私が構成したシェルスクリプトオーケストレーションをまとめました。
[AIエージェントパイプライン #6] 7つのエージェントはどのように協業するか
前回の記事では、エージェントプロンプトを完成させるまでの過程を扱いました。プロンプトを扱いながら「失敗」「成功」と話しましたが、その結果はパイプラインを実行しながら確認したものでした。 今回は、私が構成したパイプライン構造をまとめました。
[AIエージェントパイプライン #5] プロンプト完成までの4段階
前回の記事では、行き詰まった状況でAI-DLC方法論を適用することを決めた話を扱いました。 今回は、AI-DLCを適用しながらプロンプトをどのように完成させていったかをまとめました。
[AIエージェントパイプライン #4] 分離したのになぜまだうまくいかなかったのか
前回の記事では、一つのプロンプトがなぜうまくいかなかったか、そして7つのエージェントに分離した過程を扱いました。 今回は、エージェントを分離した後に何を試したか、そしてそれでもなぜうまくいかなかったかを扱います。
[AIエージェントパイプライン #3] 一つのプロンプトではなぜうまくいかなかったのか
前回の記事では、メタデータパイプラインでcategory.yamlと空のコンテンツファイルを自動生成しました。 今回からは学習コンテンツ生成パイプラインを扱います。最初は一つのプロンプトで試しましたが、失敗しました。
[AIエージェントパイプライン #2] 何を生成するか
前回では、なぜ学習アプリを作り始めたかについて話しました。 今回は生成するコンテンツをどのように定義したかを扱います。
生産性
バイブコーディング6ヶ月、不便なことから一つずつ
「不便なことを見つけたら自動化する、それがパターンになりました。」 6ヶ月の振り返りでこう書きました。大げさな計画なしに、不便なことから一つずつ作りました。この記事では、そうして作ったツールについて話します。
バイブコーディング6ヶ月、バカになると思っていたのに
「自分はバカになっているんじゃないか？」 Claude Codeを使い始めて数ヶ月経った頃、ふとこんな考えが浮かびました。AIがコードを書いて、私はそれをレビューするだけ。手でタイピングしていた感覚が消えていくようでした。 6ヶ月経った今、その不安は全く違う感覚に変わりました。これはその旅の記録です。
vue-pivottable
バイブコーディング6ヶ月、6年放置したイシューを1週間で
「いつかやろう。」 6年間先延ばしにしていたイシューがありました。1週間で12個すべて解決しました。
Vue
バイブコーディング6ヶ月、6年放置したイシューを1週間で
「いつかやろう。」 6年間先延ばしにしていたイシューがありました。1週間で12個すべて解決しました。
学習
[AIエージェントパイプライン #1] 学習アプリを作り始めた理由
LLMで勉強していて疲れたことはありませんか？ 私はそうでした。だからLLMで学習コンテンツを自動生成し、それをアプリにすることにしました。 このシリーズは2025年下半期に行ったサイドプロジェクトの経験をまとめたものです。
サイドプロジェクト
[AIエージェントパイプライン #1] 学習アプリを作り始めた理由
LLMで勉強していて疲れたことはありませんか？ 私はそうでした。だからLLMで学習コンテンツを自動生成し、それをアプリにすることにしました。 このシリーズは2025年下半期に行ったサイドプロジェクトの経験をまとめたものです。
バイブコーディング
バイブコーディング6ヶ月、バカになると思っていたのに
「自分はバカになっているんじゃないか？」 Claude Codeを使い始めて数ヶ月経った頃、ふとこんな考えが浮かびました。AIがコードを書いて、私はそれをレビューするだけ。手でタイピングしていた感覚が消えていくようでした。 6ヶ月経った今、その不安は全く違う感覚に変わりました。これはその旅の記録です。
開発経験
バイブコーディング6ヶ月、バカになると思っていたのに
「自分はバカになっているんじゃないか？」 Claude Codeを使い始めて数ヶ月経った頃、ふとこんな考えが浮かびました。AIがコードを書いて、私はそれをレビューするだけ。手でタイピングしていた感覚が消えていくようでした。 6ヶ月経った今、その不安は全く違う感覚に変わりました。これはその旅の記録です。
開発ツール
バイブコーディング6ヶ月、不便なことから一つずつ
「不便なことを見つけたら自動化する、それがパターンになりました。」 6ヶ月の振り返りでこう書きました。大げさな計画なしに、不便なことから一つずつ作りました。この記事では、そうして作ったツールについて話します。
React
バイブコーディング6ヶ月、6年放置したイシューを1週間で
「いつかやろう。」 6年間先延ばしにしていたイシューがありました。1週間で12個すべて解決しました。
tailwind-grid-layout
バイブコーディング6ヶ月、6年放置したイシューを1週間で
「いつかやろう。」 6年間先延ばしにしていたイシューがありました。1週間で12個すべて解決しました。
オープンソース
バイブコーディング6ヶ月、6年放置したイシューを1週間で
「いつかやろう。」 6年間先延ばしにしていたイシューがありました。1週間で12個すべて解決しました。
DSL
バイブコーディング6ヶ月、Wireframe MCPを作ってみた
「いくら文章でうまく説明しても、画面の代わりにはなりませんでした。」 e-torchプロジェクトは順調に進んでいました。ただ、詳細な画面を説明するほどテキストの限界が感じられました。この不便さがDSLプロジェクトにつながりました。
Wireweave
バイブコーディング6ヶ月、Wireframe MCPを作ってみた
「いくら文章でうまく説明しても、画面の代わりにはなりませんでした。」 e-torchプロジェクトは順調に進んでいました。ただ、詳細な画面を説明するほどテキストの限界が感じられました。この不便さがDSLプロジェクトにつながりました。
MCP
バイブコーディング6ヶ月、Wireframe MCPを作ってみた
「いくら文章でうまく説明しても、画面の代わりにはなりませんでした。」 e-torchプロジェクトは順調に進んでいました。ただ、詳細な画面を説明するほどテキストの限界が感じられました。この不便さがDSLプロジェクトにつながりました。
ワイヤーフレーム
バイブコーディング6ヶ月、Wireframe MCPを作ってみた
「いくら文章でうまく説明しても、画面の代わりにはなりませんでした。」 e-torchプロジェクトは順調に進んでいました。ただ、詳細な画面を説明するほどテキストの限界が感じられました。この不便さがDSLプロジェクトにつながりました。