見積りバイアスを修正するアプリを作った話【チーム開発：Best Award受賞】
はじめに
開発エンジニアへのキャリアチェンジを目指し、内定直結型エンジニア学習プログラム「アプレンティス」に３期生として参加しています。
1/22～1/28の1週間でプログラムの一環としてチーム開発に取り組みんだ結果、Best Awardを受賞することができました。今回の記事では「何を考え」「何をやったのか」を書いていきたいと思います。
今回作成したアプリ「ちょうどいい時間管理アプリ」の画面をチラッと↓
簡単に自己紹介
- 福岡でWEB制作やデザインを行っているアラフィフ（女性）
- 子ども３人、学費のために働いてます
- 趣味は音楽。ギター、ベースなど楽器も弾くけど声楽メイン。でも時間がなくお休み中。
チームのメンバー構成
チームメンバーは３人です。
- すでに業務委託で実務経験のある方
- 企業で開発の経験がある方
- HTML/CSSは実務で使用、開発は３カ月前からスタート、開発の実務経験なしの私
進捗管理について
集中して開発に取り組める期間が１週間と短いためチームで心配していたのが「徹夜でやらないと終わらない状態になるのでは？」という事でした。
家庭のあるメンバーもいるので最初から「終わらなければ徹夜すればいい」という考えでは自分以外の家族に支障が出てしまい仕事を長く続けらず、組織にはマイナスの結果をもたらします。
そこで、事前に２期生の方々が書いた開発報告ブログで流れを把握し
- チーム開発ウィークまでにコードを書くだけの状態まで持っていく
ことを目標に計画を作成しました。
そのおかげか、無理はせずにプレゼンテーションの日までに基本機能の実装まで行うことが出来ました。
使用ツール
記録や進捗管理に使用したツールはNotionです。
ガントチャートの作成もできるので重宝しました。
※複数人で無料で使う場合は容量に上限があります
アプリのアイデア・開発背景
今回のアプリ開発のお題は「自分たちの役に立つもの」。
そこでアプレンティスの学習を進めていく中で役に立つものを作ろうという事で、メンバーがそれぞれで考えたアプリのアイデアを出し合いました。
その中でも、単純な学習記録ではなく、プロジェクトが遅れていく原因そのものにフォーカスして時間計測をしていくアプリのアイデアが採用となりました。
アプリの目的
- 時間の見積もりを正確に行えるようになる
そのために必要な機能
- 正確な時間をはかるためのタイマー
- 過去の実績から「そのタスクにかかる平均的な時間」を提案する
付属機能
- 日報投稿
進捗管理は仕事上の最重要課題であり、実際に仕事をすれば全員が悩む部分であること、また個人的にもこのアプリの解決策のアイデアが新しいと感じたので作るのが楽しみでした。
インセプションデッキ
設計を行う前にインセプションデッキを作成しました。
インセプションデッキとは？
プロジェクトの全体像を記載し、チームで共有するドキュメント
具体的な作り方はこちらの記事が分かりやすかったです。↓
実際に作成してみると
- 目的が明確になる
- 開発するアプリのメイン機能＝売りは何か？がはっきりする
- 売りがはっきりすることでUIが決まりやすい
- デザインの前段階のイメージが決める
- 限られた開発の中での優先順位が決まる
といったメリットがありました。
要件定義
システムとして必要な要件をまとめました。
- 実行時間を考慮した上でタスクを管理することができる
- 計画的にタスクを遂行できる
- 時間配分を考えてタスクを管理できる→タスクごとの実行時間の比較ができる
- 実行時間を意識することができる→時間に対するバイアスを修正できる
機能一覧
ログイン機能
- 新規アカウント登録
- ログイン機能
タスク登録
- タスクごとに１日の平均実行時間が表示できる
- タスクのプルダウン表示
タイマー管理
- 実行するタスクを選択してスタートボタンで開始
- 進行中の時間推移が表示される
- タスク終了時にストップボタンで終了。
１日の振り返り
実行タスク、時間がテキストエリアに出力され、振り返りを記入できる
この振り返りを蓄積して確認できるようにする
日報の投稿
振り返りを投稿できるようにする（優先：Discord）
実績が可視化（グラフ）されて確認することができる
1日のタスク平均時間TOP5を表示する
スライド作成
要件定義の次にプレゼンで使用するスライド作成を行いました。
文字で骨子のみ作成し全員で共有しましたが、プレゼンの概要を作ることで「何が重要で」「何がアピールポイントであるのか」が明確になりました。
例えば今回のアプリでは「実行記録によるバイアス修正」がメインの機能です。そうすると重要な機能は「時間をはかる機能＝タイマー」になります。
そのためＵＩでタイマーが特に大きな面積を占めています。
ここがズレると製品が出来上がった時に「販売時や使用時の目的とのズレ」や「使いづらさ」が生じます。そのため、このスライド作成も重要な作業でした。
設計
ワイヤーフレーム
Figma使用。ワイヤーフレームは通常は骨子程度ですが、ほぼデザインまで完成していたためデザインもこちらを採用して開発を行いました。
テーブル定義書
当初のテーブル定義書。頻繁に使うため常にブラウザで表示しながら実装しました。
技術アーキテクチャ
タスク出し
開発のタスク分けについては悩みましたが
- 次回の開発を考えて、それぞれがデータベース・バックエンド・フロンドエンドの経験を積む
- 期限内に制作を終える
ことを優先し、データベース・バックエンド・フロントエンドと役割を分けるのではなく、コンポーネントごとで分担して開発を行うことにしました。
開発の分割方法については、どのチームも迷う所だと思うのでコンポーネントで分割して開発するメリットデメリットを記載しておきます。
実際のタスクのリスト
- データベース・サンプルデータクエリ作成
- ベースのフォルダ、CSS作成
- プレゼンテーション
- コンポーネントごとのタスク分けは以下の表で行いました。
環境構築
Dockerの導入でネックになったのはdocker_compose.ymlの作成でした。幸いメンバーが作成を担ってくださったので、環境構築にDockerを採用することができました。
個人的には開発もDockerも初めてだったため並行して勉強しながら使用していけるかが不安でしたが、データベースの変更が２～３回あり、削除＆再立ち上げにて短時間での再構築が出来たため、重宝しました。
ここまでの項目とプレゼン資料作成を実装ウィーク前までに終わらせ１週間の実装に入りました。
実装
実装では分担しコンポーネントごとに作成をしました。担当のコンポーネントを中心に記述します。
新規登録・ログイン機能
新規登録、ログイン機能ともにformタグを使用したPOST経由でデータベースに登録をする方法を採用しました。
セッションストレージ？何ですか、それ？
「メイン画面へはユーザーＩＤをセッションストレージで渡してほしい」との要望を受けましたが最初は「セ、セッションストレージ???何ですかそれ？」と聞いたぐらい用語の意味もわからない状態でした。
ログイン状態からのメイン画面へのユーザーIDとユーザー名の受け渡しは、セッション変数→セッションストレージという手順で行いました。最初はうまくいかず苦労しましたが、無事成功。セッションストレージ、便利！
日報登録機能
日報登録の実装もformタグを使用したPOSTでデータベースに保存する方法を採用しました。
新規登録、ログイン機能とともに登録にformタグを使用していますが、これには私なりのこだわりがありました。続きます↓
アクセシビリティに対応した入力フォーム
入力にformやinputを使用しているのは、視力に障害がある方が使用している各種読み上げ機能（VoiceOver等）に対応しているためです。divで作成した場合、個別に機能をつけないとうまく作動しません。
視覚障害を持つ方から、ほとんどのWEBサイトやアプリがHTMLのバグや複雑なコンテンツ構成で読み上げ機能を使用しても手続きなどが行えない現状を伺いました。
今回は時間制限があったので自分の担当エリアでさえもlabelの設定や検証もできませんでしたが、ポートフォリオ作成時には全コンポーネントで念頭において作成したいと思っています。
以前に書いた記事はこちらです↓
データベースの重要性
日報登録機能を作成時に、登録日時のカラムを作らないと機能を作成できない事に気づき、急遽データベースに挿入しました。
最初にデータベースの設計をしたのは私だったのですが、データベース設計の重要性と後への影響の大きさを再認識しました。
-
各コンポーネントでどの情報を引っ張って作るのか、ある程度のめどをつけられる事ができるのが大事→つまり技術力や場数が大事
-
将来はどのような機能が入るor入りそうかをヒアリング＆こちらで想定して設計する（拡張性？）
プレゼンテーション
プレゼン資料の仕上げと発表を担当。時間が３分と短いため以下の３つの事を中心にアプリのメインの目的と機能、およびプレゼンの中での一貫性に注意することを念頭におきました。
- 何のために作ったのか
- メインの機能は何か？それは目的を達成できるのか？なぜ達成できるのか？
- メインの機能の紹介
その結果メンターからも「UIもプレゼンも大変わかりやすい」との評価をいただいたので、目的は達成できたと思います。
プレゼン。メンバーが作ったロゴを入れてデザインが締まりました。
アプリの紹介
新規登録画面
ログイン画面
①カレンダーで日付を選択し、データを表示します。もちろん過去日も未来日も設定可能です。
②グラフではタイマーで計測した過去の実績から、TOP５のタスクを表示しています。このグラフを見ることで実際は自分が何に時間を使っているのかを把握することができます。
③タスク設定欄です。新規登録or過去のタスクを選択できます。各タスクにはタイマーで計測した過去の１日あたりの平均使用時間が表示されているので「いつもこれだけかかっている」目安がわかり、予測が正確になります
④タイマーが要であるため、大きくしています。タスクを選択しボタンを押すと計測がはじまります。終わると⑤のリストに表示されます。
⑥日報を記述する欄です。保存もできますし⑦の「投稿」ボタンでDiscordへの投稿も可能です。
アプリの今後の課題
もちろんアプリは完全に出来上がった状態ではありません。以下のような課題があるため合間をみて追加していきたいです。
- Twitterへの投稿機能
- 投稿保存後にTOP画面が今日の日付で表示される仕様（過去日で保存しても今日の日付ページに戻る）の改善
- タスク編集の作り込み
振り返り
最後に
ここまで読んでくださってありがとうございました。
開発は全くはじめての状態で挑戦し「用語自体がわからない」「わからない単語が多すぎて１つずつ調べていく」状態から１つずつ解決していきましたが、失敗も含めて成長できたのではと思います。
今後も学習を進め、次回のチーム開発でより良いものを作れるように精進します。
Discussion