本棚アプリ「ヨミチ」をリリースしました 〜React + Firebase 個人開発の記録〜

PRODUCT RELEASE 本棚アプリ「ヨミチ」を リリースしました 〜React + Firebase 個人開発の記録〜 2026/08/21 @unsoluble_sugar

今日話すこと 1 「ヨミチ」ってどんなアプリ？ 2 開発の進め方と技術構成 3 実データとセキュリティとの戦い 4 個人開発で得た学び 2

CHAPTER 01 「ヨミチ」とは

シンプルな本棚管理アプリ 読書状況・評価・メモをシンプルに記録 タイトル・著者・タグで検索、カテゴリ 絞り込み Googleアカウントでログイン、クラウド 同期 ブクログ形式CSVのインポート/エクスポ ート対応 886冊を登録して運用中 4

名前の由来 「読み + 道」を組み合わせた造語 読みかけの本は、道の途中 「夜道」の響きも重ねている ロゴのカラスは「読書後に顔を上げた瞬 間」「道を見据えた姿」 本の上にとまるカラスがモチーフ 5

始まりはClaude Designのプロトタイプ 6

バーコードでサクッと登録 スマホカメラで書籍裏面のバーコードを 読み取り ISBNを自動検出してまとめて追加 登録済みの本は重複として検知 カメラAPIの都合でHTTPS配信が必須→ 技術選定に影響 978で始まるバーコードを自動読み取り 7

スマホではアプリっぽく使える（PWA） ホーム画面に追加すればネイティブアプ リ風に起動 オフラインでも閲覧・編集できる 本棚は公開設定で共有URLを発行して見 ホーム画面に追加した様子 せられる 8

CHAPTER 02 開発の進め方と技術構成

5フェーズに分割して進行 Phase1 開発基盤 Vite / CI/CD Phase2 → ローカル版 移植 Phase3 → 認証+ クラウド同期 Phase4 → マルチ Phase5 → PWA化 ユーザー公開 Issue駆動: 1 issue = 1ブランチ = 1PR。Claude Codeが実装・テスト・PR作成まで自走 し、人間はレビューとマージだけを担当 10

技術構成: Vite + React + TypeScript バーコード読み取りにHTTPS配信が必須 プロトタイプ（HTML+仕様書）からの 移植と相性が良い app/src/ ├── domain/ # 純粋関数（React・DB非依存） ├── db/ # Dexie.js + IndexedDB ├── firebase/ # Auth / Firestore / Functions ├── store/ # zustand（UI状態のみ） └── features/ # 画面コンポーネント 将来のモバイルアプリ化でも資産を再利 用できる domain層は純粋関数に隔離し、挙動をテ ストで固定 11

BaaS比較 → Firebaseを採用 検討案 採用 Cloudflare / Supabase Firebase 認証・同期・モバイルSDKを揃えるには追 Google認証・オフライン同期・モバイル 加の作り込みが必要 SDKが標準装備。PRごとの使い捨て HTTPSプレビューURLでカメラ機能の実機 確認もしやすい 12

同期戦略: データの「正」を切り替える サインイン中はFirestore（オフライン永続化）が正 未サインインはDexie.js（IndexedDB）のローカルモード useBooks() フックの単一ソースで自動切替、UIは無変更 初回サインインで全件一括アップロード（450件ずつ・冪等） 競合解決はLast-Write-Wins（Firestore既定）で十分と判断 13

クラウドのデータモデル users/{uid} users/{uid}/books/{bookId} users/{uid}/notes/{noteId} publicShelves/{shareId} プロフィール … 蔵書（ローカルと同形 + updatedAt） … メモ・引用 … 公開本棚（公開情報のみの複製） … 公開本棚は公開情報のみを複製する別コレクション 構造的に非公開情報が混ざらないので「誰でも読める」ルールにしても安全 セキュリティルールはエミュレータ上の20件超テストでCI化 14

CHAPTER 03 実データが設計を変えた

884冊の実データで設計を検証 884 冊 69 % 1 /884 検証に使った実データ ISBNがないKindle本（ASIN） openBDの書影カバー率 机上の「ISBN前提」設計は実データが即ひっくり返した 16

実データで見つけた問題と対処 69%がASINでISBNなし 雑誌のJANコードで重複発生 → 識別子をそのまま主キーに採用 → タイトル+著者の突き合わせを追加 著者名の空白差で別人扱い 削除データの同期ずれ → NFKC正規化+空白除去で統一 → 論理削除（deletedフラグ）を採用 17

