Flutterアプリケーション開発概論

【タスク設計】teams/{teamId}/tasks/{taskId} に保存する項目を決める

26LINE風チームタスク管理アプリを作りながら、ログイン・データベース・権限管理を学ぶ
FlutteriOSAndroidMacOSWindows基礎から学ぶ開発アプリ開発

このページでやること

このページでは、タスクをFirestoreに保存するときの形を決めます。

タスクとは、チームの中で管理する作業のことです。

今回の保存場所はここです。

teams/{teamId}/tasks/{taskId}

短く言うと、こうです。

チームの中に
↓
そのチーム専用のタスクを保存する

今日のゴール

次のようなタスクデータを作る準備をします。

teams/{teamId}/tasks/{taskId}
  title: タスク名
  description: タスクの説明
  status: todo
  priority: normal
  assigneeEmail: 担当者メール
  assigneeId: 担当者のuid
  createdBy: 作成者のuid
  createdAt: 作成日時
  updatedAt: 更新日時

このページでは、まだタスク作成画面は作りません。

まずは、どんな項目を保存するかを整理します。


このページで出てくる単語

単語一言説明
taskタスク。やるべき作業
taskIdタスクごとのID
titleタスク名
descriptionタスクの説明
status進行状況
priority優先度
assignee担当者
createdBy作成者
createdAt作成日時
updatedAt更新日時

ID とは、データを見分けるための名前や番号です。


npmや環境変数はこのページで必要?

このページでは、npmは使いません。

環境変数も設定しません。

このページでやることは、Firestoreに保存するタスクの形を決めることです。

タスクに必要な項目を確認する
↓
保存場所を確認する
↓
次のタスク一覧画面に進む

Step 1:保存場所を確認する

今回のタスクは、チームごとに保存します。

保存場所はここです。

teams/{teamId}/tasks/{taskId}

たとえば、teamIdteam001 の場合は、こうなります。

teams/team001/tasks/{taskId}

さらに、taskIdtask001 なら、こうです。

teams/team001/tasks/task001

Step 2:なぜteamsの中にtasksを入れるのか

タスクは、チームごとに分けたいからです。

たとえば、次のようにチームが2つあるとします。

開発チーム
営業チーム

それぞれのタスクは違います。

開発チーム
  ログイン画面を作る
  Firestore接続を確認する

営業チーム
  見積書を送る
  打ち合わせ日程を確認する

これを混ぜたくないので、タスクはチームの中に保存します。

teams/{teamId}/tasks/{taskId}

Step 3:保存する項目を決める

今回のタスクには、次の項目を保存します。

項目保存する内容
titleタスク名
descriptionタスクの詳しい説明
status未対応・進行中・完了
priority優先度
assigneeEmail担当者メール
assigneeId担当者のuid
createdByタスクを作った人のuid
createdAt作成日時
updatedAt更新日時

最初は多く見えますが、1つずつ見るとシンプルです。


Step 4:titleを決める

title は、タスク名です。

例:

ログイン画面を作る
資料を確認する
見積書を送る

Firestoreでは、こう保存します。

title: ログイン画面を作る

title は必須にします。

必須とは、必ず入力する項目という意味です。


Step 5:descriptionを決める

description は、タスクの詳しい説明です。

例:

メールアドレスとパスワードでログインできる画面を作る。
エラー表示も入れる。

Firestoreでは、こう保存します。

description: メールアドレスとパスワードでログインできる画面を作る。

description は空でもOKにします。

短いタスクなら、説明がなくても使えるからです。


Step 6:statusを決める

status は、タスクの進行状況です。

今回使う値は3つです。

status表示名意味
todo未対応まだ着手していない
doing進行中今作業している
done完了作業が終わった

最初にタスクを作るときは、基本的に todo にします。

status: todo

Step 7:priorityを決める

priority は、優先度です。

今回使う値は3つです。

priority表示名意味
low急ぎではない
normal通常
high優先して対応する

最初は、迷わないように normal を初期値にします。

priority: normal

Step 8:assigneeEmailを決める

assigneeEmail は、担当者のメールアドレスです。

担当者とは、そのタスクをやる人のことです。

例:

assigneeEmail: yamada@example.com

最初の実装では、担当者メールを入力できるようにします。

まだ担当者を決めない場合は、空文字でもOKにします。

assigneeEmail:

Step 9:assigneeIdを決める

assigneeId は、担当者の uid です。

uid は、Firebase Authenticationがユーザーごとに作るIDです。

例:

assigneeId: abc123

ただし、最初の実装では、メールだけ入力して、uid はあとで検索して入れる形でもOKです。

そのため、最初は空文字にしておきます。

assigneeId:

あとでメンバー追加や担当者選択を作るときに、正しく入れていきます。


Step 10:createdByを決める

createdBy は、タスクを作った人の uid です。

例:

createdBy: abc123

これは、ログイン中のユーザーから取得します。

Flutterでは、あとで次のように取ります。

final user = FirebaseAuth.instance.currentUser;

そして、保存時にこう使います。

createdBy: user.uid

Step 11:createdAtとupdatedAtを決める

createdAt は作成日時です。

updatedAt は更新日時です。

Firestoreでは、次を使って保存します。

FieldValue.serverTimestamp()

保存イメージはこうです。

