【将棋盤第9回】Composition APIの導入 - スマレジエンジニアyushiのブログ

コツコツ将棋盤を作ってます。

使用技術

今回はついに、Composition APIの導入です。

製作中の盤はgithub pagesで公開しています。

過去にブログを書いていましたので、詳しくはこちらを...。

Composition APIを利用する主なメリットは、ロジックをComponentから切り出し、個別に管理したり複数のComponentで共有できることです。

今回の将棋盤の開発では、、Composition APIを使ってみることが目的の一つでした。ついに...。

また今回は、下記のドキュメント・リポジトリも参考にさせていただきました。

ロジックを集約したファイルです。

もともとGame.vue, Board.vueに含まれていたロジックを、ひとまず片っ端からこのファイルに移動させました。

thisが使えなくなるので注意が必要です。

画面から直接操作しないproperty/methodは公開（export）しなくてOKです。これはファイル分割したことによる大きなメリットですね。

<template>はもちろん、JSでも画面表示に特化したロジックは、こちらのファイルに残しています。

とりあえずザクザク移動してみましたが、これで正解なのかまだよくわかっていないです...。

ロジックを丸々別ファイルにまとめられたので、見通しはよくなりそうかなと思っています。

画面から利用しないproperty/methodは隠せるというのも良い感じです。

今後更に追記編集しながら、ベストプラクティスを見つけていきたいです。

最近はルービックキューブにはまっています（暗記して速く解くやつ）。2分は安定してきたので、目指せ大台1分。