---
title: 本棚アプリ「ヨミチ」をリリースしました 〜React + Firebase 個人開発の記録〜
tags:  #個人開発 #ai駆動開発 #claude code #claude #react #firebase #アプリ  
author: [星影](https://www.docswell.com/user/unsoluble_sugar)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/8EDKPYD47G.jpg?width=480
description: note&Zennで書いた記事のスライド版です。  ▼シンプルな本棚アプリ「ヨミチ」をリリースしました https://note.com/unsoluble_sugar/n/n5f6260f6ef5f  ▼本棚アプリをReact + Firebaseでリリースするまでの開発記録。セキュリティルールの不備とPA-API廃止対応 https://zenn.dev/unsoluble_sugar/articles/yomichi-product-release
published: August 21, 26
canonical: https://www.docswell.com/s/unsoluble_sugar/5WR37Q-2026-08-21-yomichi-release
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/8EDKPYD47G.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/V7PKN6XVJ8.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/2JVVK3LRJQ.jpg)

CHAPTER 01
「ヨミチ」とは


# Page. 4

![Page Image](https://bcdn.docswell.com/page/5EGLQ3X6JL.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/4JQYK5827P.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/K74WP92PE1.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/LJ1Y9KMXEG.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/GJWGQD3K72.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4EZLWGVN73.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/Y76WGY597V.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/G75MVGYD74.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/9J293YYMER.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/DEY41GGPJM.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/VJNY2GGM78.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/YE9P1WWWJ3.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/GE8D4NNRED.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/LELM6PP27R.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/4JMY5449JW.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/PJR93WW979.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/PEXQ4PP3JX.jpg)

公開前に見つけた重大な不備
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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/3EK9ZDDNED.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/L73WDRRZ75.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/87DKPYY4JG.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/VJPKN66VE8.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/2EVVK33REQ.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/57GLQ336EL.jpg)

CHAPTER 05
まとめ


# Page. 27

![Page Image](https://bcdn.docswell.com/page/4EQYK552JP.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/KJ4WP99P71.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/LE1Y9KKX7G.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/GEWGQDDKJ2.jpg)

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