💭

RubyとStimulusを使って勤怠打刻システムを作った話

2021/10/12に公開

これはなに?

DHHとBasecampが開発しているJavascriptフレームワークStimulusを使ってみて、勤怠打刻システムを個人開発したのでその紹介とStimulusに対する感想です。

Stimulusとは

StimulusはHTMLタグのアノテーションに設定された内容に応じてDOMに挙動を実装できるフレームワークです。

https://stimulus.hotwired.dev/

作ったもの

打刻修正もこんな感じで可能

こだわったポイント

タイムライン表示

よくあるテーブルに数字が羅列した画面でなく、このようにタイムラインで表示されたほうがチームメンバーの状況把握をしやすいんじゃないか?ということで、稼働時間をタイムラインで表示する形式にしました。
スクショがありませんが、月間表示・週間表示・メンバー一覧表示などあります。

カレンダーは日本の祝日に対応

カレンダーにはdaterangepickerを使っているのですが、サーバーから返した祝日データと照らし合わせて、祝日なら赤くするような実装になっています。
https://www.daterangepicker.com/

これらのサードパーティライブラリもStimulusでラップしてDOMに振る舞いとして実装しています。
Stimulusの標準のライフサイクルを使えば大体のことは困らなそうかなと思います。

祝日データの生成はholidays Gemを使っています。
https://github.com/holidays/holidays

Stimulusの感想

ReactやVueも普段から使うのですが、Railsを使って小規模でサクッと開発するにはとても使いやすいと思います。

ただ他のJavascriptフレームワークと流儀が異なりすぎていて、なかなか広まりにくそうな気がします。

(HTMLのアノテーションにDOMの振る舞いを定義できるので)RailsにおいてはStimulusとヘルパーメソッドとの相性がよく、「viewでヘルパーメソッドに情報を渡したら、その情報がStimulusまで到達して渡した情報をjsで扱える」という状態まで簡単に持っていけるので生産性は高そうです。

コード

実はこれを作ったのは1年ほど前なので、Railsは6系でした。
今なら(まだアルファですが)Rails 7はStimulusが使えるようになるgemが入っていますし、Stimulusも 2.0 3.0が出ているので新しい環境で作りたい。

コードはこちら
https://github.com/ryooo/timestamper

なお、ログイン機能、組織ごとでのユーザー管理機能、組織管理機能とか、一通り必要そうなものは入っています。

以上、読んでくださりありがとうございました :pray:

Happy Elements

Discussion