はじめに
新規アプリを製作しました。
ソースコードは以下にあります。
作成の背景
以前から読書をすると、
- 本を読んで満足する
- 学んだ内容を忘れる
- 行動に移せない
- 継続できない
という課題がありました。
既存の読書記録アプリでは
「何を読んだか」、「何を学んだか」は残せます。
しかし、「学びをどう実践したか」までは管理できていないです。
そこで、
学び→行動→継続
までを一貫して管理できるアプリを作成しました。
アプリ内容
このアプリでは以下のことができるようにしました。
- 読んだ本を登録する
- 本から学んだ内容を記録する
- 実践した内容を登録する
- 実践履歴を振り返る
単に読書記録を残すだけでなく、
「学んだことを行動に移す」ことを意識しました。
ほかのアプリとの差別化
一般的な読書アプリ
- 本を登録
- 感想を記録
本アプリ
- 本を登録
- 学びを記録
- 行動に変換
- 実践状況を記録
- 継続状況を分析
という流れで、
本から学んだことを記録するだけでなく、行動に落とし込み、継続まで網羅して確認できるところです。
使用技術
- React
- TypeScript
- Chakra UI
- Firebase Authentication
- Supabase
- Vitest
- React Router
- GitHub Actions
システム構成
- フロントエンド：React + TypeScript
- UI：Chakra UI
- 認証：Firebase Authentication
- DB：Supabase
- テスト：Vitest
- CI/CD：GitHub Actions
それぞれの画面役割
ログイン画面
アプリの最初は、Login画面になります。
登録したメールアドレスとパスワードを入力します。
登録済みではない方は新規登録リンクを押し、新規登録画面に遷移します。
新規登録画面
新規登録画面では、メールアドレス、名前、パスワードを設定します。
すでに登録されているメールアドレスの場合はエラーが表示されます。
入力が完了するとホーム画面に移ります。
ホーム画面
ホーム画面では、本から学んだ内容をもとに作成した行動TODOを確認できます。
実行したあとにはチェックを入れることができます。
本一覧画面、分析画面にボタンを押すことでそれぞれ遷移できます。
同じ日にチェックを2回入れることができない仕様としており、操作ミスを防ぐようにしています。
本一覧画面
本一覧画面ではこれまで登録した本リストを確認することができます。
それぞれのカードには、学んだことを追加するか、本の内容を削除するボタンを設置しています。
登録画面
本のタイトル、学んだ内容を入力します。
特徴として、学んだことを実践するために、「行動に変換ボタン」を押すと、具体的に何をするかを記載します。
登録されるとホーム画面に追加されます。
分析画面
分析画面では、ホーム画面で表示しているTODOリストの継続を表示しています。
全体分析と個別分析でそれぞれどの程度継続しているかを可視化しています。
ER図
ユーザー一人に対し、本を複数登録でき、
各本に対して学び・行動・実践ログを紐付ける構成にしました。
book-users
↓
books
↓
learnings
↓
actions
↓
action_logs
こだわったこと
学びを行動に変換する仕組み
作成したアプリでは、
学んだ内容を登録するだけではなく、
「具体的に何をするか」
を必ず入力する仕様にしました。
読んで終わりではなく、
実際の行動に落とし込むようにしています。
継続状況を可視化
行動を登録して終わりではなく、
どの程度継続できているかを分析画面で確認できるようにしました。
使用者のモチベーションにつなげるために、継続何日目かを記載しました。
この期間続いたとなると、もう一度挑戦するかもしれないためです。
アプリ製作で苦労したこと
当たり前のことを記載していると感じるかもしれません。
Vitestによる単体テストだけでは発見できない問題がありました。
複数アカウントで動作確認したところ、
他ユーザーのデータが参照できてしまう不具合が見つかりました。
テストコードだけでなく、
実機確認も重要だと学びました。
本・学び・行動ログの関係性を整理するために
テーブル設計を何度も見直しました。
機能追加時にリレーション設計の重要性を痛感しました。
actionsテーブルの項目追加すると、
- SQL修正
- TypeScript型修正
- 関数修正
- テスト修正
が発生し時間がかかりました。
ユーザー登録系のアプリは認証機能を作成しないと、悪意のある3者にアプリを壊されます。
firebaseにはsignInWithEmailAndPasswordやcreateUserWithEmailAndPasswordがあります。
FirebaseのuidとSupabaseのユーザーテーブルを連携する部分に苦労しました。
そのほかの苦労したポイントは以下の記事にまとめています。
- Dialog入力後に画面遷移するとボタンが押せなくなった話
- TestingLibraryElementError: Unable to find an accessible element with the role
- 複数テーブルデータ削除で困ったこと
- useEffect must not return anything besides a function, which is used for clean-up.
- Error inserting data: {code: '22P02', details: null, hint: null, message: 'invalid input syntax for type uuid: "pFfzFQz5O7fO6gvxKL7EoctB5N52"'}
- createUserWithEmailAndPasswordやsignInWithEmailAndPasswordなど認証メソッドのまとめ
開発を振り返って
単純なCRUDだけでなく、認証、DB設計、テスト（CI/CD）を経験しました。
とくにDB設計を設計初期に見落とすとのちの修正に大きく響くことを痛感しました。
1か月ほどで作成したアプリですが、まだまだ改善の余地があります。
- リマンインド機能追加
- パスワード変更画面追加
- 継続画面に分析チャート追加
さらなる改修もしていきます。