29日目。これが終わったらあと1日。というわけで、Notionをクローンした。
全部じゃない。でもコア体験はちゃんと作った：ネストページ、スラッシュコマンド、ナビゲーション用のすっきりしたサイドバーを備えたブロックエディタ。結果がn0ti0nだ。フロントエンドはサクサクできた。デプロイは別の話だったけど。
プロンプト#
「Notionにインスパイアされたブロックエディタを作って。ネストページ、スラッシュコマンド、リッチテキストフォーマット、シンタックスハイライト付きコードブロック、テーブル、タスクリスト、ナビゲーション用サイドバー付き。エディタにはTiptap、リアルタイム永続化にはFirebase Firestore、誰でも試せるように匿名認証、そしてダークモード。」
出来上がったもの#
エディタはTiptap 3を使っている。素晴らしいブロックベースのエディタフレームワークで、適切なエクステンションを使えば欲しい機能のほとんどが最初から揃っている。/を入力するとスラッシュコマンドがポップアップして、見出し、リスト、コードブロック、テーブル、タスクリスト、区切り線、さらにネストページまで挿入できる。テキストを選択するとバブルメニューが表示されて、太字、斜体、取り消し線、ハイライト、リンクなどのインラインフォーマットオプションが使える。
サイドバーはネストページが本領を発揮するところだ。ページの中にページを作成できて、ツリー構造が左パネルに折りたたみ可能なセクションとして表示される。検索・コマンドパレット（Cmd+K）があって、ページ間をすばやく移動したり、ライトモードに切り替えたり、新しいページをその場で作成したりできる。
テンプレートも組み込まれている。新しいページを作成するとき、旅行プラン、会議メモ、プロジェクト計画など、あらかじめ用意されたテンプレートから選べる。各テンプレートには便利な構造がプリセットされている。
スラッシュコマンドメニュー自体はすっきりして使いやすい。エディタのどこでも/を入力すると、すべてのブロックタイプのドロップダウンが表示される：見出し、テキスト、箇条書きリスト、番号付きリスト、ToDoリスト、コードブロック、テーブル、引用、区切り線、画像、ネストページ。
ページはトグルでウェブに共有でき、MarkdownとJSONのエクスポートオプションもある。レスポンシブ対応もしているので、モバイルでもしっかり動く。
すべてがFirebase Firestoreの匿名認証を通じてリアルタイムで同期されるので、誰でもアカウントを作らずにアプリを開いて書き始められる。
Firestoreサーガ#
このプロジェクトで本当に詳しく話す価値があるのはここだ。エディタ自体は比較的スムーズにまとまった。Tiptapはドキュメントが充実しているし、エクステンションはモジュラーだし、Claudeも統合をほぼ手取り足取り無しでやってくれた。本当の課題は、Firestoreを本番環境でちゃんと動かすことだった。
このプロジェクトのgitログはすごいことになっている。Firestoreのデプロイ問題をデバッグするだけで何十ものコミットがある。ロングポーリングの設定、キャッシュ設定、REST APIフォールバック、環境変数のトリミング、接続タイムアウトの処理…Vercelにデプロイしてからやっと発覚する小さくて辛い問題のオンパレードだった。
ローカルでは全部完璧に動いた。でも本番では、Firestoreの接続がハングしたり、データが読み込まれなかったり、アプリが黙って同期に失敗したり。一つ直すと次の問題が見つかる。環境変数のホワイトスペースをトリミングしたら一つ解決。WebSocketからロングポーリングに切り替えたらもう一つ解決。キャッシュ設定を調整したらさらにもう一つ解決。典型的な「僕のマシンでは動く」問題が、たぶん15〜20コミットにわたって繰り広げられた。
正直、これはチャレンジ全体を通じてもっともリアルな部分の一つだ。UIを作るのは楽しい部分。実際のバックエンドで本番環境でちゃんと動かすところに時間がかかる。そしてAIアシストコーディングでは、デバッグのループが面白い。Claudeは素早く修正案を出してくれるけど、デプロイして、テストして、繰り返すのは依然として必要だ。AIがどんなに速くても、フィードバックサイクルはローカル開発より遅い。
Watchfireがデプロイの問題をほぼ即座にキャッチしてくれたおかげで、少なくとも数日後にユーザー報告で気づくという事態は避けられた。
試してみて#
29日目の総評#
リアルな永続化、ネストページ、すっきりしたUIを備えたブロックエディタは、実際に人々が必要としているものだ。Tiptap 3がエディタ側の重労働をかなりやってくれて、Firebaseがバックエンドを担当したけど、全部を繋ぎ合わせること、特にデプロイをちゃんと動かすことには本当に手間がかかった。Firestoreデバッグサーガは、ソフトウェアを出荷する上で難しいのはフィーチャーコードじゃないということを思い出させてくれる。インフラ、エッジケース、本番でしか壊れないもの。それが大変なんだ。あと1日。
これは30 Days of Vibe Codingの29日目です。AIアシストコーディングで30日間に30プロジェクトを出荷する挑戦を追いかけてください。
