2024年3月納品、医療福祉事業者向け勤怠管理システムの技術選定

今日は2024年3月納品の医療福祉事業者向け勤怠管理システム開発で用いている技術について書いてみたいと思います。

選定技術の推移

2022年頃までの技術選定

自社ではウェブサイト開発の場合には、PHPやWordPressを用いた開発が多かったので、業務システム開発の際にもPHPに合わせてLaravelを利用する場合が多かったです。Laravelはフルスタックフレームワークとして開発に必要な便利機能が盛り込まれていて、生産性高く開発を行うことができるフレームワークとして非常に優秀です。なので、2022年頃まではLaravelを中心に選定して開発を行ってきました。実際にLaravelで構築してきたウェブシステムは私が独立して以降5件以上程納品しているので、結構経験を積み上げてきていると言えると思います。

2023年以降の技術選定

2022の年末頃からはフロントエンドの技術としてReactを使うことが増えてきました。私自身もSESでReactの開発を行うチームのリーダーとしてプロジェクトに参画するようになって、Reactの経験を積み上げてきました。

2022～2023年頃からは、ReactにReactServerComponentsという技術が新しく作られて、Reactをサーバーサイドで動かす試みが始まっていましたので、フロントエンドのSPAを実現するためのフレームワークという立ち位置からMPA（Laravelのようにサーバーサイドで動作する）フルスタックフレームワークとしての立ち位置に推移を始めているように感じています。Reactのフレームワークと言えばNext.jsが有名でしたが、2022年にRemixが登場してからは、RemixがMPAフルスタックフレームワークとして非常にシンプルな機能を持った使いやすい機能を備えていたため、2023年からは自社ではRemixを中心に使うようになってきました。

本勤怠管理システム開発支援に利用されている技術スタック

技術の概要

今回、勤怠管理システムの開発に当たって、以下の技術を利用した開発に挑戦しました。

Remixについて

今回Remixをフレームワークに利用しています。RemixはCloudflareでの利用に最適化されているReactベースのフルスタックフレームワークで、RSC（React Server Components）によるSSR（サーバーサイドレンダリング）を基本動作とすることが特徴です。Remixはウェブ標準に準拠した造りになっていることから、FetchAPIを用いてサーバーサイドでSSRとして動作させながらMPAを構築することができつつも、Reactの特性である高速な画面描画ができるため、UXも非常に良いものにできることが特徴です。

Cloudflare Pagesについて

Cloudflare Pages はJamstackアプリケーションを構築する上でのホスティング先としてCloudflareが用意している環境です。最近Cloudflare Pages FunctionsというサービスができてきたおかげでPagesにデプロイしたサーバーサイドアプリケーションがエッジサイドで動作させることができるようになりました。なので、Remixもエッジサイドで動作することで非常に高速なレスポンスを実現できるようになっています。

また、Pagesに関しては、GitHubのリポジトリと連携しており、mainブランチにプルリクエストをマージするだけでデプロイが走るというようなCI/CDを簡単に組むことができます。Cloudflareを今回初めて使っていますが、CI/CDの構築をGitHub Actionsで組み合わせて構築できるため、非常に便利だと感じました。一度Cloudflareでの開発を経験してしまうと、他のクラウドでの開発体験が非常に良くないと感じてしまうと思いますので、中毒性がかなり高い環境としておススメ出来ます。

Cloudflare D1 と Drizzle ORM について

Cloudflareでデータベースを扱う場合には、RDBならD1というデータベースが標準搭載されていますので、これを一旦使ってみることにしました。D1が標準対応しているORMはDrizzle ORMというものなので、こちらも初めて使ってみることにしました。Drizzle ORMは現在精力的に開発がされているOSSなので、まだバグなどが残っている状態ですが、一通りのやりたいことはできる状態になっていましたので、無事に今回の機能実装を終えることができています。テーブルの結合やトランザクションなどに対応ができました。

D1の難点

D1の難点としては、バックアップなどの機能自体もCloudflareが提供してはいるものの、データベースの保守をするためのツール類が乏しいため、都度プログラムを書いて何とかする必要があると感じている点が難点としてあります。データベースの拡張性や安定性などを考えると、Cloudflareをデータベースとして扱うのはまだ時期尚早であると感じたため、データベース部分だけAWSなどの別のクラウドやオンラインデータベースに逃がすことを検討し始めています。

Zod について

フォームのバリデーションライブラリとしてはReactならZodが良いという記事をよく見るようになったので、自社でもZodを導入してみましたが、非常に便利に扱うことができたため、今後もZodを標準的なバリデーションライブラリとして利用していこうと考えています。

Remix と Cloudflare の開発体験が非常に良好

Remix と Cloudflare を用いた開発体験が非常に良好なので、今後自社の基本的な技術選定としては、Remix@Cloudfalre という構成で各種システムの構築に取り組んでいこうと考えています。Remix自体はReactをベースとしたシステムを構築する上での標準的なフレームワークとして今後使われるケースが増えていくと思いますし、実際に使ってみたところ、非常にシンプルで使いやすいものでした。

TypeScript の型チェックが便利

TypeScriptにも慣れてくると、型チェック機能により不具合を減らせるようになってくるので、生産性を高く保つ上では有効な環境であると各々が感じられるようになってきてます。PHPに慣れた技術者からすると、Reactに慣れていくことの難しさはまだまだあるのですが、実際にReactの便利さに慣れてくると逆戻りはできないと感じています。私自身もReactの経験は3年目なので、板についてきていて、今後も当分はReactを使った開発を推進していきたいと考えているところです。

Remix の評判も上々

また、このプロジェクトに参画をしているメンバーからもRemixを用いたMPA構成の開発生産性は非常に高いという声をもらうことができているので、Remixに代わるフレームワークが出てこない限りは当分はJSXでReactを書くということを続けていこうと思います。

代替候補はHonoか

HonoというフレームワークがCloudflareから出ていますが、まだ開発途中のようなので、これが実用レベルで使えるようになった暁には、Reactに左右されずに、ウェブ標準の技術をベースに扱えるフレームワークとして主要な立ち位置に君臨する時代は来るかもしれないと感じています。最近流行ているHTMXなども、その流れの中にあると感じていますので、ウェブ標準回帰の流れに乗って、この先の技術選定を考え続けていこうと考えているところです。

Remixを自社の中心技術に沿えて

1～2年はまだReactが中心になる時代が続くと思えるので、この先の1～2年に関しては、ReactおよびRemixを自社の技術選定の中心に添えて前進していこうと考えております。AWSやGoogleCloudなどのメガクラウド各社が、飛び切り使いやすい環境を出して来たら、それらを扱うことも検討しますが、今の世の中の動きからすると、Remix with TypeScript という構成が安泰なように思えます。

特にクラウド環境に関してはお客様の環境に合わせる必要があるので、AWSに実装する場合などにはLambda@Edgeを使った設定等骨が折れる側面もありますので、CloudflareのようにRemixが簡単に動く環境が扱える場合には、上記の方針で進んでいこうと思っています。RemixにもSPAモードができたのが2024年の2月のことなので、SPAモードを使えばAWSのS3に設置することなどもできることから、Remixを選定するモチベーションは年々高まっていくと思えます。

D1に難ありということを上記にも書いた通り、システム全体で考えた場合には、まだまだ環境については検討が必要なので、色々と試しながら最適な環境や構成を見出せるように挑戦を続けたいと思います。直近に関してはAPN（AWSのパートナー）になることも視野に入れる形で、データベース回りをAWSに置く方向で検討しているので、その想定で前進しようと思います。

それでは、皆さんも良い技術選定を。