【個人開発】「お好み焼きをひっくり返すだけのアプリ」をPC対応にするついでにVueで作り直してみた

はじめに

について、PCでの対応をするために調整する予定でしたが、ついでにVueで作り直してみました。
約１日かかりましたが、なんとか形にしました。

#　使用技術
フレームワーク：Vue.js
UIフレームワーク：Vuetify
ライブラリ：vue2-touch-events

デプロイ

Netlify

作り直してみての感想

程よい感じにVueの勉強になりましたが、このくらいの規模感だと、フレームワークなしの方が動き的にもスムーズな感じがしました。
ちなみにデバイスの分岐はこんな感じにしましたが、多分もっと綺麗な書き方があると思うので順次いじっていきたいと思います。

swipeStart: function (e) {
  const isTouchDevice = window.ontouchstart !== undefined;
  // デバイスがタッチ対応の時
  if (isTouchDevice) {
    this.startY = e.changedTouches[0].pageY;
  } 
  // デバイスがタッチ非対応の時
  else {
    this.startY = e.pageY;
  }
},
swipeEnd: function (e) {
  const isTouchDevice = window.ontouchstart !== undefined;
  if (isTouchDevice) {
    this.endY = e.changedTouches[0].pageY;
  } else {
    this.endY = e.pageY;
  }
    this.moveY = this.startY - this.endY;
    this.result();
},
result: function () {
   const moveY = this.moveY;
   if (moveY > 0) {
// 以下略

昭和レトロ感のあるゲームでしたが、vuetifyを使うとなんだかスタイリッシュになってる気がしますね。
vuetifyおしゃれ。

おわりに

勉強のためと思ってやり始めましたが、こういうの作るの楽しいのでもはや趣味になってきています。
一人でお酒飲みながら何も考えずにできるアプリ、というコンセプトでこれからも作っていきたいと思います。