書影はどこから取るか（権利調査） Amazon画像の直リンク NDLサーチ書影API openBD書影 → 公開サービスでの無断利用 → 2026年3月で提供終了済 → カバー率1/884で実用にな に規約上の懸念。不採用 み。不採用 らず。不採用 結論: Amazonアソシエイト経由で正規利用+開示文言を明示。Kindle本にも表紙が付く副 効果も 18

CHAPTER 04 セキュリティとAPI廃止との戦い

公開前に見つけた重大な不備 Firestoreの read は get （1件取得）と list （一覧クエリ）の両方を含む を許可 → 全ユーザーの共有IDを列挙できてしまう + allow get: if true; // 個別取得のみ許可 + allow list: if false; // 一覧クエリは禁止 - allow read: if true; // get + list allow read: if true のままだと、誰でもコレクション全体をクエリ可能 128bit共有IDの「推測困難性」が意味をなさなくなるところだった 20

そのほかの公開前セキュリティ対応 App Check（reCAPTCHA v3）でクライアント検証 検索APIにユーザー毎のレート制限をかけて連打防止 CSVエクスポートの数式インジェクション対策 Content-Security-Policyヘッダを導入 公開本棚のデータから内部ID（uid）を除去 21

タイトル検索: PA-API廃止の直撃 Cloud Run FunctionsでAmazon商品検索のプロキシを実装 AWS SigV4署名を node:crypto のみで自前実装 ところがPA-API v5は2026年5月に廃止済みだった 後継のCreators APIは「直近30日で適格販売10件」が必要（自己購入は不可） 対応: 認証はOAuth 2.0へ移行済み。資格要件を満たすまでタイトル検索は本番ビルドで非 表示化 22

PWA実装のポイントとハマりどころ vite-plugin-pwa + Workboxでアプリシェルをプリキャッシュ、機内モードでも起動 書影はcache-first（30日）でランタイムキャッシュ 更新は通知式: 新バージョン検出でトースト表示、ユーザー操作で更新 「更新」ボタンが反応しない罠→ controllerchange を自前監視して解決 Service Workerの最終検証はスコープの都合で本番環境が必須 23

ハマったポイント（抜粋） 事象 対処 ルールテスト「No test files found」 vitest設定のincludeに一本化 CIでエミュレータ起動失敗（Java<21） setup-java追加 CSV再インポートで雑誌が重複 タイトル+著者の突き合わせ プレビューURLでサインイン不可 認証の検証は本番で実施 プレビューチャンネル50個の上限到達 有効期限短縮+クローズ時自動削除 PWA更新トーストが不応答 controllerchange監視でリロード確実化 24

意図的に「捨てた」選択 E2Eテストなし: domain層ユニットテスト+実機確認で担保 双方向同期の自前実装なし: Firestoreのオフライン機能に一本化 ダークモード・多言語は見送り: プロトタイプにない仕様は足さない フルSSR不採用: SPA+PWAで完結（OGP生成のみFunctions） 費用: Firestore・Hosting・Cloud Runは無料枠内で月0〜数百円。予算アラート+上限の 二重構えで暴走対策 25

CHAPTER 05 まとめ

個人開発で得た学び 1 進め方（issue駆動・1PR単位）は初日に固定 4 セキュリティルールはテストのCI化で精査 2 実データ検証は設計の前に。現実が机上設計を 5 外部APIの廃止・資格要件は実装前に確認する 覆す 3 人間の担当（マージ・課金・認可・キー）を明 確化 6 Firebaseは個人開発の同期サービスに部品が揃 っている 27

読みかけの本は、道の途中 「ヨミチ」は無料で使えます yomichi-app.web.app 28

• https://yomichi-app.web.app/

参考 シンプルな本棚アプリ「ヨミチ」をリリースしました（note） note.com/unsoluble_sugar/n/n5f6260f6ef5f React + Firebaseでの開発記録（Zenn） zenn.dev/unsoluble_sugar/articles/yomichi-product-release 29

• https://note.com/unsoluble_sugar/n/n5f6260f6ef5f
• https://zenn.dev/unsoluble_sugar/articles/yomichi-product-release

ご清聴ありがとうございました @unsoluble_sugar