technologiesこの広告は、90日以上更新していないブログに表示しています。デザインパターン※2014/1/4...以前のコードはオーバーライドでprototypeを全て書き換えてしまう書き方になっていたので、部分的にオーバーライドできるような書き方に修正しました。前回の記事でも書きましたがJavascriptでプログラムできる「Tessel」でちょこちょこと遊んでいます。TesselはWifi標準搭載でモバイルバッテリーでも起動するので、スタンドアロンなガジェットをサクッと作るには調度良いマイコンかと思います。実際に何かを作ることになったらセンサやボタンなどを複数取り付けることになり、状態変化の制御に四苦八苦しそうなのでステートパターンが使えないか試してみました。結論:継承にnode.jsのinheritsを使ったら動いた。ステートパターンの書き方ステートパターンは何者や?というのはググって頂いた方が良記事が沢山みつかると思うので割愛します。ここではTesselで動いたステートパターンの書き方を紹介します。状態を代入する変数stateと、動作を纏めた状態の抽象クラスを作成します。//状態によって変化する動作を纏めて定義する。}};この状態の抽象クラスを継承して各状態を作成します。VM(TesselはJSやnodeをLuaに変換して動作している!!)の1つのスコープに変数は200までという仕様のためjQueryもそのままでは使えないようです。node.jsがサポートしているのでこちらを利用できないか調べてみると、utilライブラリにinheritsという継承のメソッドがあることが分かりました。extendの代わりにこちらを利用します。ここではA状態とB状態の二つを定義することとします。//状態遷移するにはstate変数に遷移先の新しい実態を代入する。"BState";};A/B各状態のonPressには別々の処理を書きます。状態遷移するにはstateに遷移先のクラスをnewして引き渡してあげます。ここまででステートパターンの定義はOKです。次に例えばボタンのイベントハンドラなどに挙動を書きます。その際にstateオブジェクトにあるonPressやonReleaseなどを呼び出すようにしてあげます。state.onRelease();});stateは状態によって差し替わるため、イベントハンドラ内のコードを切り替えずに制御を変更させることが可能となります。このようにすることで大量のif/switch文を書くことから開放されスパゲティコードになりにくくなります。各状態は抽象クラスを継承しているため、挙動を書き忘れたところがあったとしても抽象クラスの動きが実行されることになります。抽象クラスにコンソールメッセージなどを出力するようにしておくと、どこが書き忘れたのかが一目瞭然になります。状態を追加/削除したいといった場合でも新しいStateクラスを定義するだけなので全部のif/switch文を直さなくて良くなります。ステートパターンを利用したデモプログラムTesselにオンボードで付いている4つのLEDを使い、ステートパターンを体感できるデモを考えました。仕様としては次のような感じです。10秒ごとに赤LED点滅、青LED点滅、緑LED点滅の状態が切り替わる。各状態でコンフィグボタンの挙動が異なる。//state変数を新しい状態にする。コンフィグボタンを4回押しています。それぞれの状態によって「トグル・無効・押しているとき光る」と動作が切り替わっています。※動画が荒れ荒れになってしまったのはご了承ください。電子工作で作るものはセンサの検出結果から状態変化することも多いと思うので、ステートパターンを利用すると効率よく開発ができるのではないでしょうか。»プロフィールid:two-hatsUIデザイン関連のネタや、個人的なインテリアの趣味など思いついたものを投稿するごった煮なブログです。(2)月別アーカイブはてなブログをはじめよう!two-hatsさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。