【初心者向け】プログラミングの「ステートマシン」概念

みなさん、プログラムを書いているときに「この条件の時はこうして、あの条件の時はああして...」と複雑な分岐処理に悩んだことはありませんか？

特に、ユーザーの操作やシステムの状態に応じて動作が変わるプログラムを書くとき、if文がどんどん増えて管理が大変になりがちです。 そんな時に役立つのが「ステートマシン」という概念です。

この記事では、プログラミング初心者の方でも理解できるよう、ステートマシンの基本概念から実装方法まで具体例を交えて分かりやすく解説します。 複雑な状態管理をシンプルに整理する方法を学んでいきましょう。

ステートマシンとは何か

ステートマシン（State Machine）とは、システムの「状態」とその「遷移」を管理する仕組みです。 日本語では「状態機械」や「有限状態機械」とも呼ばれます。

日常生活でのステートマシン

まず、身近な例でステートマシンを理解してみましょう。 自動販売機を思い浮かべてください。

自動販売機の状態：

• 待機中：お金を入れてください
• お金投入済み：商品を選んでください
• 商品選択済み：商品を取り出してください
• 商品提供中：商品とお釣りを出しています

このように、自動販売機は明確な状態を持ち、特定の操作によって状態が変わります。

プログラミングでのステートマシン

プログラミングでは、以下のような場面でステートマシンが活用されます：

• ユーザーインターフェースの状態管理
• ゲームのキャラクター行動
• ネットワーク通信の状態
• 業務システムの承認フロー

ステートマシンの基本要素

ステートマシンは以下の3つの要素から構成されます：

状態（State）

システムが取りうる状態の集合です。 例えば、音楽プレイヤーの場合：

• 停止中
• 再生中
• 一時停止中

イベント（Event）

状態の変化を引き起こすきっかけです。 音楽プレイヤーの場合：

• 再生ボタンを押す
• 停止ボタンを押す
• 一時停止ボタンを押す

遷移（Transition）

ある状態から別の状態への変化です。 「停止中」→「再生中」のような変化を指します。

具体例で理解するステートマシン

例1: 信号機のステートマシン

信号機を例に、ステートマシンの動作を見てみましょう。

// 信号機のステートマシン
class TrafficLight {
    constructor() {
        this.state = 'RED';
        this.timer = null;
    }
    
    // 状態遷移の定義
    transitions = {
        'RED': { event: 'TIMER', nextState: 'GREEN' },
        'GREEN': { event: 'TIMER', nextState: 'YELLOW' },
        'YELLOW': { event: 'TIMER', nextState: 'RED' }
    }
    
    // イベントの処理
    handleEvent(event) {
        const currentTransition = this.transitions[this.state];
        
        if (currentTransition && currentTransition.event === event) {
            this.state = currentTransition.nextState;
            console.log(`信号が ${this.state} に変わりました`);
        }
    }
    
    // 現在の状態を取得
    getCurrentState() {
        return this.state;
    }
}

// 使用例
const trafficLight = new TrafficLight();
console.log(trafficLight.getCurrentState()); // RED

trafficLight.handleEvent('TIMER');
console.log(trafficLight.getCurrentState()); // GREEN

trafficLight.handleEvent('TIMER');
console.log(trafficLight.getCurrentState()); // YELLOW

例2: ドアのステートマシン

ドアの開閉を管理するステートマシンを作ってみましょう。

# ドアのステートマシン
class Door:
    def __init__(self):
        self.state = 'CLOSED'
        self.locked = False
    
    def open(self):
        if self.state == 'CLOSED' and not self.locked:
            self.state = 'OPEN'
            print("ドアが開きました")
        elif self.state == 'CLOSED' and self.locked:
            print("ドアがロックされています")
        elif self.state == 'OPEN':
            print("ドアは既に開いています")
    
    def close(self):
        if self.state == 'OPEN':
            self.state = 'CLOSED'
            print("ドアが閉じました")
        elif self.state == 'CLOSED':
            print("ドアは既に閉じています")
    
    def lock(self):
        if self.state == 'CLOSED':
            self.locked = True
            print("ドアをロックしました")
        elif self.state == 'OPEN':
            print("開いているドアはロックできません")
    
    def unlock(self):
        if self.locked:
            self.locked = False
            print("ドアのロックを解除しました")
        else:
            print("ドアはロックされていません")
    
    def get_state(self):
        lock_status = "ロック中" if self.locked else "ロック解除"
        return f"状態: {self.state}, {lock_status}"

# 使用例
door = Door()
print(door.get_state())  # 状態: CLOSED, ロック解除

