主に個人の勤怠記録を目的とした Web アプリケーション、"Working time around"を GitHub に公開しました。
Web アプリケーションといいながらサーバーサイドの処理をまったく行わずデータはブラウザに保存する Single Page Application(SPA)なのでビルドを適当なホスティングサービスに置けばそれだけで動きます。ライブデモを Azure Storage に用意したのでどんなものかはそちらでおたしかめください。
いまどきの Web アプリにもかかわらずスタンドアローンという点からもおわかりのように、本アプリは実用を目的したものというよりは私個人の学習成果のアウトプットという性格の強いものです。最近業務ではフロントエンドへのコミットばっかりなのですが、派生開発のシステムで動きの速いフロントエンドの最先端の動向を取りこんでいくのは容易ではなく、学習の成果はなかなか反映させられません。そんな中でスマートフォン用の勤怠システムやアプリの情報を収集する機会があり、アップデートされてないクライアントの数々を目にして、これくらいなら作っちゃえばいいのでは?と思ったのが開発のきっかけ。せっかくなので使いたい技術やパッケージをここぞとばかりに次のとおりぶち込んでみました。
- 言語はTypeScript
- バンドラーはParcel
- フレームワークはReact、Hooks APIを全面活用(これがいちばんの目的)
- UI はMaterial Components for React(MDC React)
- テスティングフレームワークはJest + react-testing-library
- useReducer使ってデータ管理も React だけで完結させるのはさすがに他人に理解されなさそうなのでReduxは採用、typescript-fsa + typescript-fsa-reducersで簡潔に表現
- 日時操作はdayjs
- あとはわりに定番(react-router, react-intl, redux-persist, etc.)
- ディレクトリ構成は Atomic Design + re-ducks
……とまあこんな感じ。これらに関心のある方にはすこしは参考になる、かもしれません。洗練されていないと指を指して笑うとかに。
学習成果のアウトプットなのでこの先どうするかは未定ですが、ネタもなくはないのであとすこしは更新するかもしれません。
あ、勤務環境の悪い職場にいる方は労働基準監督署などに訴えるときなどに備えて使ってはいかがかと思います(別にこれでなくてもかまいませんが。手書きのメモでも記録は重要)。