Vue 3 をそろそろ触ってみたくなった。

あと、なんとなくマインスイーパをやりたくなったのでそれを題材にすることにした。

明らかに Suspense とか使いどころなさそうだったけど、普通に作ってはまるところがないかとかが知りたかったので特に気にしないことにした。

作ったものはこれ。

• 動くもの: https://sterashima78.github.io/vue3-minesweeper/
• GitHub: https://github.com/sterashima78/vue3-minesweeper

サムネイルにもしたけど、こんな感じで動く。

結果からいうと普段から@vue/composition-api を使っていると特に戸惑う点はなかった。 （よかった）

気になった点は README に書いたけど、 v-model の使い方が変わっているので、 Vue 2 からバージョンを上げる際には対応が必要な個所がいくつか出てきそう。

あと、これは、何が問題だったのか良くわからないのだけど、setup で宣言したリアクティブな値を子供のコンポーネントにパスして、そのコンポーネントで select の value に設定しても反映されなかった。

ホットリロードすると値が反映されたので、宣言の仕方がおかしいという感じではなくて、ライフサイクルというか値がどのように反映されていくかというところが、今までの直感とは少し変わったのだろうと理解することにした。

対応としては、onMounted で値を設定するようにした。ただ、やり方に違和感がある。

また、 fp-ts を使った。

1. 値や必要な処理の型定義
2. 関数のテスト書く
3. 関数実装

を繰り返して、処理が見にくい箇所とかについて、 fp-ts の pipe で処理つなぐようにリファクタリングしたって感じ。

可能なら最初から fp-ts 使って、その力を存分に使いたいのだけど、まだ素振りが足りない。

ただ、 composition-api になってからの Vue アプリケーションの書き方はだいたい固まってきて、

• domain 以下に一連の値の型、それの変換関数を書く
  • この時状態に相当する値を更新するような関数はカリー化して、最後の引数に状態をもらって、更新された新しい状態を返すようにする
  • 複数の状態変更を経て意味のある変更になる場合は flow や pipe でつないで新しい関数を定義
• composition では状態の定義・状態変更関数の定義・イベントハンドラ (ライフサイクルを含む) の設定を定義する
• component では依存の解決・注入を行う

という感じ。

この辺りは適当に整理して別記事にまとめたい。