ステートチャートの利点と欠点

このポストは私の2部ですseries about state machines . のフォローアップポストですState Machines and Statecharts: What are they? . あなたがどのような(有限)状態機械と状態図が何であるかについて学びたいならば、そこで始めてください.
“ステートマシンとステータスチャートは何ですか?”私の最後の記事では、“これはなぜですか?”についてです.どのような利点は何ですか?どのような欠点は何ですか?

ステートチャートの利点は何ですか？

✅ バグ
おそらく、全ての状態を示すために様々なBooleansを使用してコードを見たことがあります.isLoading and isError いくつかの種類の要求に対処するとき、私が非常に頻繁に見る典型的な例です.これはしばしば次のようなコードで手に入ります.

if (isError) {
  // return some kind of error
}

if (isLoading) {
  // show loading indicator
}

// It is neither loading nor error. It must have been successful
// return actual content

あなたは必ず確認する必要がありますisLoading and isError 同期されます.Should isError === true 読み込み中に許可されますか?それがそうでないならば、それらの両方がそうであるならば、あなたは不可能な状態で終わるでしょうtrue 同時に.新しいリクエストが開始されても、エラーが表示されます.
StateChartを使用すると、成功状態を明示的にモデル化します.ステートチャートは、すべての回で単一の状態にする必要があります(私は、単一の状態としてまだ並列状態を考慮).
はい、これは単一の文字列がある簡単な例ですstate 値を持つ変数"loading" , "error" or "success すでに大きな改善されます.しかし、うまくいけばポイントを得る-それはより複雑な方法を得ることができます.(また、文字列解決もまた、Typosのためにバグを発見するのを難しくします).
⚠️ Booleansの欠点については、Booleansは排他的にバイナリ状態に適しているだけではないisOpen , しかし、それらは拡張できませんisOpening あなたがアニメーションや何かのためにそれを使用したい場合.複数のブールを越えて1つの状態を広げるようにしないでください.
✅ 状態と遷移の調査
この利点は、前の例では既に暗黙のうちに述べられています.あなたが可能な状態を事前にモデル化し、それらを視覚化することができますので、あなたは欠けている状態を見つけるでしょう.状態機械は常に単一の状態でなければならない.
では、前の例の初期状態はどうですか?それはすぐに読み込み状態で起動しますか?我々はまた、いくつかの種類の成功状態が欠けていた.エラー状態は最終状態ですか?いくつかの種類の自動リトライが必要ですか?結果のキャッシュ?
それは簡単にも自分自身にこれらの質問をするときに図を比較してください(おそらくすでに混乱)コードを見てください.
StateChartを使用すると、トップダウンのアプローチを使用します.まず最初に、最初の傷を開始し、可視化のいくつかの種類を(少なくとも複雑なシナリオで)肉を開始し、最後に実際のコードを書く.ステートチャートがないのに対して、ボトムアップアプローチを使用して、かなり早いコードを書くことになります.
✅ 容易なコミュニケーション
論理の視覚化は、実装のために、また、コミュニケーションのためにも非常に役に立ちます.あなたは、正当性または完全性について議論しているビジネス専門家にあなたのコードを示すことができますか?ただし、状態、イベント、トランジションなどの図を示すことができます.
可視化は、ビジネスの専門家と開発者の間のギャップを埋めるために役立つことができます.それは正しい方法で実際のビジネスの問題を解決するのに役立ちます.あなたは(州)と州やイベントの実際のビジネス用語を使用することができます.これは、それとの組み合わせで便利なツールになりますDomain-Driven Design . イベントストーミングのようなツールを使用すると、ステートチャートの概念と一緒にうまく動作します.
✅ 読みやすさと保守性
StateChartで、あなたのコードのどこにでも散らばっている代わりに、1つの場所で行動を説明します.これは、動作/論理とプレゼンテーションの間の懸念の良い分離を可能にします.これらの両方が分離されているときに理解しやすくなります.
私は非常に話を見てお勧めしますFinite State Machines in Vue 3 で.彼女はVueコードをXState ( JavaScriptのステートチャートライブラリ)結果はリファクタリング後に読みやすくなります.
状態マシンで分離された動作を持つこともできます.UIを置き換えることができますし、ロジックを保つ.プレゼンテーションや行動上の問題が混ざり合っているわけではありません.
これはまた、共通のロジックを共有することができます-だけでなく、あなたのコードベースの他にも.大きな例はXState Catalogue and Stately Registry
利益は国家機械に特有ではない.また、フックのようなものを使用して動作を分離することもできます.それにもかかわらず、州のマシンはどうにか、その利益を利用するよう強制します.
✅ 複雑さのより良い取扱い
状態を表すためにBooleans(またはストリング)を使用している解決に戻ってください.それが複雑になっている場合は、純粋なカオスで終了します⁠— 約束します.どのように、あなたは平行であるかネストした州を表しますか?
機能は、時間をかけて追加され、物事は制御不能になっている.それは解読不可能になり、エラーがちになり、誰もそのコードに触れるのが好きになりません.状態チャートは、物事が複雑になって輝いて起動します.私は非常に正確に次の図を見つける.
ダイアグラムは反応するのに特有です、しかし、あなたが反応を使っている経験を持たないならば、それはさらに価値があると思います.xstateはステートチャートライブラリである.これは、ステートチャートに一般化することができます.