door.open()              # ドアが開きました
door.lock()              # 開いているドアはロックできません
door.close()             # ドアが閉じました
door.lock()              # ドアをロックしました
door.open()              # ドアがロックされています

ステートマシンの実装パターン

パターン1: switch文を使った実装

最もシンプルな実装方法です。

class SimpleStateMachine {
    constructor() {
        this.state = 'IDLE';
    }
    
    handleEvent(event) {
        switch (this.state) {
            case 'IDLE':
                if (event === 'START') {
                    this.state = 'RUNNING';
                    console.log('処理を開始しました');
                }
                break;
                
            case 'RUNNING':
                if (event === 'PAUSE') {
                    this.state = 'PAUSED';
                    console.log('処理を一時停止しました');
                } else if (event === 'STOP') {
                    this.state = 'IDLE';
                    console.log('処理を停止しました');
                }
                break;
                
            case 'PAUSED':
                if (event === 'RESUME') {
                    this.state = 'RUNNING';
                    console.log('処理を再開しました');
                } else if (event === 'STOP') {
                    this.state = 'IDLE';
                    console.log('処理を停止しました');
                }
                break;
        }
    }
}

パターン2: 状態遷移表を使った実装

状態遷移の定義を分離した実装方法です。

class TableDrivenStateMachine {
    constructor() {
        this.state = 'IDLE';
        
        // 状態遷移表
        this.transitionTable = {
            'IDLE': {
                'START': { nextState: 'RUNNING', action: 'startProcess' }
            },
            'RUNNING': {
                'PAUSE': { nextState: 'PAUSED', action: 'pauseProcess' },
                'STOP': { nextState: 'IDLE', action: 'stopProcess' }
            },
            'PAUSED': {
                'RESUME': { nextState: 'RUNNING', action: 'resumeProcess' },
                'STOP': { nextState: 'IDLE', action: 'stopProcess' }
            }
        };
    }
    
    handleEvent(event) {
        const currentStateTransitions = this.transitionTable[this.state];
        
        if (currentStateTransitions && currentStateTransitions[event]) {
            const transition = currentStateTransitions[event];
            
            // アクションの実行
            if (transition.action) {
                this[transition.action]();
            }
            
            // 状態の遷移
            this.state = transition.nextState;
        }
    }
    
    startProcess() {
        console.log('処理を開始しました');
    }
    
    pauseProcess() {
        console.log('処理を一時停止しました');
    }
    
    resumeProcess() {
        console.log('処理を再開しました');
    }
    
    stopProcess() {
        console.log('処理を停止しました');
    }
}

パターン3: 状態オブジェクトを使った実装

各状態を別々のオブジェクトとして実装する方法です。

// 状態の基底クラス
class State {
    handle(context, event) {
        throw new Error('handle method must be implemented');
    }
}

// 各状態の実装
class IdleState extends State {
    handle(context, event) {
        if (event === 'START') {
            console.log('処理を開始しました');
            context.setState(new RunningState());
        }
    }
}

class RunningState extends State {
    handle(context, event) {
        if (event === 'PAUSE') {
            console.log('処理を一時停止しました');
            context.setState(new PausedState());
        } else if (event === 'STOP') {
            console.log('処理を停止しました');
            context.setState(new IdleState());
        }
    }
}

class PausedState extends State {
    handle(context, event) {
        if (event === 'RESUME') {
            console.log('処理を再開しました');
            context.setState(new RunningState());
        } else if (event === 'STOP') {
            console.log('処理を停止しました');
            context.setState(new IdleState());
        }
    }
}

// コンテキストクラス
class StateMachineContext {
    constructor() {
        this.state = new IdleState();
    }
    
    setState(state) {
        this.state = state;
    }
    
    handleEvent(event) {
        this.state.handle(this, event);
    }
}

実用的な応用例

フォームバリデーション

ユーザー入力フォームの状態管理にステートマシンを活用できます。

class FormStateMachine {
    constructor() {
        this.state = 'EMPTY';
        this.errors = [];
    }
    
    handleInput(inputData) {
        switch (this.state) {
            case 'EMPTY':
                if (this.validateInput(inputData)) {
                    this.state = 'VALID';
                } else {
                    this.state = 'INVALID';
                }
                break;
                
            case 'VALID':
                if (!this.validateInput(inputData)) {
                    this.state = 'INVALID';
                }
                break;
                
            case 'INVALID':
                if (this.validateInput(inputData)) {
                    this.state = 'VALID';
                }
                break;
        }
        
        this.updateUI();
    }
    
    validateInput(inputData) {
        this.errors = [];
        
        if (!inputData.email || !inputData.email.includes('@')) {
            this.errors.push('有効なメールアドレスを入力してください');
        }
        
        if (!inputData.password || inputData.password.length < 8) {
            this.errors.push('パスワードは8文字以上で入力してください');
        }
        
        return this.errors.length === 0;
    }
    
