IB-Mesのフロントエンドにおける技術選定について
IB-Mesのフロントエンドにおける技術選定について
はじめに
こんにちは、さわだです。
弊社では製造業向けのMESパッケージ「IB-Mes」をSaasとして、提供しています。
今回は、IB-Mesにおける技術選定をフロントエンドに特化して解説していきたいと思います。
選定方針
オンプレ版で動作していたIB-MesはWPF(Windowsアプリ）で提供されていました。
Windows版で提供されていたIB-Mesを、Saas版(Webアプリ）として提供するに当たり、技術選定として下記の方針としました。
できる限りモダンな環境としよう
テクノロジーを見ても、Web関連技術の変化はものすごく早く、ビジネス面でも日々求められているニーズが変化していきます。
求められているものに対して、スピーディーに実現できる環境としています。
DX(Developer Experience)を高めよう
日々新機能の追加やメンテナンスを行うため、開発体験も重視することとしました。
できる限り楽で、楽しく、イキイキと開発できる環境を目指す。
主要な技術選定
TypeScript
JavaScriptは動的型付けとなっており、型での検証が行われず、大規模開発では不向きです。
できる限りコンパイル時点でタイプミスなど検出したい、インテリセンスのメリットを最大限享受したいという理由からTypeScriptを採用しています。
IB-Mesが提供するAPI群もTypeScriptによる型を提供しているため、どの検索条件が存在するのか、どういったデータを返却するのかがわかるため、開発効率向上に繋がっています。
React
今となってはモダンなフロントエンドを作る上では必須となりました。
React、Vueどちらを採用するかは悩む点ではありましたが、開発開始時点ではVue 2.xしかでておらず、Vue2.xではTypeScriptサポートが弱く、大規模開発になった際に不安が残りました。（Vue3.xでは解消されたと聞いてます。）
そのため、Reactを採用しています。
Next.js
ファイルベースのルーティングや、webpackの設定が不要（ゼロコンフィグ）など便利な機能が提供されているため、Next.jsを採用しています。
IB-Mesは認証必須となるため、あまりSSR(Server-side Rendering)を利用できていませんが、ヘルプページなど静的なページなど活用していこうと考えています。
IB-Mesでは、PWAによるインストール機能を提供していますが、これもNext.jsのライブラリであるnext-pwaによって実現しています。
Cypress
今までE2Eテストの自動化を行えておらず、人間系によってリグレッションテストを実施していました。
人間系のE2Eテストだと、機能追加時や不具合修正のコストが上がってしまいますし、コード追加が不安となってしまいます。
心理的安全性の確保、開発コストの低減を含めたDX（Developer Experience)の向上につなげるため、Cypressを導入しています。
Github Action
アプリ版IB-Mesでは、社内TFS（Team Foundation Server)を利用しており、あまりCIを利用できていませんでした。
Saas版IB-Mesではビルド自動化、デプロイの自動化を行っています。
関連ライブラリ
React-Query
APIからのデータの取得はreact-queryに任せています。
react-queryでは、キャッシュ管理や、定期取得などを担当しています。
Recoil
状態管理ライブラリは、Reduxでは少し複雑となってしまうので、より簡単な「Recoil」を採用しています。
基本的にはAPIから取得されるデータはReact-Queryに任せ、個別のお気に入りを含めた共通で利用したいデータは「Recoil」を利用しています。
さいごに
IB-Mesのフロントエンドについて説明させていただきました。
弊社は元々Windowsアプリに特化していたこともあり、フロントエンドの技術者がまだまだ足りません。
IB-MesのSaas開発に参加したい！フロントエンドには自信がある！という方は是非、ユニフェイスにジョインしてみませんか？
是非、ご連絡ください。
https://uni-face.co.jp/recruit/
ユニフェイスでは、テックブログを公開し始めました。
参考文献
- React
https://ja.reactjs.org/ - Next.js
https://nextjs.org/ - React-Query
https://react-query.tanstack.com/
Discussion