目次

Blogをバイブコーディングした

• ぎじゅつ
HonoXBunVite

はじめに

#
  • 最近Rustのブログを書き続けていた
  • ふと、「Hugo綺麗じゃないし柔軟性がないな。。。」という瞬間が増えた
  • 折角だしTSの勉強にもなるから書き直すかとなった

結論

#
  • TSの勉強にまったくならなかった
  • 満足できるブログが6hぐらいでできてしまった
  • バイブコーディング怖い

何をしたか

#

要求確認

#

まず技術選定をした
要望は以下だった

  • とりあえずTSを使いたい
  • ハイライトがもう少し綺麗に表示されて欲しい
  • 外部OGPを表示できるようにしたい

利用技術の選定

#

以下の技術を利用した
NO IMAGEBun — A fast all-in-one JavaScript runtimeBundle, install, and run JavaScript & TypeScript — all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner, and npm client built-in.@bunjavascript
ViteViteNext Generation Frontend Toolingvitejs
VitestVitestNext generation testing framework powered by Vite
GitHub - honojs/honox: HonoX - Hono based meta frameworkGitHub - honojs/honox: HonoX - Hono based meta frameworkHonoX - Hono based meta framework. Contribute to honojs/honox development by creating an account on GitHub.GitHub

理由は

  • 初めはAstroを利用する予定であった
  • 調査しているところHonoXなるものがあると発見した
  • 要件が満せそうなため新しいほうを利用することにした
  • yusukebeさんとご飯に行ったのに何も知らなかったのヤバすぎたので触った

マイグレーション作業

#

該当のPR
Refactor honox by Xantibody · Pull Request #32 · Xantibody/raizawa-blogRefactor honox by Xantibody · Pull Request #32 · Xantibody/raizawa-blogContribute to Xantibody/raizawa-blog development by creating an account on GitHub.GitHub
Hugoからマイグレーションを行なった
とはいえ元々markdownで管理していたのでそれを確保して一旦全部消した
そのあとに、flake.nixにbunとwranglerを入れただけだった
あとはひたすらにバイブコーディング

新規実装

#
  • 自分の要求を伝えていった
    • ブログをmdファイルで作りたいこと
    • hugoで使われていたmdファイルのtoml記述は変換して良いので使うようにすること
    • ハイライトを綺麗にすること
    • 外部OGPを表示するようにすること
    • とりあえずvitestは雑にでも書いてもらうこと
    • CIでテストを実行するようにすること
      あとはClaude Codeがやってくれてしまった

つまった部分

#

そもそもの機能の把握や、アンテナがなかったので調査が大変だった
たとえばハイライト
highlight.jshighlight.jsThe Internet's favorite JavaScript syntax highlighter supporting Node.js and the web.
最初はこちらをすすめられたが、あんまり綺麗ではなく探しまわった
ShikiShikiA beautiful yet powerful syntax highlighter
そしてShikiに辿りついた
そこでmarkdown-itに対応しているって書いてあり
ShikiShikiA beautiful yet powerful syntax highlighter
markedを初めにClaude Codeが選定していたのでmarkdown-itに変えた
こんな感じでつじつまがあうように実装してもらっていった

あとはviteのhotload機能を使いたかったのだが、Cloudflare Workersでは以下のエラーがでてしまい静的にbuildしなければならなくなった

▲ [WARNING] The package "node:async_hooks" wasn't found on the file system but is built into node.

そのため、Claude Codeが更新されたら再ビルドするvite pluginを作ってくれた
本当にこれでいいのか。。。

終わりに

#

満足のいく出来が再現できてしまったせいで言語のこと、実装のことが何もわからなかった
現在、Rustを細かく勉強しているからこそ、実装をじっくり見なければなーなど思った
しかし、表現したいものがすでにあって、それを実現するための手間がなくなると嬉しいなと体感した
なぜなら、実装そのものを試行錯誤したいわけでなく、その表現そのものが正しいかの試行錯誤がしたいから
そういう意味では本質的なやりたいことがわかって嬉しくはあった

目次