HRBrainの実例を基に、企業向けSaaS開発で 求められるフロントエンドの特徴と、 それを解決するために使用している技術について お話しします。
SaaSフロントエンド開発の現場で求められる技術Front-end Meetup 2023
View Slide
yudppp株式会社HRBrain CTO大学では経営工学を学んでいました。コードは今も昔もたくさん書いています。前職はテレビ関連のVertical SaaS?を 作っていました。好きな言葉は冪等性。 嫌いなモノは浮動小数点の誤差。
AbstractHRBrainの実例を基に、企業向けSaaS開発で 求められるフロントエンドの特徴と、 それを解決するために使用している技術について お話しします。
HRBrainについてHRBrainは、経営層・人事の課題解決と従業員の 活性化をサポートするためのサービスHRBrainを 開発・提供しています。今回は、そのプロダクトの一つである 社員名簿機能を例にします。
社員名簿機能について社員の名前や所属部署、職種などの情報を管理できます。
企業向けSaaSの世の中のイメージ企業向けSaaSのフロントエンド開発は、 入力フォームやデータ管理画面が多く、 堅実なアプリケーション作りが求められるため、 面白さに欠ける印象があるかもしれません。
企業向けSaaSの特徴画面上の特徴として下記3点が挙げられます・カスタマイズ性が求められがち・データ入力(フォーム)が多くなりがち・データの可視化が求められがち
カスタマイズ性
カスタマイズ性業務や課題対応のため、ユーザーに合わせた機能や レイアウトのカスタマイズが必要です。特に大企業では、複雑な業務プロセスから カスタマイズ性が重視されます。
例①業務として社用車を運転するため、 従業員の運転免許証の有効期限を管理していた。一般的な社員情報に加え、 その内容もHRBrain上で管理したい。
例②定年退職日(60歳を迎えた日が属する月末)を HRBrain上で管理して、定年退職に近づいた社員を 簡単にリスト化したい。
作ったもの従業員データの項目追加・レイアウト編集画面を作成し、テキスト以外に計算項目も設定可能に。定年退職日算出など、エクセル関数のような機能を実装。またこの機能は2021年5月に作成。
デモ
利用している技術・react-beautiful-dnd (今なら別の選択をしていたかも)・Redux元々DnDはコスパが悪いと思っていてやりたくなかったが、デザイナーと話しながらDnDなしでやろうとするとすごい使いにくいものになりそうだったのでやることにした
技術の見せドコロ①再レンダリングを最小限に抑えるため、 大きなレイアウト情報を持つJSONを正規化し、 項目が多くても処理がスムーズになるように 意識した。
詳細の動画
技術の見せドコロ②デザイナーとのコミュニケーションが重要で、DnDを作る際には表現すべき情報が増えがちです。例えばドラッグしている時のアイテムの表現やアニメーションなど、技術的な課題も考慮してデザイナーと連携することが求められます。
カスタマイズ性まとめDnDなどを用いたカスタマイズ画面が必要とされる良いアプリケーションを作るためには、 パフォーマンスを意識しつつ、デザイナーとすり合わせていく。
データ入力MEMO:ここで折り返し地点
データ入力についてデータ入力・管理が重要で、使いやすいフォーム作成が必要です。これにより顧客のデータ入力プロセスが最適化され、 オートコンプリートやバリデーションを利用し、 入力エラーの減少を実現します。
例③部署情報は階層構造で保持しています。部署設定や 絞り込み時に、どのようなフォームが設定しやすいかを 検討しました。
作ったもの(version1)
作ったもの(version2)
例④計算式項目を設定するときに、シンプルなInputの場合に参照する項目の名前をTypoしてしまい、 正しく動かない事象が発生していた。
作ったもの
利用している技術・rich-textarea・Tokenize / AST計算式の言語仕様はサーバ側で保持されており、その仕様を基に抽象構文木を作成し、Editorに表現しました。
Tokenize
AST
rich-textareaキャレットの位置を取得できる
rich-textarea指定した文字の色を変えれる
あとは力技(再掲)
データ入力まとめ二つの例のように単純なInputだけでなく、 データ入力時に誤りや手間が省けるような フォームを作成します。
データの可視化
データの可視化についてデータ可視化が重要で、売上や顧客データのグラフ化によりビジネス状況が把握しやすくなります。分析・可視化に適した機能提供が求められます。
利用している技術・Recharts・vis.jsチャート、グラフ、時系列グラフ、ダッシュボード、テーブルなど色々。
データの可視化まとめ多様なチャート作成が求められる。用途やデータの種類に応じて適切なグラフを 選定する必要がある。
まとめSaaSフロントエンドでは情報量が多く、 見せ方や扱いにフロントエンド力が重要です。技術がなくても基本要件は満たせますが、 使いやすさに大きく影響します。 なので顧客に向き合うとSaaSのフロントエンドは楽しい ちなみに、レイアウト編集・計算式Editorは自分が実装し、その他は同僚が担当しています。
Appendix0 計算式Editorの作り方 - HRBrain Blo0 HRBrainについて
yudppp
yamahiro
mashiike
ewolff
bengo4com
oracle4engineer
coe
_kensh
konifar
senkin13
charity
soracom
miyashino
trallard
afnizarnur
eitanlees
jeffersonlam
destraynor
ddemaree
erikaheidi
nonsquared
addyosmani
tanoku
geeforr