なんとなく（今更ながら）Vue.jsを試してみた〜その２

2018.04.05

我が家の目の前にある雑木林から、この時期になると鶯が歌の練習を始め、目覚めの良い朝を与えてくれます。おはこんばんちわ、kouraku です。昨年の鶯は珍しく音痴でしたが、今年の鶯はとても上手です。

さてさて、先月末ギリギリに投稿したため２週連続となってしまいましたが、今回も引き続き Vue.js を試してみました。

なんとなく（今更ながら）Vue.jsを試してみた

前回は、Vue.js を使ってスタイルシートの中身をHTML上に表示するところまでやりました。その時、「おや・・・？もしかして、これって・・・アレを簡単に作れるんじゃない？」という妄想が膨らんできました。そのアレとは何か・・・を今回少し形にできるところまでやってみたいと思います。

スタイルシートの内容は表示できたけど・・・

今のスタイルシート（style.css）はこんな感じです（適当すぎてすみません）。

/*docs
コメントコメントコメント

```html
<span>赤</span>
```
*/
span {
  color: #f66;
}

/*docs
コメントコメントコメント

```html
<span class="test">.test</span>
```
*/
.test {
  color: #0ff;
}

ここからコメント記号を外して表示させたのが、先週の最後の内容です。

文字列がそのまま、横一列に並んで表示されているだけで、このままだと何が書かれているかちょっと分かりづらいですよね。よって、少し体裁を整えてみたいと思います。やる内容はこんな感じです。

コメントは Markdown で記述しているので、marked.js を使用して変換させる。
サンプルコードは、highlight.js を使用して分かりやすくする。

体裁を整えてみる

maked.js の準備は、以下のJSを設定するだけです。

【JS】
<script data-require="marked@*" data-semver="0.3.5" src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>

highlight.js の準備は、以下のCSSとJSを設定します。

【CSS】
<link data-require="highlight.js@*" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/solarized_dark.min.css" />
<link data-require="highlight.js@*" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/github.min.css" />
<link data-require="highlight.js@*" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/default.min.css" />

【JS】
<script data-require="highlight.js@*" data-semver="0.7.3" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/highlight.min.js"></script>

まずは、Markdown形式で書かれたものを HTML形式に変換するための marked.js ですが、こちらは表示させる前に変換させておけば良いので、とりあえず・・・

[script.js]
    :
  axios.get('./style.css')
  .then(function (response) {
    var data = response.data.match(/\/\*docs[\s\S]*?\*\//gm);
    data.forEach(function(v,i,a) {
      a[i] = a[i].replace(/\/\*docs[\s\S]/, '').replace(/[\s\S]\*\//, '');
      a[i] = marked(a[i]);    // <- ここ
    });
    app.set(data);
  })
    :

といった感じで設定してみます。

次に、highlight.js ですが、marked.js で変換した際の code に付与されるクラスには、デフォルトで「lang-」という接頭辞が付いてしまいます。こいつを外した上で highlight.js を当てたいので、marked.js のオプション設定を以下のようにします。

[script.js]
    :
  marked.setOptions({
    langPrefix: '',    // <- プレフィックスを無しに
    highlight: function(code, lang) {    // <- ついでに highlight.js を使用した結果を返すように設定
      return hljs.highlightAuto(code, [lang]).value;
    }
  });
    :

すると・・・こんな感じになりました。

おぉ！！なんだからしくなってきましたね！！！

そう、妄想していたアレの正体は・・・

何となく形にできそうになってきたので、ここでアレの正体を発表しましょう。

そうです。CSSのスタイルガイドです！！！

「Vue.js だけでスタイルガイドできたら、生成不要だからめっちゃ便利じゃない？」

そんなことをふと思いつき、ちょっとチャレンジしてみようと思ったわけですね。

スタイルガイドっぽく・・・

ということで、ここで先に以下の変更をします。

スタイルガイド用のCSS（guide.css）を追加。
script.js を、スタイルガイド用のJSとして、guide.js に名前を変更。
サンプルのCSS（style.css）の内容も、もう少し分かりやすく、以下の様に変更。

/*docs
テキストカラー：<span class="text-red">赤■</span>

```html
<span class="text-red">赤</span>
```
*/
.text-red {
  color: #f66;
}

/*docs
テキストカラー：<span class="text-blue">青■</span>

```html
<span class="text-blue">.test</span>
```
*/
.text-blue {
  color: #66f;
}

準備はできました。

さて、スタイルガイド、と言えば、サンプルコードだけでなく、表示サンプルも必要です。では、表示サンプルを追加する処理を入れてみます。

[script.js -> guide.js]
    :
  axios.get('./style.css')
  .then(function (response) {
    var data = response.data.match(/\/\*docs[\s\S]*?\*\//gm);
    data.forEach(function(v,i,a) {
      a[i] = a[i].replace(/\/\*docs[\s\S]/, '').replace(/[\s\S]\*\//, '');
      var sample = a[i].match(/\`\`\`html[\s\S]*?\`\`\`/gm);    // <- 変換される前の状態を抜き取って・・・
      a[i] = marked(a[i]);
      if (sample !== null) {    // <- 抜き取ったデータが存在すれば、不要な文字列を削除して html のデータに追加
        sample = sample[0].replace(/\`\`\`html[\s\S]/, '').replace(/[\s\S]\`\`\`/, '');
        a[i] = a[i] + '<div class="sample">' + sample + '</div>';
      }
    });
    app.set(data);
  })
  .catch(function (error) {
    console.log(error);
  });
    :

もっとスマートな書き方があるのかもしれませんが、とりあえずゴリゴリ書いてみました。
それでは、結果を見てみましょう。

サンプルコードの下に、ちゃんと表示サンプルが追加されました！！！やった！！！