VS Code と Claude Code で、隙間時間だけで自分のホームページを作り直した話 — これがバイブコーディングってやつ?

はじめに

「ライブ情報ページの更新、今月もやらないと」と思って朝に少しだけ手をつけたら、合間合間の隙間時間をつなげただけで、気がつけば donkwkm.com の「プロフィール」「ミュージック」「スケジュール」のページがまるごと作り直されていた。そういう一日だった。

ちなみに今日は初めて VS Code というソフトを使った。プログラマーには定番のエディタらしいのだが、自分はこれまで触ったことがなかった。そこに Claude Code という相棒を住まわせて、「ここをこうしたい」「やっぱりやめる」と口で伝えながら進めていく。コードの中身は正直ちゃんと読んでいない。動いたかどうか、見た目が気持ちいいかどうかで判断していく。

あとから知ったのだけれど、こういうやり方には「バイブコーディング(vibe coding)」という呼び名があるらしい。細部を全部は把握しないまま、雰囲気(vibe)でAIと一緒にコードを書いていくスタイル。今日やったことは、まさにそれだった気がする。

この記事は、技術の話はなるべく省いて、「何を考えて、どこで諦めて、何が残ったか」を書き残しておくための1日のメモ。

発端:毎月やっているライブ情報の更新

donkwkm.com にはライブ情報ページがあって、自分の出演予定をまとめて載せている。運用はずっと「月ごとに記事を作って、手で内容を貼り付ける」という地味な方式でやってきた。

この月次更新が地味に面倒で、前々から「Googleカレンダーに入れた予定を、ホームページが自動で読みに行って表示してくれたら楽なのに」と思っていた。前日までに、そのための仕組みを一応組み立てて、ホームページに埋め込むところまではいっていた。

イメージとしてはこういう流れ。

  • Googleカレンダーに予定を入れる(これは日常的にやっている)
  • カレンダーの予定を外から読み出せる小さな窓口を作る
  • ホームページ側は、その窓口から予定を取りに行って、自動で一覧を表示する

「これで月次更新から解放されるぞ」と意気込んでいたのだが、いざ動かしてみると、ホームページ側の仕組みがまともに動かなかった。

WordPress が立ちはだかった

結論から言うと、原因はWordPressの「おせっかい」だった。

WordPressはブログ記事を書きやすくするために、書いた文章を自動的にそれっぽく整形してくれる機能がいくつもある。普通の記事を書く分にはありがたいのだが、自動取得のような少し凝った仕組みを記事の中に埋め込もうとすると、その自動整形が裏で勝手に手を入れてきて、仕組みが動かなくなる。

たとえばこんな感じ。

  • 書いた文字列の中の改行やブロック的な記号を、WordPressが「これは段落の区切りだな」と解釈して、勝手に余計なものを足してくる
  • 記事に埋め込んだURLの一部の記号を、WordPressが別の表現に書き換えてしまう
  • 一部の記号が、保存した瞬間に別の記号に変換される

どれも単体では小さな話なのに、組み合わさると「埋め込んだ仕組みが全部まともに動かない」という結果になる。回避策は一応見つかる。でも、見つけるたびに別の場所で似たような問題が顔を出す。モグラ叩きの夜が始まった。

撤退の決断

一息ついたタイミングで、ふと我に返った。

このまま粘って仕組みを完成させたとしても、毎回WordPressのおせっかいを相手にしながらメンテしていくのか? 月次更新なんて、手動でも年12回しかない作業だ。自動化のために毎月「今日はWordPressが何を壊してくるか」と戦うのは、明らかに労力が合わない

というわけで、次の隙間時間には自動表示の方式を諦めて、もとの「月ごとに記事を書く」方式に戻すことを決めた。Claude Codeにも「こっちで行こう、方針をひっくり返す」と伝えて、4月分と5月分の記事をまず作ってもらった。Googleカレンダーからライブ情報を6件(4/13〜6/8)取ってきて、それをそのままHTMLに流し込むだけ。シンプルな静的ページなので、WordPressのおせっかいを受ける余地がない。

