uniface.hub

ユニフェイスの開発者ブログ

Title IB-Mesのフロントエンドにおける技術選定について
  • 2021年5月28日
  • 澤田諒
IB-Mesのフロントエンドにおける技術選定について

はじめに

こんにちは、さわだです。
弊社では製造業向けのMESパッケージ「IB-Mes」をSaasとして、提供しています。
今回は、IB-Mesにおける技術選定をフロントエンドに特化して解説していきたいと思います。

選定方針

オンプレ版で動作していたIB-MesはWPF(Windowsアプリ）で提供されていました。
Windows版で提供されていたIB-Mesを、Saas版(Webアプリ）として提供するに当たり、技術選定として下記の方針としました。

1. できる限りモダンな環境としよう

テクノロジーを見ても、Web関連技術の変化はものすごく早く、ビジネス面でも日々求められているニーズが変化していきます。
求められているものに対して、スピーディーに実現できる環境としています。

2. ユーザ体験を重視する

IB-MesはBtoB向けのアプリとなりますが、ユーザ体験を重視しています。
これは、以前のWindowsアプリ版でも同様となりますが、実際の作業者に利用して頂き、いろいろな意見を頂戴しながら、開発を進めています。
Saas版になっても、思いは変わらず、ユーザに操作しやすいデザイン、レスポンスなどに注意を払うようにする。

3. 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/

参考文献