createdAt: FieldValue.serverTimestamp()
updatedAt: FieldValue.serverTimestamp()

serverTimestamp() は、Firestore側の現在時刻を入れる命令です。

スマホやパソコンの時計ではなく、Firebase側の時刻を使います。


Step 12:完成形のタスクデータ

最初に作るタスクデータは、この形にします。

{
  'title': title,
  'description': description,
  'status': 'todo',
  'priority': priority,
  'assigneeEmail': assigneeEmail,
  'assigneeId': '',
  'createdBy': user.uid,
  'createdAt': FieldValue.serverTimestamp(),
  'updatedAt': FieldValue.serverTimestamp(),
}

Firestore上では、たとえばこう見えます。

teams/team001/tasks/task001
  title: ログイン画面を作る
  description: メールアドレスとパスワードでログインするUIを作る
  status: todo
  priority: normal
  assigneeEmail: yamada@example.com
  assigneeId:
  createdBy: abc123
  createdAt: 作成日時
  updatedAt: 更新日時

Step 13:画面で使う項目

タスク一覧画面では、主にこの項目を使います。

画面表示使う項目
タスク名title
説明description
状態ラベルstatus
優先度ラベルpriority
担当者assigneeEmail

最初は、これだけ見えれば十分です。


Step 14:タスク作成画面で入力する項目

タスク作成画面では、まず次の4つを入力できるようにします。

入力項目Firestoreの項目
タスク名title
説明description
優先度priority
担当者メールassigneeEmail

status は、新規作成時は自動で todo にします。

createdBycreatedAtupdatedAt も自動で入れます。


Step 15:ステータス変更で使う項目

あとで、タスクを「未対応 → 進行中 → 完了」に変える処理を作ります。

そのときは、この項目を更新します。

status
updatedAt

例:

status: doing
updatedAt: 更新日時

完了にしたときは、こうです。

status: done
updatedAt: 更新日時

Step 16:Firestoreでの最終イメージ

全体としては、次の形になります。

teams
  └ team001
      ├ name: 開発チーム
      ├ ownerId: abc123
      ├ memberIds: [abc123]
      │
      └ tasks
          └ task001
              ├ title: ログイン画面を作る
              ├ description: メールとパスワードの入力欄を作る
              ├ status: todo
              ├ priority: normal
              ├ assigneeEmail: yamada@example.com
              ├ assigneeId:
              ├ createdBy: abc123
              ├ createdAt: 作成日時
              └ updatedAt: 更新日時

この形を使って、次のページからタスク一覧画面を作ります。


よくある混乱ポイント

混乱すること考え方
createdByassigneeId の違いcreatedBy は作った人、assigneeId は担当者
statuspriority の違いstatus は進み具合、priority は重要度
createdAtupdatedAt の違い作成日時と更新日時
なぜtasksをteamsの中に入れるのかチームごとにタスクを分けるため
assigneeEmailassigneeId の違いメールは表示・入力用、uidは正確な識別用

最短まとめ

読むのが大変な人は、ここだけ見てください。

タスクの保存場所はここです。

teams/{teamId}/tasks/{taskId}

保存する項目はこれです。

title
description
status
priority
assigneeEmail
assigneeId
createdBy
createdAt
updatedAt

最初に作るときは、こうします。

status: todo
priority: normal
assigneeId: 空文字
createdBy: ログイン中ユーザーのuid
createdAt: Firestore側の現在時刻
updatedAt: Firestore側の現在時刻

チェックリスト

□ tasksの保存場所を理解した
□ teams/{teamId}/tasks/{taskId} の形を確認した
□ titleを保存することを確認した
□ descriptionを保存することを確認した
□ statusを保存することを確認した
□ priorityを保存することを確認した
□ assigneeEmailを保存することを確認した
□ assigneeIdを保存することを確認した
□ createdByを保存することを確認した
□ createdAtを保存することを確認した
□ updatedAtを保存することを確認した

ミニ確認問題

Q1. タスクはFirestoreのどこに保存しますか?

回答

次の場所に保存します。

teams/{teamId}/tasks/{taskId}

Q2. status は何を表しますか?

回答

タスクの進行状況を表します。

今回使う値は、tododoingdone です。


Q3. priority は何を表しますか?

回答

タスクの優先度を表します。

今回使う値は、lownormalhigh です。


Q4. createdBy には何を入れますか?

回答

タスクを作ったログイン中ユーザーの uid を入れます。


Q5. このページでnpmや環境変数は必要ですか?

回答

必要ありません。

このページでは、タスクデータの設計を決めるだけです。


このページのまとめ

  • タスクは teams/{teamId}/tasks/{taskId} に保存する。
  • チームの中にタスクを入れることで、チームごとに作業を分けられる。
  • title はタスク名。
  • description はタスク説明。
  • status は進行状況。
  • priority は優先度。
  • assigneeEmail は担当者メール。
  • assigneeId は担当者uid。
  • createdBy は作成者uid。
  • createdAt は作成日時。
  • updatedAt は更新日時。
  • このページではnpmや環境変数は不要。

次のページでやること

次のページでは、チームをタップしてタスク一覧画面へ移動します。

teamIdteamName を渡して、そのチーム専用のタスク一覧画面を開きます。

教材トップへ戻る