撤退は負けじゃない、というのを久しぶりに実感した。やってみないと「割に合わない」とは分からなかった。

勢いがついたので、他のページもまるごと直した

4月・5月のライブ情報が片付いたら、なぜか止まらなくなって、その後の隙間時間でも他のページに手を入れ始めていた。

プロフィールページ(ABOUT)

  • ソロアルバムのコーナーに、レーベル(CATFISH RECORDS)へのリンクを追加
  • アルバムのジャケット画像を配置
  • 所属バンド一覧に、Instagramのアイコン付きリンクを追加

自分のプロフィールページなのに、今まで外部へのリンクがほぼなかったことに今日気づいた。

ミュージックページ(MUSIC)

ここは完全リニューアル。構成を「ソロ」「MaHK2」「ディスコグラフィ」「映像」の4ブロックに整理して、Apple Music のリンクも追加した。長らく「とりあえず置いてある」状態だったのが、やっと「自分の音楽をちゃんと見せるページ」になった。

スケジュールページ(SCHEDULE)

これが今日いちばん気持ちよくできた部分。タイムライン型のメニューを作って、過去2ヶ月・今月・未来2ヶ月が一望できるようにした。しかも並び順を「今月を先頭、そのあと未来→過去」にしたので、ページを開いた瞬間に直近のライブが目に飛び込んでくる。

さらに各ライブの項目に、Googleマップへのリンクお店のホームページへのリンクを添えた。クリックすれば会場の場所がすぐに開くし、お店の雰囲気も一発で確認できる。

正直なところ、このリンク追加には反省もこもっている。前回のライブで、自分が書いたライブ告知メール(いつも反応してくださる皆様ありがとうございます!! お気持ちだけでも反応いただけている皆様もありがとうございます!!!!)の中で、会場の住所を間違えて載せてしまうという大失態を犯してしまった。お越しくださる方に間違った情報を渡してしまうのは、ライブ以前の問題だ。これからはスケジュールを二重三重のチェックで締めていこう、という気持ちも込めて、カレンダー・ホームページ・告知文を突き合わせる運用にしていきたい。

これまで「ライブ情報どこ?」と聞かれたら、その月の記事のURLを探してコピペしていたのが、今後はスケジュールページひとつ送れば済む。そして、今まではInstagramのストーリーで全体告知するだけだったライブ情報を、これからはホームページのスケジュールページを本拠地にして、リンクも充実した形で定期的に更新していく。ストーリーは流れて消えるけれど、ホームページは残る。自分にとっても、来てくださる方にとっても、ひとつ「ちゃんと見に行ける場所」があったほうがいい。

おわりに

Claude Code と一緒に自分のサイトをいじっていると、「こうしたい」と口に出してから実際に形になるまでの距離がとても短い。短すぎて、朝の隙間時間に立てた方針をお昼の隙間で捨てて、夕方の隙間には全然ちがう景色になっている、なんてことが平気で起きる。今日はまさにそういう日だった。

手を動かすコストが下がると、意思決定のコストが相対的に上がる。「やるかやらないか」より「どこで撤退するか」のほうが難しくなる。途中で自動化を諦める判断は、昔の自分ならもっと粘っていたと思う。

VS Code というソフトを初めて触って、バイブコーディングという言葉にも初めて肩まで浸かってみた日でもあった。コードの一行一行は正直ほとんど読んでいない。それでもサイトは目に見えて良くなったし、月次更新にもちゃんと戻れた。「自分で全部把握しないと気が済まない」という呪いから少しだけ自由になれた気がする。

今日の結論を3行でまとめるなら:

  • 凝った自動化より、続けられるシンプルな運用
  • 撤退も立派な設計判断
  • まとまった時間がなくても、隙間時間の積み重ねでサイトは生まれ変わる

この記事はClaude Codeとの協働で執筆しました。

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です