# Stately ステートマシン、ステートチャート、アクターでアプリと業務ロジックを構築するビジュアルモデリング platform - Findings24: - ウェブサイト: - 料金: Freemium - カテゴリー: AI開発者ツール ## Statelyとは？ Statelyは、アプリや業務ロジックをstate machines、statecharts、actorsへと変換するためのビジュアルソフトウェアモデリングプラットフォームです。ドラッグ＆ドロップエディターとXStateを組み合わせることで、チームはロジックを視覚的に設計し、コードで実行できます。 このサイトでは、設計、開発、テスト、ドキュメント全体にわたるロジックの共通の信頼できる情報源としてStatelyを位置づけています。ユーザーはノーコードでフローを作成し、シミュレーションし、コードやReactアプリを生成し、図と実装の整合性を長期的に保てます。 ## Statelyでできること ### 共有ロジックをモデリングするためのビジュアルエディター コード、図、ドキュメント、テスト生成を1つのワークスペースにまとめるドラッグ＆ドロップエディターでロジックを構築できます。 ### シミュレーションモード エディター内でstate machinesを直接シミュレーションできます。トリガーされたイベント、イベントログ、そしてマシンにエラーがない場合のイベントなし・遅延イベントの自動処理も含まれます。 ### コードとドキュメントのエクスポート state machinesをJavaScript、TypeScript、JSON、Mermaid、Markdown、Storiesとして書き出し、プロジェクトをCodeSandboxまたはStackBlitzに送信できます。 ### AI支援生成 AIを使ってstate machines、React UI、コードを生成できます。料金プランごとに生成できる範囲が異なります。 ### バージョン管理とコードベース同期 バージョン管理で作業履歴を残し、上位プランでは非公開または未掲載プロジェクトを共有でき、GitHub Syncでコードベースとの整合性を保てます。 ### 開発者向け統合 JavaScriptおよびTypeScriptアプリでXStateと併用でき、React、Vue、Svelteに対応し、エディターのワークフロー向けにVS Code拡張機能も用意されています。 ## 利用シーン ### アプリとワークフローロジックのプロトタイピング ノーコードでフローを作成し、シミュレーションして状態変化を確認したうえで、実装前に反復できます。 ### チームレビューと要件整理 ビジュアルエディターを使って、製品、デザイン、エンジニアリングの各チームで動作のあり方をそろえ、その後、図を信頼できる情報源として共有します。 ### AI支援の足場作成とコード引き渡し 図からstate machines、Reactアプリ、コードを生成して、開発作業への引き渡しを加速します。 ### ドキュメントと仕様のエクスポート 図やマシン定義をJavaScript、TypeScript、Mermaid、Markdown、Storiesなどの形式に書き出し、ドキュメントや納品に活用します。 ### 既存コードベースでの継続的な実装 XState、GitHub Sync、React、Vue、Svelte、その他のJavaScriptアプリ向けフレームワーク対応を使って、モデルを既存のコードベースに接続します。 ## よくある質問 ### Stately Studioは何に使われますか？ Stately Studioは、アプリや業務ロジックをstate machines、statecharts、actorsとして構築するためのビジュアルソフトウェアモデリングプラットフォームです。ドキュメントではXStateと組み合わせるビジュアルエディターとして説明されていますが、まず概念を学ぶ段階ではXStateなしでも使用できます。 ### Stately Studioにはどのような機能がありますか？ ソースページには、ドラッグ＆ドロップのビジュアルエディター、シミュレーションモード、コード書き出し、バージョン履歴、AI生成、GitHub Sync、Figma埋め込み、VS Code拡張機能が示されています。Reactアプリの生成やテスト生成にも対応しています。 ### Statelyには無料プランと有料プランがありますか？ 料金ページには、公開プロジェクト向けの無料Communityプラン、非公開および未掲載プロジェクト向けのProfessionalプラン、チームで共有するプロジェクト向けのTeamプラン、カスタムオプション付きのEnterpriseプランが掲載されています。コンサルティングやワークショップ向けのサービス問い合わせ窓口もあります。 ### Statelyから何をエクスポートできますか？ エクスポートのドキュメントによると、マシンコードをJSON、JavaScript、TypeScript、Mermaid、Markdown beta、Stories betaで書き出せるほか、CodeSandboxやStackBlitzにもエクスポートできます。一部の書き出し形式と機能は上位プラン限定です。 ### 既存のコードベースやツールと一緒にStatelyを使えますか？ ドキュメントでは、Stately StudioはXStateと組み合わせると最も強力だが、Stately Studioなしでコードベース内でXStateを使うこともできると説明されています。ホームページではReact、Vue、Svelte、その他のフレームワーク向けの統合が利用可能とされており、ドキュメントにはVS Code拡張機能も記載されています。 ## クイック情報 - **カテゴリ**: Developer Tool - **主要製品**: Visual software modeling platform - **コアモデル**: State machines, statecharts, and actors - **主な利用者**: Product, design, and engineering teams - **対応プラットフォーム**: Web app, XState, and VS Code extension - **ソースドメイン**: stately.ai