仕事の偏りを見える化したい。React初心者が「Team Visualizer」を作り始めた理由
こんにちは、しゅんです。
仕事や育児の合間にReactやTypeScriptを学びながら、勤怠・タスク管理アプリ「Team Visualizer」を制作しています。
今回は、React初心者の私が、なぜこのアプリを作ろうと思ったのか、現在どのように制作を進めているのかを書いていきます。
アプリを作ろうと思ったきっかけ
きっかけは、職場で感じていた「仕事量の偏り」です。
私の職場では、一人ひとりが担当している仕事の量や内容が異なります。
仕事量が多く、残業時間が増えている人もいれば、比較的早く仕事を終えられる人もいます。
もちろん、担当する業務や役割が違うため、仕事量に差が出ること自体は仕方がありません。
しかし、その差が周囲から見えにくいことに問題があるのではないかと考えました。
問題は「忙しさが見えないこと」
同じ職場で働いていても、ほかの人が現在どの仕事をしているのか、どのくらいの業務を抱えているのかは、意外と分かりません。
例えば、次のような状況があります。
誰がどの仕事を担当しているのか分からない
タスクがどこまで進んでいるのか確認できない
忙しい人がいても周囲が気づけない
仕事を手伝える人がいても、声をかけるタイミングが分からない
一部の人に仕事が集中し、残業時間が増えてしまう
誰かが仕事をしていないということではなく、お互いの状況を共有する仕組みがないことが、仕事量の偏りを生む原因の一つではないかと考えました。
チーム全体の状況が見えるようになれば、忙しい人をほかのメンバーが手伝いやすくなります。
また、仕事を割り振る側も、それぞれの仕事量を確認したうえで担当者を決められるようになります。
「Team Visualizer」に込めた意味
この課題を少しでも減らしたいと思い、勤怠・タスク管理アプリ「Team Visualizer」を作ることにしました。
「Team Visualizer」には、チームの状況を見えるようにする、つまり「チームを見える化する」という意味を込めています。
このアプリでは、次のような情報を一つの画面で確認できることを目指しています。
誰が出勤しているのか
誰がどのタスクを担当しているのか
タスクの期限はいつなのか
タスクがどこまで進んでいるのか
一人が抱えている仕事はいくつあるのか
残業時間が一部の人に偏っていないか
ただタスクを登録するだけではなく、チーム全体が助け合いやすくなるアプリを作りたいと考えています。
なぜReactとTypeScriptを選んだのか
私は最初に、HTMLやCSSを使ったWeb制作から学び始めました。
そこから、見るだけのWebサイトではなく、ユーザーが入力した内容を保存したり、データに合わせて表示が変わったりするアプリを作りたいと思うようになり、Reactの学習を始めました。
Reactは、画面を機能ごとのコンポーネントに分け、それらを組み合わせながら一つのアプリを作れます。
複数の画面や機能を持つTeam Visualizerを制作しながら、実践的に学べるのではないかと考えました。
また、コードのミスを減らし、安全に開発を進めるため、TypeScriptを使用しています。
TypeScriptの型エラーに悩まされることも多いですが、どのようなデータを扱っているのかを意識するきっかけになっています。
現在までの制作過程
開発には、主に次の技術を使用しています。
React
TypeScript
Tailwind CSS
React Router
localStorage
Firebase
最初に考えたのは、アプリを利用する流れです。
現在は、次のような流れで画面を作っています。
ログインする
出勤時間を記録する
ダッシュボードを開く
チーム全体の勤怠やタスクを確認する
自分のタスクを登録・更新する
退勤時間を記録する
まず、ログイン画面と出退勤を記録する画面を作りました。
出勤ボタンを押してからダッシュボードへ進む仕組みにしています。これは、仕事を始める前に出勤時間を記録する習慣をつけるためです。
ログイン後、出勤時間を記録してからダッシュボードへ進みます。
次に、チーム全体の状況を確認するダッシュボードを作りました。
ダッシュボードでは、出勤しているメンバーやタスク数、メンバーごとの仕事量などを確認できるようにしています。
メンバーの勤怠や仕事量を一つの画面で確認できるようにしています。
そのほかにも、次のような画面を少しずつ制作しています。
タスク一覧画面
タスク詳細画面
メンバー一覧画面
メンバー詳細画面
本人用の勤怠確認画面
管理者用の勤怠管理画面
通知機能
設定画面
使いやすさでこだわっていること
Team Visualizerでは、機能を増やすだけでなく、誰でも迷わず使えることを大切にしています。
特に意識しているのは、「チームの状況が一目で分かること」です。
例えば、ダッシュボードではメンバーごとのタスク数を進捗バーで表示し、誰に仕事が集中しているのかを確認しやすくしています。
また、一つの画面に情報を詰め込みすぎないよう、表示するメンバー数を区切り、続きは次のページで確認できるようにしています。
さらに、出勤ボタンを押してからダッシュボードへ進む流れにすることで、打刻を忘れたまま仕事を始めることを防ぎたいと考えています。
まだ改善途中ですが、実際に職場で使う場面を想像しながら、できるだけ操作をシンプルにすることを心がけています。
最初はlocalStorageに保存
最初から本格的なデータベースを使うのは難しいと感じたため、まずはブラウザのlocalStorageを使って勤怠やタスクのデータを保存しています。
localStorageを使うことで、画面から入力したデータを保存し、別の画面に反映する流れを学ぶことができました。
現在はFirebaseとの接続を進めており、今後は複数のユーザーが同じデータを共有できる仕組みに移行したいと考えています。
制作は順調なことばかりではない
制作中は、TypeScriptの型エラーが発生したり、同じ内容が二重に表示されたり、別の画面にデータが反映されなかったりすることがあります。
エラーが続くと、何を直せばよいのか分からなくなることもあります。
それでも、一つずつ原因を確認しながら修正することで、少しずつReactの仕組みが分かるようになってきました。
動くようになったコードだけでなく、途中で発生したエラーや、その原因をどのように考え、解決したのかも、このnoteに記録していきたいと思っています。
今後作りたい機能
今後は、次のような機能を追加する予定です。
Firebaseを使ったログイン機能
勤怠・タスクデータの共有
メンバーごとの仕事量の可視化
残業時間が多い人を確認できる機能
期限が近いタスクの通知
スマートフォンへの対応
テストやセキュリティ面の改善
まだ完成までは時間がかかりそうですが、少しずつ制作を進めています。
最後に
「仕事の偏りを少しでも減らしたい」
「チームがお互いに助け合える環境を作りたい」
そんな思いから、Team Visualizerの制作を始めました。
React初心者なので、遠回りしたり、何度もエラーで止まったりしています。
それでも、自分が実際に感じた課題を、自分で作ったアプリによって解決することが目標です。
次回以降は、各画面の作り方や、制作中に学んだReactの知識、発生したエラーについても書いていきます。
皆さんの職場でも、誰がどのくらい仕事を抱えているのか分かりにくいと感じることはありますか？
同じようにReactを学習している方や、個人でアプリを制作している方ともつながれたらうれしいです。
最後まで読んでいただき、ありがとうございました。
