Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SaaSフロントエンド開発の現場で求められる技術 / Technologies for Saa...
Search
yudppp
March 30, 2023
Technology
2
91
SaaSフロントエンド開発の現場で求められる技術 / Technologies for SaaS Frontend Development in the Field
HRBrainの実例を基に、企業向けSaaS開発で 求められるフロントエンドの特徴と、 それを解決するために使用している技術について お話しします。
yudppp
March 30, 2023
Tweet
Share
More Decks by yudppp
See All by yudppp
未知のプログラミング言語にChatGPTと共に挑む
yudppp
0
300
2019年 HRBrainの技術的挑戦 / hrbain technology challenge 2019
yudppp
3
1.2k
Web開発を支えるマイグレーションツールについて / sqldef introduction for psql users
yudppp
2
3k
ISUCON向けのツールを作った話 / isutools
yudppp
1
230
Row Level Securityはマルチテナントの銀の弾丸になりうるのか / Row Level Security is silver bullet for multitenancy?
yudppp
19
24k
Webサービス開発に必要な統計学入門 / study of statistics for web developers
yudppp
1
240
メジャーな Live Reloaderの違いをちゃんと調べて見た / Compare major live reloader of Go
yudppp
1
1.8k
今年お世話になったnpm module
yudppp
1
850
Goで社内向け管理画面を楽に作る方法
yudppp
5
10k
Other Decks in Technology
See All in Technology
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
120
オニオンアーキテクチャで実現した 本質課題を解決する インフラ移行の実例
hryushm
14
3k
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
200
【LT】ソフトウェア産業は進化しているのか? -Javaの想い出とともに- #jjug_ccc
takabow
0
170
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
260
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
430
サイバーエージェントにおける生成AIのリスキリング施策の取り組み / cyber-ai-reskilling
cyberagentdevelopers
PRO
2
180
使えそうで使われないCloudHSM
maikamibayashi
0
160
バクラクにおける可観測性向上の取り組み
yuu26
3
400
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
190
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
160
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building Your Own Lightsaber
phodgson
102
6k
Embracing the Ebb and Flow
colly
84
4.4k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Become a Pro
speakerdeck
PRO
24
5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Agile that works and the tools we love
rasmusluckow
327
21k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Transcript
SaaSフロントエンド開発の現場で 求められる技術 Front-end Meetup 2023
yudppp 株式会社HRBrain CTO 大学では経営工学を学んでいました。 コードは今も昔もたくさん書いています。 前職はテレビ関連のVertical SaaS?を 作っていました。 好きな言葉は冪等性。 嫌いなモノは浮動小数点の誤差。
Abstract HRBrainの実例を基に、企業向け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は自分が実装し、その他は同僚が担当しています。
Appendix 0 計算式Editorの作り方 - HRBrain Blo 0 HRBrainについて