[SwiftUI] 15 Puzzle の作り方 (1: 全体構想)

環境＆対象

# 特に ベータ版の機能を使用する予定はありません。

15Puzzle とは

これから作っていくのは 15パズル です。スライドパズルと呼ばれることもあるようです。

Wikipedia での説明は、こちら

# 上記の画像も、Wikipedia から引用しています。

全体の方針

以下のような方針で、作っていきます。

– 全体のアーキテクチャは、MVVM(Model-View-ViewModel) です
– TDD で作っていきます。
– Model は、actor で作ります
– スライドパズルは、アニメーションして動作させます
– macOS/iOS それぞれの UI を考慮しつつ、最大限コードを共通化します

全体構想

まずは、作ろうとするアプリの全体像を決めます。

15パズルの画面想定

画面は、15パズルのパネルが中央に表示される画面とします。

パネルをシャッフルするためのボタンも 画面下部に配置します。

余裕(?) がでたら、任意の配置にする機能や、解法を表示する機能をつけるかもしれませんので、そのためのボタンも配置するかもしれません。

また、 何手で解けたか や 何秒で解けたか を記録したくなるかもしれないので、時間表示や 操作手数表示を行うかもしれません。

まずは、15パズルのパネル表示と、シャッフルボタンに注力して実装していきます。

起動時

アプリ起動時には、１～１５が綺麗に(?) 並んでいることにします。

操作

パズルの操作は、マウスクリックやタッチで行えるようにします。

macOS であれば、スライドしたいパネルを クリック で指定。

iOS であれば、スライドしたいパネルを タッチで指定するものとします。

なお、15パズルは、その盤面に応じて スライド できるパネルが異なります。
ですので、スライドできないパネルが操作された時には、無視するということが必要になります。
# 空いているパネルの上下左右のパネルが操作可能なパネルです。

シャッフルボタンを押下された時には、パネルをランダムに配置し直します。

# ちなみに、本当に乱数を用いて配置してしまうと、1〜15の初期配置に戻せないような配置になってしまうことがあり得るため、工夫が必要です。

class/struct 名

どのようなアプリの内部構造になるかを おおよそ決めてしまいます。

MVVM で作る予定なので、まずは それぞれの class/struct の名前を決めてしまいます。

View は、Puzzle15AppView とします。
ViewModel は、Puzzle15ViewModel とします。
Model は、Puzzle15Model とします。

# おおよそ、View/ViewModel/Model それぞれに、Puzzle15 を接頭辞をつけ 名前としています。

M/V/VM の責務分割

MVVM(Model-View-ViewModel) の責務分割ですが、おおよそ以下です。
– Model
各パネルの位置を持っていて、各パネルそれぞれについて、動かすことが可能か を判定する
全体として、パズルが解けたかも判定します
– View
各パネルを適切な位置に表示します
ユーザーからのスライド操作等を受け取り ViewModel に伝えます
– ViewModel
View 表示に必要な情報を Model 情報から生成します
ユーザーからの操作に応じて、Model を操作します
Model から変更を受け取り、(必要に応じて) View に反映します

テストとは何をテストするか

ViewModel/ Model については、その機能性をテストします。

・(x,y) にあるパネルを (s,t) に動かした結果として、Model が更新されたかどうか
・(x,y) にあるパネルをスライドの対象とできるかどうかの判断
等です。

View については、少し異なります。
機能としては、以下のようになります。
・パネルが正しく表示されていること(1のパネルには、1と表示されていることのように、各数字のパネルには、その数字が表示荒れていること)
・パネルが正しい位置に表示されていること
・スライド可能なパネルについては、操作を受け付けること

操作を受け付けるかどうかについては、View ではなく、ViewModel でテストされているはずなので、View ではテストしません。

ですが、”正しく表示されている”,”正しい位置に表示されている”というプログラム的な判断が難しいです。

ということで(?)、表示されている ということについては、想定されている “絵” になっているかどうかをテストすることにします。

まとめ

SwiftUI で 15パズルを作っていく方向性を説明しました。次回以降で コードを書いていきます。

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

SwiftUI おすすめ本

SwiftUI を理解するには、以下の本がおすすめです。

SwiftUI 徹底入門

＃ SwiftUI は、毎年大きく改善されていますので、少し古くなってしまいましたが、いまでも 定番本です。

Swift学習におすすめの本

詳解Swift

Swift の学習には、詳解 Swift という書籍が、おすすめです。

著者は、Swift の初期から書籍を出していますし、Swift の前に主力言語だった Objective-C という言語についても同様の書籍を出しています。

最新版を購入するのがおすすめです。
現時点では、上記の Swift 5 に対応した第５版が最新版です。

関連記事:

[SwiftUI][Realm] SwiftUI と Realm で TODOApp を作る(4: Generics と KeyPath を使った command) [SwiftUI] 15Puzzle の作り方(4: ViewModel 設計・実装・テスト) [SwiftUI][Realm] SwiftUI と Realm で TODOApp を作る(5: 複数 command の実行) [TDD][SwiftUI] SwiftUI と TDD で作る ボーリングスコアアプリ(その２ View と ViewModelの作成 Part1)