Vue Cli + Vuetify で バドミントンスコアシートを作った

vue.jsの勉強 & ペーパーレスのために
バドミントンスコアシートのwebアプリを作ってみました。
バドミントンやる方は是非使って見てください！

badminton.htmlgo.site github.com

苦戦したのは、Vuexのstore内のstateのデータ構造です。
これは何回も作り直しました。。
正直、もっと効率の良い構造があるはず。

あとはこれはmutationsに書くのか？それともactionsに書くのか？
それともこの処理は外にだして別途モジュール化してimportした方がいいのか？
というところが本当に迷いました。これは数をこなしつつ、色々な人のコードを見て学んでいく必要がありそう。


マテリアルデザインは色々あったんですが、Vuetifyを使用。
マジで色々あって便利です。vue.js専用に作られているので、サクッと導入できます。
やはり、こういうのはユーザーが多いものを使った方が無難な気がします。
vuetifyjs.com

自分はデザインは出来ないのですが、こういうwebアプリを１から自作で全部作るって、
とてもいい勉強だし楽しいですね。
普段の案件では基本的にオーダーされたものを作るのだけど、
機能だったり、使い勝手だったり全部自分で考える、というのは大切だと思いました。

あと、副産物としてこういうアプリは配列の操作の練習になる。普通のwebサイト作るより。
「reduce」「map」「splice」「slice」「forEach」「concat」「スプレッド演算子」この辺をよく使いました。
いい素振りになります。

次は、api連携とコンポーネント周りの練習もしたいので、
また何か作りたいと思います！！

jsでのカウントの処理(prevとかnext)を汎用的にする

今まで、スライダーとか

「進むボタン」「戻るボタン」
を実装する時に、

class Slider{
  constructor(){
    this.array = [
      'hoge.jpg',
      'huga.jpg',
      'baz.jpg',
    ]
    this.count = 0
    this.length = array.length    
  }
  prev(){
    if(count === 0){
      count = length - 1
    }else{
      count--
    }
    this.slider()
  }
  next(){
    if(count === length - 1){
      count = 0
    }else{
      count++
    }
    this.slider()
  }
  slider(){
  // スライダーの処理
  }
}

とかやっていてメンドくさいな、、
と思っていたんだが、
とある参考書を見て 素晴らしい書き方があったので感動でメモします。

class Slider{
  constructor(){
    this.array = [
      'hoge.jpg',
      'huga.jpg',
      'baz.jpg',
    ]
    this.count = 0
    this.length = array.length    
  }
  prev(){
    this.index = this.countChange(-1,this.index,this.length);
    this.slider()
  }
  next(){
    this.index = this.countChange(1,this.index,this.length);
    this.slider()
  }
  countChange(num,index,length){
    return (num + index + length) % length
  }
  slider(){
  // スライダーの処理
  }
}

このメソッドの計算でなるほど、、、と

  countChange(num,index,length){
    return (num + index + length) % length
  }

numは、正の方向で+1, 負の方向で-1を追加すると

(1 + 0 + 3) % 3 => 1
(1 + 1 + 3) % 3 => 2
(1 + 2 + 3) % 3 => 0
(-1 + 0 + 3) % 3 => 2
(-1 + 1 + 3) % 3 => 0
(-1 + 2 + 3) % 3 => 1

新しいindexが出る、、、

これ、今まで何回も同じ書き方してきたので、
こういう処理は簡略化出来るかちゃんと見直さなきゃダメだと実感しました。

Vue.js で dataの配列内やオブジェクトのプロパティの値がうまく更新されない時

例えば、以下みたいな時、
配列の各要素を直接更新したい、
オブジェクトのプロパティを新しく追加したい、

data(){
  return {
    items:[10,10,10],
    obj:{}
  }
},

methods:{
  updateItem(){
    // 追加されない！
    this.items[0] += 1
  },
  updateObj(){
    // 追加されない
    this.obj.hoge = 1
  }
}

更新されない！なんで！？
ということはよくあるはず。

その場合は、
配列は、以下のように

this.$set(this.items, index, '更新したい値');

this.items.splice(index, 1, '更新したい値');

オブジェクト、以下のように

this.$set(this.obj, "hoge", 1);

this.obj = Object.assign({}, this.obj, { huga: 2, baz: 3 });

すると、ちゃんと反映されます。

codesandbox.io

注意としては
ルートレベルのリアクティブなプロパティを動的に追加することはできない、
あくまでネストされたものだけ、更新、追加出来る、ということ。

ルートレベルのものについては、値が空でもよいのであらかじめプロパティを用意しないとダメです。

■参考記事 リアクティブの探求 — Vue.js