なんとなく(今更ながら)Vue.jsを試してみた〜その2

なんとなく(今更ながら)Vue.jsを試してみた〜その2

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

さてさて、先月末ギリギリに投稿したため2週連続となってしまいましたが、今回も引き続き 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);
  });
    :

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

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

しめ

妄想が、大分現実味を帯びてきました。でも、スタイルガイドとしてはまだまだですよね。
次回は、もう少しスタイルガイドっぽく要素を追加したり、表示の仕方を変更してみたいと思います。

暖かくなってきたせいか、最近は散歩中の子犬が我が家の前を通るたびにキャンキャン吠え始め、それにつられて我が愛犬もワンワンと対抗し・・・鶯の心地良い歌声による目覚めが台無しになることもしばしば・・・、まぁ、そんなこともあります。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