非エンジニアがAI活用で実現したタスク管理アプリ「長い長いノート」に体験版追加の経緯と開発秘話
個人開発のWebアプリ「長い長いノート」の作者が、タスク管理アプリにログイン不要の体験版を追加した経緯と、その開発プロセスを詳細に報告した記事である。本アプリは、タスクやタイムラインの情報をFirebase Firestoreに読み書きする招待制のサービスであり、通常は利用希望フォームからアカウント発行を経て利用する仕組みとなっている。体験版の追加は、利用希望のハードル（個人情報提供）が高いと感じたため、「まず試せる状態」にすることが目的であった。
開発プロセスでは、まずClaude Codeを用いてプロダクト戦略の相談を行い、「不特定多数に開放するのではなく、興味を持った人が試せる状態にしたい」という本音を言語化し、スコープを絞り込んだ。その後、実装に先立ち、既存のフックがFirestoreにどれだけ依存しているかをClaudeに調査させたところ、工数見積もりが「半日」から「1日」に縮小した。特に、折りたたみバーの状態管理（useTaskCollapse.js）が既にlocalStorageで永続化済みであったことが判明した点が大きかった。
実装過程では、非エンジニアがAIに任せる際の具体的な課題が浮き彫りになった。一つ目は、FirestoreのTimestampオブジェクトをlocalStorageに保存する際のシリアライズ漏れによる「日付がNaNになる」バグであり、原因特定には「再現テスト」の実施が不可欠であった。二つ目は、ReactのProviderコンポーネントの配置ミスによる初期エラーであり、これも本番環境と同じ経路でブラウザを開くことで発見された。筆者は、自身がコードを書いたわけではなく、「何をどの順でAIに頼むか」という判断（調査→要件定義→テスト→本番環境での確認）が重要だと強調している。体験版は、データがlocalStorageに保存され、サーバーには送られないため、気軽に試用できる環境を提供している。
背景
本アプリは、タスク管理を目的とした個人開発のWebアプリケーションであり、通常は利用希望者に対してアカウントを発行する招待制で運用されている。利用者が個人情報（メールアドレス）を渡すハードルを下げるため、ログイン不要の体験版を開発した経緯が背景にある。開発プロセス全体を通じて、AI（Claude Code）を単なるコーディングツールとしてではなく、戦略的な相談相手として活用している点が特徴的。
重要用語解説
- Firestore: Googleが提供するNoSQLデータベースサービス。本アプリでは、タスクやタイムラインのデータを読み書きするバックエンドとして利用されている。リアルタイムなデータ同期が特徴。
- localStorage: ブラウザが提供するクライアントサイドのストレージ機能。サーバーを経由せず、ブラウザ内にデータを一時的に保存できるため、体験版のデータ保存に利用されている。
- Timestampオブジェクト: Firestoreが扱う日時データ型。単なる文字列ではなく、メソッド（toDate()など）を持つ特殊なオブジェクトであり、JSONシリアライズの過程でデータ構造が崩れるリスクがある専門的なデータ形式。
今後の影響
本記事は、非エンジニアがAI（LLM）を開発プロセスに組み込む際の具体的な「指示出し」の技術（調査→要件定義→テスト）を提示しており、AIを活用した個人開発や業務効率化の新たなモデルケースとなる。体験版の提供は、ユーザーとサービス提供者間の心理的障壁を下げ、新規ユーザー獲得に大きく貢献すると予想される。