Leap of faITh
戻る

Vite+ を使って映像作品バックログアプリをリリースした

（更新日：）

Vite+ を使って みるカン という小規模な SPA をリリースしました。
積んだ映画やシリーズを整理して、次に何を見るか決めるためのアプリです。 2026/6/29現在、新規ユーザー登録を停止しております。

Vite+ とは何か

今回使った Vite+ は、VoidZero が提供している Web 開発向けの統合ツールチェーンです。
詳しくは VoidZero の Announcing Vite+ Alpha を読むのが早いです。

もともと Vite は、モダンな Web フロントエンド開発のための高速なビルドツールとして広く使われています。
開発サーバーと本番ビルドを中心にした、いわゆるフロントエンド開発の土台になるツールです。

Vite+ はその Vite を中心にしつつ、ランタイム、パッケージマネージャー、lint や test を含む周辺ツールまで、ひとつの入口にまとめようとしているものです。

単に「Vite の上位版」というより、Vite を中心にした開発体験をもう少し一貫したものにしようとしている存在、という理解です。

いまなら出せそうだと思った

これらが重なって、小さな SPA なら短期間でリリースまで持っていけそうだという見通しができました。

実際に、開発用マシンから離れる出張を挟んでも2週間ほどでリリースできました。

前から気になっていた Vite 系を試したかった

今回 Vite+ を選んだのは、Vite には前から関心があったからです。
フロントエンド界隈での評判をよく聞いていましたし、業務でも Rails アプリケーションのビルドツール移行を検討する中で、移行先として vite_rails を自分で提案していました。

そういう流れもあって、Vite+ にも自然に興味が向きました。
個人開発で小さめの SPA を 1 本作るなら、Vite+ を触ってみるにはちょうどよさそうだと思いました。

作ったのは みるカン という小さな SPA

今回作ったみるカンは、積んだ映画やシリーズを整理して、次に何を見るか決めるためのアプリです。

技術構成は次のような感じです。

以下を含むくらいの規模感です。

Vite+ は AI 前提の開発と相性がよかった

実際に感触がよかったのは、vp が統一された入口になっていることでした。

人間がコマンドを覚えやすいという話ではありません。
今回の開発では、自分で何かコマンドを叩くより、セッション中に AI エージェントが実行することのほうが圧倒的に多かったです。

そのときに効いたのが、入口がシンプルで、AGENTS.md や CLAUDE.md に端的に書ける量に収まっていることでした。

何をどのツールのどのコマンドで実行するのかを長々と説明しなくても、

のように短く整理できます。

Vite+ は単に速いというより、AI 前提の開発フローにうまく乗せやすかったという印象があります。

vp create のあとにエージェント向けファイルの雛形が出てくるのも、方向性としてかなり納得感がありました。

開発体験がよかった

何もかもが速いと感じました。

実装中はセッション内でエージェントにコード変更を任せて、そのままコミットまで進めるよう指示しました。
pre-commit では高速に lint が走り、Vitest も軽快でした。
最終的には、自分で動作確認したり、出てきた変更を読んで判断したりするところにいちばん時間を使いました。

Vercel の deployment でも build log が 15 秒前後で終わることがあり、かなり速く感じました。
もちろん厳密なベンチマークを取ったわけではありません。

AI 前提だと進め方も変わる

今回は Claude Code と Codex を併用して開発しました。

併用した理由はシンプルで、まずは週次制限の都合です。
加えて、Claude Code は業務で触る機会がなかったので、このタイミングで試してみたかったというのもあります。

開発中には codex-plugin-cc のようなものも現れて、興味本位で少しだけ触りました。
このあたりの周辺ツールの動きも含めて、いままさに変化しているところに乗っている感覚がありました。

実装作業は AI に任せた一方、開発者が判断しやすい状態を作ることを意識しました。
具体的には、AI に調査結果や実装方針を docs/ 配下の Markdown に出力させて、それもコード管理に含めていました。

個人でやる短期開発だと、毎回ブランチを切って PR を立てる運用はかなり重いです。
スピード優先で main ブランチにどんどんコミットを積んでいきました。
「どういう方針なのか」「なぜこうしたのか」「何が終わっていないのか」を開発者も AI も追いやすくするために、docs を更新していくやり方は楽でした。

ただ、この進め方には当然デメリットもあります。
初期の検討過程や途中のコードの背景が、Issue や PR ではなく最終的にコミット履歴に寄りやすくなります。
それに、スマホから気軽にアイデア段階のメモや TODO を登録しにくいです。

なので、リリース後はいままでの進め方をやめて GitHub Projects を作成しました。
今後は通常どおり Issue 単位で実装を進めるつもりです。

実装よりコードの外側に時間を使った

実装そのものでは、正直ほとんど詰まりませんでした。
Claude Code と Codex にかなり助けられました。

その一方で、時間を使ったのはコードの外側でした。

自分はできるだけコストをかけたくなかったので、無料枠でどこまでいけるかもかなり気にしていました。
ホスティングは暫定で無料プランのある Vercel を使いましたが、Vite+ を使う以上、将来的には Void も楽しみにしています。

Cloudflare でドメインを取得して、問い合わせ用のメールアドレスも用意しました。
個人用アドレスをそのまま出したくなかったからです。

また、ローカルでは seed で流し込んだ初期ユーザーを使って実装を進めていたので、本番の会員登録導線を後から確認したときに、メール送信まわりの制約に気づく場面もありました。
その結果、急遽 Resend を使うことになりました。

それとは別に、実際に一番時間を使ったのはロゴとシンボルでした。
東京出張中にホテルで ChatGPT のモバイルアプリで壁打ちしながら、みるカンのコンセプトをどう見た目に落とすかを整えました。
アプリとして出すには見た目や印象も必要です。正直、大急ぎで仕込んだので粗い出来です。

この作業は時間がかかったものの、私物 PC を持ち出してコードを書く必要はありませんでした。
移動中や出張中でも、ChatGPT のモバイルアプリで進められたのは今回おもしろかったところです。

ちゃんと出せたのがよかった

今回は、小さな SPA ではあるものの、ちゃんとリリースまで持っていけました。

その理由を考えると、やはり次の3つが大きかったと思います。

AI に実装を任せると、試行回数が増えます。
試行回数が増えると、開発、check、test、build の軽さが効いてきます。
Vite+ はその点で、今回かなり気持ちよく使えました。

今回の話は、Vite+ がすごいというだけの話ではありません。
いまの個人開発では、AI と軽い開発基盤が合わさると、短期間で小さなものを出し切る現実味がかなり上がる、という話だったと思います。

まとめ

今回の個人開発では、Vite+ を試すこと、AI を前提にした開発フローを試すこと、そして何よりリリースして自分で使うことを目標にしていました。
小さくてもちゃんと出せたのがよかったです。

結果として、Vite+ はかなりよかったです。
ただ、本当に時間を使ったのは、認証、メール、ドメイン、無料枠、そしてロゴやシンボルのようなコードの外側でした。

前の記事
個人開発のドメインを Cloudflare で取得して問い合わせ窓口も用意する
次の記事
JavaScriptのlint/format BiomeとOxcの使いどころ