★前回の記事
プログラムの内部設計をします。今回はjQueryを使用しますが、(jQueryのサンプルでよく見るような)コールバックを多用するとコードの見通しが悪くなるので、今回はReact+Reduxのプログラム構成を参考にして設計してみます。
React+Reduxでは、プログラムの状態はstate
オブジェクトに保存します。描画を行うオブジェクト(display
)は、state
の状態のみを参照して画面出力を行います。state
の更新はreducer
のみが行います。今回のプログラムではreducer
という名前ではなく、stateManager
という名前にしています。
ユーザの入力によってaction
が呼ばれます。action
はstateManager
を呼び出します。
大まかな構造はこのようになります。
stateManager
を呼び出すことができるのはaction
のみです。display
呼び出すことができるのはstateManager
のみです。
STEP1で作成したsolver
オブジェクトは、display
を直接呼び出していましたが、action
を通じて呼び出すように変更します。
上記の他に、設定を保持するconfig
オブジェクトを追加します。
プログラムファイルの一覧は以下です。
katamino-arr.js
, util.js
の変更はありません。solver.js
は表示のための処理を追加します。
ファイル名 | 役割 | 備考 |
---|---|---|
main.js | 初期設定を行う | STEP1の内容を全て置き換える |
state.js | 状態を保持する | 新規ファイル |
action.js | ユーザの入力とフィールドの状態変化を受け取る | 新規ファイル |
stateManager.js | 状態の更新と画面の更新を指示する | 新規ファイル |
display.js | 画面のパーツを描画する | STEP1の内容を全て置き換える |
katamino-arr.js | KATAMINOのスピン情報を格納する | |
solver.js | KATAMINOを解くプログラム | |
config.js | 設定値を保持する | 新規ファイル |
util.js | ユーティリティ関数 |
プログラムの関係はこのようになります。
新規ファイルは空ファイルを作成しておきましょう。
state.js
、action.js
、stateManager.js
、config.js
をjs
フォルダの下に作成します。
index.html
でこれらのファイルを読みこんでおきます。読み込み順に気をつけてください。
index.html
<!-- 前略 --> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <!-- 追加ここから --> <script src="js/config.js"></script> <script src="js/util.js"></script> <script src="js/state.js"></script> <script src="js/display.js"></script> <script src="js/stateManager.js"></script> <script src="js/katamino-arr.js"></script> <script src="js/solver.js"></script> <script src="js/action.js"></script> <!-- 追加ここまで --> <script src="js/main.js"></script> </body> </html>
以上でプログラムの大まかな設計とプログラムを書く準備がととのいました。
★次回の記事
★目次