はじめに

個人開発第2弾ですっ

先日色々要件書き出して、基本設計したけど
なんか機能付けすぎて、これ難しくね？ってなりましたｗ

※第1弾はこちら↓
https://qiita.com/void_takazu/items/8e17330da17955ca2906

なので、まずは必要最低限の機能だけのTODOアプリにして
リリースできたら機能追加する方針で行こうと思います。

追加機能する場合に手戻りにならないような設計をしておきたいけど
それを考えるのはとても時間かかりそうなので今回はあまり考えすぎずにいきます…ｗ

再度基本設計を検討する

必要最低限にして書き直しました！

【システムフロー設計】

トップ画面でユーザー新規登録と、ログインができる。
ユーザーがログインすると、自分のTODOアプリにアクセスできるようになる。
ユーザーは、TODOアイテムを作成、編集、削除できる。
ユーザーは、カレンダー画面でTODOアイテムを確認できる。

【UI設計】

シンプルなUIを実装し、直感的に操作ができるようにする。
画面レイアウトは、TODOリストを一覧表示するメイン画面と、TODOアイテムの詳細を表示するサブ画面に分ける。
メイン画面では、TODOリストをカード形式で表示し、それぞれのカードにはタイトル、締め切り日、進捗状況を表示する。
カードの並び順は、締め切り日が近いものから順に表示する。
モバイルデバイスからの利用にも配慮し、レスポンシブデザインを採用する。

【データモデル設計】

PostgreSQLを採用する。
「TODOアイテム」テーブルを作成し、タイトル、締め切り日、進捗状況をカラムに持たせる。
「ユーザー」と「TODOアイテム」の関係を1対多の関係にする。
ユーザー情報のパスワードは、ハッシュ化して格納する。

【開発環境】

言語: Ruby on Rails、Vue.js
データベース: PostgreSQL
エディタ: Visual Studio Code
デプロイ先: Heroku
バージョン管理: Git、GitHub

ER図

一旦これでいいかな？
なんかすごい単純だけど…

ER図

             ┌───────────────┐
             │     Users     │
             ├───────────────┤
             │ id            │
             │ name          │
             │ email         │
             │ password_hash│
             └───────────────┘
                     │
                     │ 1
                     │
             ┌───────────────┐
             │     Todos     │
             ├───────────────┤
             │ id            │
             │ title         │
             │ due_date      │
             │ progress      │
             │ user_id (FK)  │
             └───────────────┘

画面遷移図

1. start -> トップ画面 -> ユーザー新規登録 -> ユーザー登録完了 -> トップ画面
2. トップ画面 -> ログイン -> ログイン認証 -> ユーザーTODOアプリへのアクセス -> ユーザーTODOアプリ画面
3. ユーザーTODOアプリ画面 -> TODOアイテム作成 -> TODOアイテム登録 -> ユーザーTODOアプリ画面
4. ユーザーTODOアプリ画面 -> TODOアイテム編集 -> TODOアイテム更新 -> ユーザーTODOアプリ画面
5. ユーザーTODOアプリ画面 -> TODOアイテム削除 -> TODOアイテム削除完了 -> ユーザーTODOアプリ画面
6. ユーザーTODOアプリ画面 -> カレンダー画面への遷移 -> カレンダー画面 -> ユーザーTODOアプリ画面

Figmaとか使ってモック作りたい

開発手順

最初に、ユーザー新規登録とログイン機能を実装します。これによって、ユーザーがTODOアプリにアクセスできるようになります。ログインには、ユーザー情報をデータベースに格納しておく必要があります。
ログイン機能が実装されたら、TODOアイテムを作成、編集、削除できるようにします。TODOアイテムをデータベースに格納するために、TODOアイテムテーブルを作成し、必要なカラムを定義します。
作成したTODOアイテムを一覧表示するための画面を実装します。TODOアイテムのタイトル、締め切り日、進捗状況を表示する必要があります。カード形式で表示することで、直感的な操作ができるようにします。
TODOアイテムの詳細を表示するための画面を実装します。サブ画面として表示し、詳細な情報を表示するようにします。
最後に、カレンダー画面を実装します。カレンダー画面では、締め切り日が近いTODOアイテムを確認できるようにします。

おわりに

んーーなんとなく整理されました。
実装しながら随時設計も変更していこうと思います。

続く…(´・ω・｀)