1. はじめに
プログラマの皆さん、状態遷移図（ステートマシン）の設計作業、どうしてますか？
- Excel方眼紙を使って作成するレガシー手法
- draw.io (diagrams.net) は綺麗に描けるけど、結局ただの「絵」
- Enterprise Architect (EA) はコード生成を含む高機能だけどライセンスが高い…
- PlantUMLはテキストで書けるけど、配置を自動で任せると「そうじゃない感」がすごい
何より、図とコードの整合性を手管理する「ダブルメンテナンス」が苦痛
これらを解決するために、VSCodeの拡張機能 State Machine Editor を自作しました。
※インストール
https://marketplace.visualstudio.com/items?itemName=YuyaFujita.state-machine-editor
状態遷移を多く扱う組み込み系のエンジニアはもちろん、複雑なビジネスロジックを抱えるフロントエンド・バックエンドエンジニアの方にもぜひ触っていただきたいと思っています。
2. 推しポイント３つ
(1) VSCode内で完結する「直感GUI」
VSCode上で拡張子 .smjsonのファイルを開くだけで専用エディタが立ち上がります。
draw.ioのような手軽さで状態遷移図の設計を形にできます。
(2) 「タイピング不要」でコードが完成
図を描くだけで状態遷移のコードを即座に出力します。
「switch-case文を延々と手書きする」「列挙型の定義を合わせる」「遷移条件のif文を量産する」といった、本質的でないコーディング作業が不要になります。
「設計図を描く ＝ ロジックの実装が終わる」 という直感的な開発フローが、エディタ内で完結します。
(3) 現場の規約を壊さない「フルカスタム・全言語対応」のコード生成
「自動生成は便利だけど、うちの会社の命名ルールやインデント設定と合わない」――といった悩みは不要です。
この拡張機能の真の強みは、生成ロジックそのものをユーザーが自由に定義できる点にあります。
- あらゆる言語に対応: プリセットのC、Python、JavaScriptに留まりません。スクリプトをカスタムすれば、C++、Rust、Java、はてはVerilogや独自のドメイン専用言語まで、テキスト形式であればどんな言語でも出力可能です。
- 組織独自の規約に完全準拠: 変数名の接頭辞、大文字・小文字のルール、インデント幅など、現場の厳しいコーディング規約を100%守ったコードを吐き出せます。
- 既存フレームワークへの適応: 関数ポインタを用いたテーブル駆動方式や、特定のRTOS、ライブラリに依存した複雑な構造も、テンプレート次第で自由自在。
「ツールに合わせてコードを書く」のではなく、「あなたのプロジェクトの正解に合わせてツールをカスタムする」。そんな有償級の柔軟性を備えています。
3. 使い方（クイックスタート）
- VSCodeの拡張機能タブで
state-machine-editorを検索してインストール
あるいは以下ページからインストール
https://marketplace.visualstudio.com/items?itemName=YuyaFujita.state-machine-editor - コマンドパレット等から拡張子
.smjsonの新規ファイルを作成して、開く - GUIで状態遷移図を作成すると、Codeタブにコードが生成される（必要に応じてコード生成スクリプトをカスタム）
4. 比較表：既存ツールと何が違うのか？
| 機能 | Excel/draw.io | PlantUML | Enterprise Architect | 本ツール |
|---|---|---|---|---|
| 手軽さ | ◎ | ○ | △ | ◎ |
| 配置の自由度 | ◎ | △ | ◎ | ◎ |
| コーディング時短 | × | △ | ○ | ◎ (爆速) |
| 規約への柔軟性 | × | △ | △ | ◎ (カスタム可) |
| VSCode親和性 | × | ○ | × | ◎ |
5. まとめ
これまでバラバラだった「設計」と「実装」を、VSCodeという慣れ親しんだ環境で融合させることができます。
一度この「ヌルヌル動いて、現場仕様のコードが出る」体験をすると、このツールから離れられなくなる！ という人がいるかもしれません。