Allied ArchitectsAllied ArchitectsEngineer Blog

第一章1 『データベース設計とXDを使用したデザインの作成』

2022/02/14 Laravel

 

機能要件

今回作成するものは以下の要件を満たすようにする。

  • 期限とラベルを設定してTODOを登録することができる(Create)
  • 登録したTODOの内容と期限とラベルを表示することができる(Read)
  • 登録したTODOの内容と期限とラベルを変更することができる(Update)
  • 完了したTODOを削除することができる(Delete)

CRUDの流れを理解するのにTodoリストを作るのは少し難易度が高い気がするが、
プログラミングスクールではTodoリストを作るところが多いらしいのでこれを第一章の題材にした。

データベース設計

DrawSQLを使用して以下のER図を作成した。

今回はtodoというモデルとlabelというモデルを作り、todoに0個以上のlabelを持たせたいので、todoにlabelカラムを追加するのではなく、中間テーブルを作ってtodoとlabelを繋ぐことにした。削除に関しては物理削除にする。理由は僕は完了したタスクを見返すことがないからだ。

UI/UX設計

AdobeXDを使用してUIデザインと各状態の画面デザインを作成した。DXではなくイラストレーターでもいいと思うしパワポ でもいい。

これが初期画面。期限切れのものが一番上に来て期限とラベルが表示されている。期限切れのものは日付とカレンダーのアイコンが赤くなってほしい。
新しくTODOを追加するには紫色になっている文字をクリックする。今日と明日よりも未来のものは日付で表示される。

 

「TODOを追加」をクリックするとこんな感じのモーダルが出てくる。まだ何も入力していないので押せるのは「キャンセル」だけ。
モーダルを閉じるためにはキャンセルをクリックするかモーダルの外をクリックする。

 

何か文字を入力すると「追加」の色が変わり、クリックすることができるようになる。この時点でモーダルを閉じようとするとアラートが出て欲しい。
期限は特に設定しなければ今日に設定され、ラベルは選択しなくてもTODOを追加することができる。

 

日付をカレンダーから選択するとモーダルに日付が追加される。

 

ラベルをクリックすると登録されているラベルの一覧が表示され、それをクリックすることでラベルを追加することができる。
直接入力してラベルを追加することもできる。

 

ラベルを選択するとモーダルにラベルが追加され、その右にラベルの追加ボタンが表示されるようになる。

 

既に追加されているものは選択できないようにする。

 

直接入力するとこんな感じ。ラベルを2単語にする予定はないので自動で1文字目を大文字にしたい。
右のプラスをクリックするかreturnをクリックすることで追加することができる。

 

追加後はラベルを選択したときと同じように表示され、その右にラベル追加ボタンが表示される。

 

日付と文字列で既に登録されているTODOを登録しようとしたときにはエラーを出す。
ここに関してはそもそも「追加」をクリックできないようにして「既に登録されています」とか表示してもいいかもしれないと思ったけど完全に好みでこっちを選んだ。

 

TODOの追加に成功すると右上に「TODOが追加されました」と表示され、数秒で消える。
そして追加されたTODOはその日付のTODOの一番下に追加される。

 

既に追加されているTODOをクリックするとTODOを更新する為のモーダルが表示され、「追加」という文字は「更新」になって表示される。

 

更新に成功すると「TODOが更新されました」と表示される。

 

完了したTODOを削除するにはTODOの左にある丸をクリックする。
クリックすると丸の色が変わり、チェックが表示され、TODOの文には横線が入るアニメーションがあったらいいなと思う。

 

ついでに右にスライドしながら消えるアニメーションも追加しちゃったりして。どうやるかは後で考える。

 

全てのアニメーションが終わり、TODOが削除されると「TODOが完了しました」と表示される。

 

最後に、期限切れのTODOがないときの表示はこんな感じ。

れっちり
  • れっちり
  • 2021年新卒入社。letroの開発・運用業務を担当しています。

RELATION ENTRY

第一章11『子コンポーネントにプロパティを渡してグループ分けしたtodoを表示する』

第一章11『子コンポーネントにプロパティ...

2022/04/22 Vue.js

前回、todoを期限でグループ分けしたのでtodoGroupsの中のtodoにアクセスするためにはtodoGroups.within.today.todos[0]というようにする必要がある。また、todoGroups.within.todayまで到達したあとの処理は期限切れ、今日のもの、明日のもの、...

続きを読む

第一章10 『取得したtodoを期限でグループ分けする』

第一章10 『取得したtodoを期限でグ...

2022/04/18 Vue.js

取得した後に期限ごとにグループ分けをしたいので関数を追加する。 まず、getTodos関数によって取得したtodosはidの昇順になっているので、期限の日付で並び替えを行う。 以下の関数をmethodsに追加する。getTodos関数で取得してきたtodosをdataのtodos(以後this....

続きを読む

れっちりの記事一覧へ

ページTOPへ