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

★前回の記事

yucatio.hatenablog.com

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

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

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

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

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

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>

以上でプログラムの大まかな設計とプログラムを書く準備がととのいました。


★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com