それはどのようにstatechart時間をかけて報われるきれいに視覚化します.後で学習曲線に着きます😉
✅ あなたは、ものを生み出すことができます
StateChartを使用したモデリングの動作では、説明を解釈できるため、さまざまなものを生成できます.
私のお気に入りのツールとこの偉大な例はXStates Visualizer . ちょうどあなたの状態機械のコードを貼り付けて、インタラクティブな可視化を取得します.それはどんなクーラーを得ますか?

しかし、それは視覚化で終わりません.あなたははるかに生成することができます.テストを生成することもできます🤯 トークWrite Fewer Tests! From Automation to Autogeneration まさにそのことです.確かに見て面白い.
✅ 標準がある
W 3 C標準があります.State Chart XML (SCXML): State Machine Notation for Control Abstraction . はい、標準の存在自体は利益ではありません.しかし、それはいくつかの暗黙のものが付属しています.彼らはその上で10年ほど働いた.私にとって、それは一般的な概念は貴重であり、すぐにいつでも離れて行くことはない指標です.

どのようなステートチャートの欠点は何ですか？

❌ 初期学習曲線
任意の新しいものと同様に、最初の学習曲線があります.StateChartの一般的な概念について学ぶ必要がありますmy first blog post of my state machine series ここで役立つかもしれません).おそらく、あなたは学ぶ必要があるライブラリのいくつかの種類を使用します.
少しスクロールし、時間と複雑さについての図を参照してください.まず最初に、それは難しくなります、そして、さらに、オーバーヘッドで来ます.しかし、それは支払うでしょう.
場合は、チームで働いている学習曲線はさらに困難になります.その場合、それはあなただけでなく他のものについてでもあります.
❌ 追加ライブラリ
単純なステートマシンのライブラリは必要ありませんが、おそらくライブラリを使うでしょう.これは別の依存関係を追加します.あなたは、維持されていないのリスクを取る、バンドルのサイズの増加、およびサードパーティ製のライブラリを使用してのどのような他の欠点がある更新する必要があります.

結論

TLR
✅ バグ
✅ 状態と遷移の調査
✅ 容易なコミュニケーション
✅ 読みやすさと保守性
✅ 複雑さのより良い取扱い
✅ あなたは、ものを生み出すことができます
✅ 標準がある
❌ 初期学習曲線
❌ 追加ライブラリ
あなたが記事を読んで既に気づいているかもしれないので、私は利点がはるかに下側を上回ると思います.StateChart開発者のツールベルトで素晴らしいツールです.それはあなたのコードの品質、読みやすさと保守性を向上させるだけでなく、素晴らしいコミュニケーションツールです.少なくとも、私はステートチャートで売られます😉
あなたが状態機械を必要としないとき、状況があるかもしれません.例えば、複雑さの可能性が低い非常に単純な論理の場合、後に加えられます.しかし、あなたがどこか他のプロジェクトのどこかでそれを使うならば、また、ここでStateChartを使うことは危害を加えません.
あなたはすでにStateChartを使用しますか?あなたはそれらを使用する予定ですか?私は重要な利点や欠点を逃したことがありますか?私はあなたの視点を得るのが大好きだ.