30 Days of Vibe Coding - Day 10 - Miroクローン

10日目。Miroクローンをお願いした。図形、コネクタ、レイヤー、そしてプレゼンテーションモードまで揃った、フル機能の無限キャンバスだ。

プロンプト

#

「Miroみたいな無限キャンバスのホワイトボードアプリを作って。ローカルファースト、TypeScript、HTML5 Canvasで。」

スタート地点はこれだけ。あとは全部、タスク分解から出てきた。

どうやって作ったか

#

今回は大きかった。Watchfireはこれを27個のタスクに分解した。このチャレンジでこれまで見た中で一番多い。分解された内容はこんな感じ。

1. 図形と描画ツール（長方形、楕円、直線、矢印）
2. フリーハンドのペンツール
3. テキスト要素
4. 色分けできる付箋
5. 図形同士をつなぐスマートコネクタ
6. グリッドとスナップ
7. 元に戻す／やり直し（履歴）
8. PNGとJSONへのエクスポート
9. レイヤーパネル
10. カラーピッカー
11. ズームとパンの操作
12. あらゆる機能へのキーボードショートカット
13. ダークモード
14. オンボーディング付きのウェルカム画面
15. プレゼンテーションモード

27タスクは多い。でもちゃんとスコープが切られていた。どのタスクも、前に作ったものを壊さずに特定の機能を追加していく形になっていた。

watchfire-io/watchfire

Better context. Better code.

Go

32

1

出来上がったもの

#

これ、びっくりするくらい機能が揃ってる。

本物のホワイトボードツールみたいな感触。 開くとドットグリッドの無限キャンバスが広がっていて、パンもズームもできるし、図形を置いたり、テキストを書いたり、矢印でつないだりできる。ホワイトボードの基本的な操作ループがちゃんと動く。

ちゃんとしたウェルカム画面がある。 キーボードショートカットと始め方を教えてくれる。閉じることもできるし、「次回から表示しない」のチェックボックスもある。小さな気遣いだけど、アプリがちゃんと仕上がってる感を出してくれる。

コネクタが賢い。 2つの図形の間に線を引くと、接続ポイントにスナップする。図形を動かすとコネクタも追従する。これがあるかないかで、ただのお絵描きアプリとダイアグラムツールの差が出る。

レイヤーパネルがちゃんと動く。 全ての要素がサイドバーのリストに出てくる。階層が見えて、並び替えもできて、何が上にあるかを管理できる。ミニ版Figmaのレイヤーパネルみたいだ。

何にでもキーボードショートカットがある。 Vで選択、Rで長方形、Oで楕円、Pでペン、Tでテキスト、Sで付箋。Cmd+Zで元に戻す、Cmd+Shift+Zでやり直しみたいな定番のやつも全部ある。?キーで全ショートカットのオーバーレイが出せる。

ペンツールが滑らか。 試しに顔を描いてみた。ストロークのレスポンスが良くて自然な感じ。筆圧感知とか凝ったことはないけど、ブレストでアイデアをスケッチするには十分。

バグ報告

#

今回は比較的クリーンだった。27タスクもあったからもっと問題が出ると思ってたんだけど、段階的なアプローチのおかげで、次のピースが来る前にそれぞれがテストされていた。気になったのはこれくらい。

• 付箋を小さくしすぎるとテキストと重なることがあった
• 端にあるミニマップが、派手にズームした後に同期が取れなくなることがあった
• PNGエクスポートで、キャンバスの端にある要素がたまに切れていた

大したことはない。ホワイトボードの中核の体験は早い段階から安定していた。

数字で見ると

#

• Watchfireタスク27個、キャンバスのセットアップからプレゼンテーションモードまで
• TypeScript + Vite、HTML5 Canvasでレンダリング
• ツール一式： 選択、パン、長方形、楕円、直線、矢印、コネクタ、ペン、テキスト、付箋
• ダークモード、レイヤー、エクスポート、キーボードショートカット、プレゼンテーションモード
• 外部UIライブラリはゼロ。 全部キャンバスの上に自作

試してみる

#

nunocoracao/Vibe30-day10-miroclone

Miro Clone - Infinite Whiteboard PoC

TypeScript

0

0

ホワイトボードを開く

デスクトップが一番。キーボードショートカットを使うと真価を発揮する。

Day 10の感想

#

これはチャレンジの中で、複雑なウェブサービスに挑む初めてのプロジェクトだ。Miroは自己完結したルールを持つゲームじゃない。図形、コネクタ、レイヤー、エクスポート、プレゼンテーションモード、そして元のチームが何年もかけて練り上げてきた相互作用モデル全体を備えた、本物のプロダクトだ。それを1日でクローンするというのは、何を残して何を捨てるかを選ぶということだ。

一番大きな選択はバックエンドだった。無い。全部ブラウザの中で生きていて、ローカルストレージに永続化される。アカウントもサーバーもデータベースもなし。これはこのチャレンジの初期のプロジェクトを通して意図的に守っている制約だ ——ローカルに留めて、早く出荷して、デモごとにインフラを立ち上げる複雑さを避ける。ここで成立するのは、ホワイトボードがマルチプレイヤーじゃなくても役に立つからだ。いずれ壁にぶつかるだろう。リアルタイムコラボレーション、クラウド同期、URLで誰かにボードを共有すること ——どれもバックエンドなしには成立しない。それは今後のプロジェクトでやる。

際立っているのはアーキテクチャだ。コードベースは入力処理、レンダリング、状態管理、ツール、UIのモジュールにきれいに分かれている。各ツールが独立したモジュールになっている。状態管理は元に戻す／やり直しのための履歴を扱う。雑なプロトタイプじゃなくて、ちゃんと構造化されたアプリだ。

Miroを置き換えられるか？無理。でもローカルファーストのスケッチ＆ダイアグラムツールとしては、意外と使える。気づいたら、テストするつもりが実際にアイデアを整理するのに使っていた。

チャレンジの3分の1を通過。1日に収まるスコープがどんどん広がっている。

これは30 Days of Vibe Codingの10日目です。AI支援コーディングで30日間に30個のプロジェクトを出荷する様子を追いかけてください。