Qiita では書かなかった雑感と言い訳を少々
素の JavaScript の扱い
vue の component は文字通り再利用性のある要素群をコンポーネント化するべきなので、複数のコンポーネントで横断的に利用するロジックはモジュールに外出ししたが、これで良かったのかはちょっと自信が無い。
かといってVue.extendするわけにもいかないので、やっぱりベストとは思えなくてもベターな選択肢だったと思おう。
コンポーネントを跨ぐシーケンシャルな制御
下記のようにコンポーネントを跨いでイベントの発火を繰り返す制御があった。
Player#stand -> Game#stand -> Dealer#postexec -> Game#postexec |
一応動くようにはできたけど、あまり真っ当なやり方には思えなかった。少なくとも$refsの利用は抵抗があった。
今回は 3 つのコンポーネントだけだったけど、ステップが増えたら大変なことになるのは目に見えている。
イベントとメソッドで処理を繋げるよりは、リアクティブなデータ操作で状態が連鎖的に変わっていくのが本来あるべき形かなぁ…とは思う。次回はもっとここを意識して設計したい。
flexbox
何気に vue よりも flexbox に躓いた。
flexbox は何度も解説読んだりしているんだけど、なぜか覚えられない（身に付かない）んだよなぁ…
まあ、数をこなすしかないのかな
github.io に乗せる時にやったこと
備忘録的なことだけど、デフォルトの設定でビルド掛けただけではパスの設定がうまくいかない点が 2 点あった。
index.htmlの script src を相対パスにする。
デフォだと以下のように絶対パスになっている。
<script src="/dist/build.js"></script> |
これだとhttps://t-kojima.github.io/dist/build.jsを参照してしまい、もちろんそこにはファイルがないので404になってしまう。
修正後はこちら
<script src="./dist/build.js"></script> |
index.htmlに対する相対パスになるので、https://t-kojima.github.io/blackjack-vue/dist/build.jsを参照できるようになる。
img タグのパスを補完する。
img タグでも同じ問題が発生する。デフォだとhttps://t-kojima.github.io/dist/card_back.pngという感じでルートの dist を探してしまい404になってしまう。
なので webpack の publicPath を
publicPath: '/dist/', |
から
publicPath: '/blackjack-vue/dist/', |
に修正した。
今思うと
publicPath: './dist/', |
でもいけたんじゃないか？と思ったけど、次回があればその時確認します。
さいごに
簡単にするためリロードの度に 1 ゲームという形にしたけど、複数回のゲームを処理できるようにすると状態を持つので一気に複雑化すると思う。
時間があれば段階的にステップアップする内容にしたいし、vuex も覚えないとなぁ