【個人開発】React+Tauriで工数管理アプリを作って見ました。

作りました。

社内の工数管理システムがクソ古き良きデザインであったため、モダナイズを兼ねて作って見ました。

公開用ソースコードはこちらになります。

どんなアプリ？

社員の工数を管理するだけのシンプルなアプリです。

日付別で工数を登録します。

別画面でオーダー(案件)に紐づくコードや工程に紐づくコードを登録できます。

ユーザー情報を登録出来るようになっていますが、会社側のシステムが幸いCSVアップロードによる登録をサポートしていたため、将来的には自動で会社側システムへ登録されるようにする想定で設けています。

社内の工数管理システムが古き良きデザインというのも冗談ではなく、操作性はあまり良くありません。そのため、部内ではExcelでツールを作成してCSVを出力、そのCSVで工数登録してます。

ただ、そのExcelツールも表形式というExcelの特性上視認性の悪い部分があり、より使いやすいツールを求めて作りました。

画面構築のライブラリとして使用しました。

今回使ったことなかったReactの習得も兼ねて選択しました。

アプリケーションの状態管理のために使いました。

useReducerでの運用も考えましたが、アプリの特性上グローバル管理される方が実装しやすかった、ライブラリとしてガイドラインがある方がとっつきやすかったという理由で採用しました。

Reactアプリをデスクトップアプリ化するために使いました。

最初、Electronを使おうと思ってましたがパフォーマンスの問題から、あまりRust側の実装をしないことを前提に採用しました。

アプリで持つ状態の永続化のために使いました。

通常のReactアプリでReduxで状態管理するにはWeb APIと通信して永続化したりすると思いますが、Web APIコール=SQL発行と見立てて、アプリ内にデータを永続化するようにしました。

デザインの統一のために使いました。

styled-componentの使用も考えましたが、まずは出来る限り早くリリースすることを優先したため、デザインは既存のデザインシステムを利用することにしました。

技術選定が終わってから完成まで8ヶ月掛かりました。

ほとんど業務時間外のプライベートな時間で実装しました。

今回、初めて1からアプリを個人的に設計、実装しました。実際に手をつけてみると、仕事では出来ているからと思っても思うように進まないこともあって、1人でやり切る大変さを感じました。

また、ツールはまだ十分使いやすい域に達してないと思ってます。なので、継続的開発を続けてより使いやすいツールにしていこうと思います。GitHubで公開しているものは今後更新するか分かりませんが、社内向けに管理しているコードが大きく変わったら公開も考えようと思います。