プログラミングを覚えたてのころ、狂ったように Greasemonkey スクリプトを書いていた。自分の生活を便利にするためのアイデアをシュッと形にできて、ブログに公開するとフィードバックをもらえるというのがうれしかった。greasemonkey カテゴリ の記事を見ると当時の様子が伺える（はてなダイアリーの時のログもそのまま残っていて便利ですね）
現代では AI と一緒にコードを書くことが当たり前になり、高速にアイデアを形にできるようになった。AI にとっかかりのアイデアを形にしてもらってそのコードを読み書きして改良したり、そこからさらに AI に手伝ってもらってアイデアを膨らませつつ物を作っていくという工程を楽しんでいるうちに、これは冒頭に書いたアイデアを形にしていく楽しさに近いなと感じるようになった。いわゆる Vibe Coding と呼ばれるようなアプローチで、AI が書いたコードを読んで理解し手直しする対話の中にも学びがあるし、何より技術的な壁が下がって「作りたいもの」に集中できるのがうれしい。
そんな風にアイデアを形にして作ったものを紹介する。
Mackerel Pricing Calculator
Mackerelの料金を計算するためのツール1。Mackerel の課金体系は、基本部分は従量課金性でわかりやすいのだけど細かい部分で無料枠があったり最低利用料金があったりする。もともとスプレッドシートで料金計算ツールを作っていたりしたけど、より手軽に使えるように Web アプリにしてみたもの。
最初のロジックを作るところから Claude Code に料金ページを読ませて全部任せてから、実際に触ってみて計算ロジックに間違いがないかを確認しつつ手直しを続けている。細かいところが色々間違っていたのだけど、AI の解釈に問題があるという可能性がある一方で、料金ページの方にも曖昧なところがあるということだとも思うので、それはフィードバックしたい。ペライチ HTML かつライブラリを使わずに作るという方針にしているので本当に素朴なコードになっている。
はてなブログ アイキャッチビルダー
はてなブログには有料プランの機能として、自動生成されるアイキャッチ画像を HTML を書くことでカスタマイズできる機能がある。この時に設定する HTML は、はてなブログの管理画面からもプレビューができるのだけど、Web 上に埋め込まれたエディタを使わないといけない。これをローカルでプレビューできるようにするためのツールを作っている。
とりあえず動くところまではできているけど、そもそもの構成が回りくどくなっていたり追加したい機能もあるので改善していきたい。
おまけ: Radar Chart as a Service
任意の軸と点数を設定してレーダーチャートを共有できるサービス。昔同僚の誰かが欲しいと言ってたよなというのを思い出して作ったんだけど、それ以上は特になし。
＊＊＊
特にアイキャッチビルダーなどは、気づいたら遅い時間までコードをいじっていたという体験を久しぶりにするくらいアイデアを形にすることが楽しかった。新しい技術を学ぶことも好きだが、それは手段であって、作りたいものを形にすることが出発点だ。とりあえず動くものを作って改良していく。AI エージェントのおかげでものづくりに集中できるようになった。
この記事ははてなエンジニア Advent Calendar 2025 33日目の記事です。