    updateUI() {
        const submitButton = document.getElementById('submit-button');
        const errorDisplay = document.getElementById('error-display');
        
        switch (this.state) {
            case 'EMPTY':
                submitButton.disabled = true;
                errorDisplay.innerHTML = '';
                break;
                
            case 'VALID':
                submitButton.disabled = false;
                errorDisplay.innerHTML = '';
                break;
                
            case 'INVALID':
                submitButton.disabled = true;
                errorDisplay.innerHTML = this.errors.join('<br>');
                break;
        }
    }
}

ゲームキャラクターの行動

ゲームキャラクターの状態管理にも応用できます。

class GameCharacter:
    def __init__(self, name):
        self.name = name
        self.state = 'IDLE'
        self.health = 100
        self.energy = 100
    
    def handle_action(self, action):
        if self.state == 'IDLE':
            if action == 'ATTACK' and self.energy >= 20:
                self.state = 'ATTACKING'
                self.energy -= 20
                print(f"{self.name}が攻撃しています！")
            elif action == 'DEFEND':
                self.state = 'DEFENDING'
                print(f"{self.name}が防御態勢に入りました")
            elif action == 'REST':
                self.state = 'RESTING'
                print(f"{self.name}が休息しています")
        
        elif self.state == 'ATTACKING':
            self.state = 'IDLE'
            print(f"{self.name}の攻撃が終わりました")
        
        elif self.state == 'DEFENDING':
            if action == 'STOP_DEFEND':
                self.state = 'IDLE'
                print(f"{self.name}が防御を解除しました")
        
        elif self.state == 'RESTING':
            self.energy = min(100, self.energy + 10)
            if self.energy >= 100:
                self.state = 'IDLE'
                print(f"{self.name}の休息が完了しました")
    
    def get_status(self):
        return f"{self.name}: {self.state}, HP: {self.health}, Energy: {self.energy}"

# 使用例
character = GameCharacter("勇者")
print(character.get_status())

character.handle_action('ATTACK')
print(character.get_status())

character.handle_action('ATTACK')  # 攻撃終了
print(character.get_status())

ステートマシンの利点

1. 状態の明確化

システムの状態が明確になり、どの状態にいるかが分かりやすくなります。

2. 複雑な条件分岐の整理

複雑なif-else文を整理し、保守しやすいコードにできます。

3. バグの発見と修正

状態遷移が明確になることで、バグの発見と修正が容易になります。

4. 拡張性の向上

新しい状態や遷移を追加する際の影響範囲が明確になります。

よくある間違いと注意点

過度な複雑化

シンプルな処理にステートマシンを使うと、かえって複雑になる場合があります。 必要性を検討してから導入しましょう。

状態の粒度

状態を細かく分けすぎると管理が困難になります。 適切な粒度での状態設計が重要です。

無効な状態遷移

存在しない状態遷移を処理できるようにエラーハンドリングを実装しましょう。

class SafeStateMachine {
    handleEvent(event) {
        const currentStateTransitions = this.transitionTable[this.state];
        
        if (!currentStateTransitions || !currentStateTransitions[event]) {
            console.warn(`無効な状態遷移: ${this.state} -> ${event}`);
            return false;
        }
        
        // 正常な状態遷移の処理
        const transition = currentStateTransitions[event];
        this.state = transition.nextState;
        return true;
    }
}

ステートマシンの学習ステップ

ステップ1: 基本概念の理解

状態、イベント、遷移の概念を理解します。 身近な例を使って考えてみましょう。

ステップ2: 簡単な実装

switch文を使った簡単なステートマシンを実装してみます。

ステップ3: 実用的な応用

フォームバリデーションやゲームなど、実用的な場面で活用してみます。

ステップ4: 高度なパターン

状態オブジェクトパターンなど、高度な実装パターンを学びます。

まとめ

ステートマシンは、複雑な状態管理をシンプルに整理するための強力な概念です。

重要なポイントは以下の通りです：

• 状態、イベント、遷移の3つの要素を理解する
• 身近な例から始めて概念を理解する
• 実装パターンを使い分ける
• 適切な粒度での状態設計を心がける
• 無効な状態遷移への対処を忘れない

最初は複雑に感じるかもしれませんが、一度理解すれば多くの場面で活用できる便利な技術です。 ぜひ、簡単な例から始めて、ステートマシンの考え方を身につけてください。

複雑な条件分岐に悩んだときは、ステートマシンを使って整理してみることをおすすめします。 きっと、より理解しやすく保守しやすいコードが書けるようになるはずです。