書籍や技術書を点々と読み進めていると、どこまで読んだのかを忘れてしまいがちです。LeafMarkは章や節など目次単位で既読状況を可視化し、読みかけの章をすばやく再開できるようにするための Next.js 製ウェブアプリです。フロントエンドは Next.js 16（App Router）+ TypeScript 構成、認証は Firebase Authentication（Google プロバイダ）、データは Firestore に保存し、UI は Tailwind CSS ベースでまとめました。
LeafMarkでできること
- Google ログインで自分専用の本棚と読書ログを管理
- 書籍のタイトル・概要を登録し、章（chapter）を 1 件ずつ、またはまとめて追加
- 章ごとのチェックボックスで既読・未読を切り替え、完了数と総数から進捗率を自動算出
- 書籍と章の並びをドラッグ＆ドロップで並べ替え、読みやすい順番に整理
- 登録済みの章を編集・削除しながら、「あとで読みたい章」だけを残すミニマルな目次を構築
LeafMarkは「どこまで読んだか忘れてしまう」「興味のある章を点々と読んでいきたい」といった読書スタイルを前提に、自由度の高い既読管理を目指しました。章をすべて読了する必要はなく、完了済みの項目だけをメモしても成立する軽量さを大切にしています。
技術スタックとアーキテクチャ
Next.js 16（App Router）を採用し、src/app 配下でページと API を組み立てています。Firebase Authentication の Google プロバイダでログイン／ログアウトを制御し、Firestore では users/{uid}/books/{bookId}/chapters/{chapterId} という階層でデータを管理。@hello-pangea/dnd によるドラッグ＆ドロップ、Tailwind CSS のユーティリティクラス、React の useTransition を組み合わせて、レスポンスよく目次を編集できるようにしています。
ユースケース
- 詳細な読書ノートまでは残さないが、章ごとの既読状況だけは追いたい社会人読者
- 分厚い技術書を必要な章から拾い読みし、進捗管理を簡単に済ませたいエンジニアや学生
- 読書会の準備で「今回はどの章を読む？」を可視化したい主催者
LeafMarkはhttps://leafmark.mixnews.jp/で公開中です。Google アカウントでログインすればすぐに利用できるので、章単位の読書ログ管理に課題がある方はぜひ試してみてください。