Vue.jsでCSSスタイルガイド作成に挑戦！（２）

2018.05.29

VRリズムゲーム『Beat Saber』をやりたくてやりたくてウズウズしている kouraku です。おはこんばんちわ。早くPSVRに移植してくれないかな・・・。

さてさて、今回は、前回までとりあえず勢いに任せてCSSスタイルガイド作りに挑戦して来たわけですが、ふと立ち止まってみると、まぁなんともソースの中身が非常にわかりづらくなっておりました。
よって、まずはリファクタリングをしてみたいと思います。

【前回】なんとなく…改め、Vue.jsでCSSスタイルガイド作成に挑戦

なお、ここでの対応につきましては、kouraku の独断と偏見で行っておりますので、一般的な考え方とは大分ズレることもあるかと思います。その辺りは生暖かい目で見てやってくださいm(_ _)m

見直したいところ

①data は data として、他の変数と混同しないように変数名を変えようか・・・

Vue.js では、data という変数名が重要っぽいので、適当に data と付けてしまった箇所については別の名前に変更して、ソース上でもしっかりと区別がつくようにします。他にも、関数名も役割に合わせて分かりやすくしたいと思います。例えば・・・

一時的なスタイルたち：tmpStyles
データをソートする機能：sortData()

といった感じです。

②インスタンスライフサイクルフックを使ってみるか・・・

Vue インスタンスのライフサイクルについては、公式ガイドの最初の方で説明されています。
https://jp.vuejs.org/v2/guide/instance.html
例えば、created を使えば、インスタンス生成後に実行される・・・といった感じです。

よって、初期処理である style.css の読み込み＆分解なんかの処理は、created の中へ移動します。

③this とか that とかではなく、シンプルに app で。

なんか怒られそうですが（笑）、Vue インスタンスをせっかく app に入れてるんだから、app 使った方が分かりやすくなるんじゃない？と思ったので、ちょっと変えてみたいと思います。（JSのお作法的にどうなのかは分かりませんが・・・）

特に、②でやっていることは、 this の所在を変えてしまうので、that とかを突然使い出すよりも、app の方が分かりやすいかな・・・と。

※2018/05/30追記：created 直後は、app は認識されていない状態のため、this を使わないとダメみたいでした。。。

④data の中身は、Vue.set を使って・・・ではなく、data をちゃんと定義してから代入した方がいいんじゃない？

data の定義が、初期サンプルのままだったりもするので、その辺りもしっかりと書き換えて活用してみようかと思います。
また、Vue.set を使う必要があるのか・・・という疑問もあったので、とりあえず用意した変数に代入させるシンプルな形に変更してみようと思います。

ほかにも、不要な処理やこうできるんじゃないか・・・と思ったところを書き換えました。

ということで、上記の点を修正して実行させたものが以下になります。
前回と同様の表示になっていますね。

カテゴリごとに表示を切り替えてみる

リファクタリングもざっと終わったところで、次は、カテゴリのパラメータを用意して、カテゴリごとに絞り込み表示に挑戦です。

とりあえず、絞り込みのボタンはベタ書きで以下のものを用意します。

[index.html]
      <ul class="guide-categories">
        <li><button @click="setCategory('')">ホーム</button></li>
        <li><button @click="setCategory('btn')">btn</button></li>
        <li><button @click="setCategory('text')">text</button></li>
      </ul>

クリックしたら、 setCategory() を実行する、という単純なものですね。

次に、setCategory の処理と、使用する変数等を用意します。

[guide.js]
      :
  var app = new Vue({
    el: '#app',
    data: {
      curCategory: '',  // ←現在のカテゴリ絞り込み用変数追加
      curStyles: {  // ←現在のスタイル表示用配列追加
        title: '',
        name: '',
        category: '',
        html: ''
      },
      styles: {
        title: '',
        name: '',
        category: '',
        html: ''
      }
    },
      :
    methods: {
      sortData: function(ary) {
        app.curStyles = ary.sort(function(a, b) {  // ← 代入先を app.curStyles に変更
          return (a["name"] > b["name"]) ? 1 : -1;
        });
      },
      setCategory: function(str) {
        // 選択したカテゴリからデータ抽出
        app.curCategory = str;
        var tmpStyles = app.styles;
        var filtered = $.grep(tmpStyles,
          function(elm, index) {
            return (elm.category === app.curCategory);
          }
        );
        app.sortData(filtered);
      }
    }
      :

続いて、現在のスタイル表示用配列の変数名を変更したので、HTML側も変更します。

[index.html]
        :
      <div v-for="style in curStyles" class="guide-wrapper"> // ← curStylesに変更
        <h2 class="guide-heading-2">{{ style.title }}</h2>
        <div v-html="style.html" class="guide-body"></div>
        <hr class="guide-divide">
      </div>
        :

実行結果はこんな感じになりました。

おぉ・・・また一段と良い感じになってきましたね。