プログラムの構造を考える (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

プログラムの内部設計をします。今回はjQueryを使用しますが、(jQueryのサンプルでよく見るような)コールバックを多用するとコードの見通しが悪くなるので、今回はReact+Reduxのプログラム構成を参考にして設計してみます。

React+Reduxでは、プログラムの状態はstateオブジェクトに保存します。描画を行うオブジェクト(display)は、stateの状態のみを参照して画面出力を行います。stateの更新はreducerのみが行います。今回のプログラムではreducerという名前ではなく、stateManagerという名前にしています。

ユーザの入力によってactionが呼ばれます。actionはstateManagerを呼び出します。

大まかな構造はこのようになります。

f:id:yucatio:20191012113811p:plain

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フォルダの下に作成します。

f:id:yucatio:20191012114250p:plain

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>