taka_piya https://blog.hatena.ne.jp/taka_piya/ 弁護士ドットコム株式会社 Creators’ blog https://creators.bengo4.com/ 弁護士ドットコム はじめに 弁護士ドットコム デザイナーの林（@taka_piya）です。 弁護士ドットコム 案件管理システムでは、アプリケーションとUIの状態管理にXStateを用いたステートマシンでの管理を導入しています。 この記事では、UIデザインの考え方にステートマシンを導入し、実装まで一気通貫で行う方法と、そのメリットについて説明します。 はじめに UIは2つの要素からなっている ステートマシンを理解する 定義 状態遷移図 ステートマシンを使ったUIデザイン〜実装プロセス ステートマシンを定義する Figmaで表現する JavaScriptで表現する ステートマシンをアプリケーションに適用する UIデ… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fcreators.bengo4.com%2Fentry%2F2022%2F11%2F21%2F083000" title="UIデザインにおけるステートマシン - 弁護士ドットコム株式会社 Creators’ blog" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/t/taka_piya/20221116/20221116214730.png Hatena Blog https://hatena.blog 2022-11-21 08:30:00 rich https://creators.bengo4.com/entry/2022/11/21/083000 1.0 100%