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

2018.06.06

我が愛車は、購入してから１２年以上経ち、そろそろ車検の時期がまた近づいて来ました。おはこんばんちわ、 kouraku です。特に不調なところもなく今回も更新する予定ですが、夜中に車を出す機会も多いため、エンジンスタート時の音がならない、電気でも走れる車なんかに乗り換えようかな・・・などと思ったりもします。

さて前回は、定義したスタイルたちを、カテゴリごとに絞り込み表示させてみました。

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

今回は、真っ白なホームに README.md の内容を表示させ、さらに前回ベタ書きしていたカテゴリボタンを動的に表示させるように変更したいと思います。

created の中身を見通し良くしてみる

早速、README.md を読み込んで表示させる処理を created の中で追加しようと思いますが・・・このままだと created の中身が長くなりすぎて分かりづらいので、一旦現状のスタイル読み込みを処理を getStyles という名前で methods に落とし込みます。

[guide.js]
    created: function() {
      this.getStyles();  // ← created 直後は app が認識されていないので、 this を使用。
    },
    methods: {
      getStyles: function() {  //  ←　以下の処理はそのまま。名前をつけて methods に置いただけ。
        axios.get('./style.css')
        .then(function (response) {
          var res = response.data.match(/\/\*docs[\s\S]*?\*\//gm);
          var tmpStyles = [];
            :
      },
        :

はい、前回「app 使えばいいじゃん」と言っていたのですが、created 直後だと、まだ app が認識されていない状態でしたので、ここだけ this を使いたいと思います。。。
とりあえず、これで created の中はとてもスッキリしました。

README.md　を読み込んで表示させてみる

では、data に　description を用意し、そこに README.md の内容を格納させる処理を作成します。

[guide.js]
    :
  var app = new Vue({
    el: '#app',
    data: {
      description: '',  //  ←　追加
      curCategory: '',
      :
    created: function() {
      this.getReadme();  // ←　追加
      this.getStyles();
    },
    methods: {
      getReadme: function() {  // ← 追加
        axios.get('./README.md')
        .then(function (response) {
          app.description = marked(response.data);
        })
        .catch(function (error) {
          console.log(error);
        });
      },
        :

こんな感じでしょうか。README.md を読み込んだら、marked を通して app.description に内容を格納する、といった流れになります。続きまして、HTML側にホームの場合に README.md の内容を表示させるような記述を追記します。

[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>
      <div v-if="curCategory === ''" class="guide-home">  // ← ここから
        <div  v-html="description"></div>
      </div>  // ← ここまで追記
      <div v-for="style in curStyles" class="guide-wrapper">
        <h2 class="guide-heading-2">{{ style.title }}</h2>
        <div v-html="style.html" class="guide-body"></div>
        <hr class="guide-divide">
      </div>
        :

ではこちらの実行結果を見て見ます。

ホームの場合、README.md の内容が表示されるようになりました！

あれ・・・そういえば・・・

ふと気づいたことがあります。カテゴリ絞り込み表示させる前の styles ですが、これって描画に直接関わってはいないデータだな・・・と。よって、別途 styles を定義して、data から外しちゃいます。同じようなものが二つあるのもややこしいので。

[guide.js]
(function(global, $) {

  var styles = {};  // ← 箱だけ定義

  marked.setOptions({
    :
  var app = new Vue({
    el: '#app',
    data: {
      description: '',
      categories: [],
      curCategory: '',
      curStyles: {
        title: '',
        name: '',
        category: '',
        html: ''
      }  // ← styles を data から削除 
    },
    created: function() {
      :
    },
    methods: function() {
        :
      getStyles: function() {
            :
          styles = tmpStyles;  // ← app.styles から styles に修正
          app.setCategory('');
            :
      },
        :
      setCategory: function(str) {
        app.curCategory = str;
        // 選択したカテゴリからデータ抽出
        var tmpStyles = styles;  //  ← app.styles から styles に修正
           :

行き当たりばったりな感じがめちゃめちゃ出てますね〜〜（苦笑）

カテゴリボタンを動的に表示させてみる

では、今回最後に、カテゴリボタンの動的表示に挑戦してみます。

まずはJS側に、data にカテゴリたちを格納する箱を用意します。

[guide.js]
    :
  var app = new Vue({
    el: '#app',
    data: {
      siteTitle: '',
      description: '',
      categories: [],  // ← 追加
      curCategory: '',
      curStyles: {
     :

続きまして、getStyles 内で行なっている各スタイルのカテゴリを取得する箇所に、カテゴリ配列を作る処理を追加します。indexOf で -1 なら styles に push する、といった具合です。

[guide.js]
                :
              if (info[0].match(/category: ?(.*)[\s\S]/) !== null) {
                category = info[0].match(/category: ?(.*)[\s\S]/)[1];
                if (app.categories.indexOf(category) == -1) {  // ← ここから
                  app.categories.push(category);
                }  // ← ここまで
              }
                 :

次にHTML側を以下のように変えます。

[index.html]
        :
      <ul class="guide-categories">
        <li><button @click="setCategory('')">ホーム</button></li>
        <li v-for="catItem in categories"><button @click="setCategory(catItem)">{{ catItem }}</button></li>
      </ul>
        :

そして、最後に、動的に増えてるのがわかるよう、style.css　に１個新しいカテゴリで定義を作ります。

[style.css]
  :
/* link */

/*docs
---
title: .link-1
name: link-1
category: link
---
リンク

```html
<p><a href="DUMMY" class="link-1">リンク１</a></p>
```
*/
.link-1 {
  color: #006;
}

それでは、実行結果を見て見ましょう。以下のようになりました。

ちゃんと新しく追加した「link」のカテゴリが増えて、絞り込みも問題なくできているようですね！

しめ

ここまで来たら、もう普通に使えちゃそうな感じですね！でも、まだまだ問題はあります。例えば、複数のCSSを使っている場合はどうすれば良いの？とか、どうやっても解決できない問題とか・・・。次回は、実際に使いやすくするために、ディレクトリ構成とか読み込ませるCSSの設定とかについて考えてみようと思います。

にしても、水素カーはもっと普及してくれないのでしょうか？吐き出されるのは水、という環境にとてもやさしい夢の車なのですが・・・。やっぱり圧力がかかってたりするのかなぁ・・・とか、色々と業界の闇を想像して楽しんでる今日この頃です。