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

2018.07.12

最近、FREETEL のスマホ（SIMフリー）を使い始めている kouraku です。おはこんばんちわ。
とりあえず、OCN モバイル ONEでデータ通信の契約だけしてのお試し中なのですが、これが思いの外なかなか良い感じです。何しろ、金額がとても安い！このまま移行しちゃおうか・・・なんて考えてしまうほどです。

さてさて前回は、コードの見直しとともに、カテゴリを動的に表示させるところまでやりました。

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

今回は案件で使用することを想定して、

まずはstyleguideディレクトリへファイルを移動し、
setting.jsonで読み込ませたいCSSを設定し、
さらに複数のCSSを読み込めるようにしたいと思います。

styleguide ディレクトリを作成しファイルを移動する

現時点では、スタイルガイド用ファイル全てルート直下にある形になっているため、実際の案件で使用しようとすると、ルート直下がごちゃごちゃになります。よって、styleguide ディレクトリを作成して、そこへ関連ファイルを移動させます。

index.html   - とりあえずスタイルガイドへのリンクのみ記載  
style.css      - スタイルガイドで使用するCSS  
[styleguide]  
   ∟ guide.css      - スタイルガイド用CSS  
        guide.js         - スタイルガイド用JS  
        index.html    - スタイルガイド用HTML  
        README.md  - スタイルガイドホーム画面で使用

こんな感じで、スタイルガイドは完全に切り離された状態になります。

setting.json で読み込ませたいCSSを設定

index.html の head内に、ベタに読み込ませたいCSSを記述しても良いのですが、別ファイルに設定情報を持たせて読み込ませた方が色々と整理できそうですよね。よって、setting.json　を用意して、ここにCSSのパスを記述することにします。
（plunker ではルートパスが使用できないため、相対にしています）

[/styleguide/setting.json]

{
  "title": "Vue.js でスタイルガイド作成に挑戦！！",
  "css": "../style.css"
}

CSSだけではなく、一応他のデータも読み込んで使えることを確認するために、title も追加しておきました。ページタイトルに使用します。

styleguide の index.html と guide.js に修正を加えてみましたので、plunker でご確認いただければと思います（対応箇所にコメント入れてました）。
methods に getSetting を追加し、そこで得た情報を getStyles に渡すようにしてみました。

読み込み時間が若干伸びた感じはありますが、表示は前回と同様のものになりました。

複数のCSSを設定する

さて、最後に、複数のCSSを設定できるように変更を加えていきたいと思います。
まずは、style.css の中から linkカテゴリの情報のみを切り出して、style2.css を作成します。

[/style2.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;
}

次に、setting.json でCSSを複数読み込めるように、配列として style.css と style2.css を設定します。

[/styleguide/setting.json]

{
  "title": "Vue.js でスタイルガイド作成に挑戦！！",
  "css": [
    "../style.css",
    "../style2.css"
  ]
}

次に、methods　の　getStyles の内容を書き換えます。複数のCSSに対応するよう for で回して読み込ませるようにしました。

ちゃんと　style2.css に切り分けた　linkカテゴリも表示されていますね。

しめ

これで、Vue.js による CSSスタイルガイドもほぼ出来上がりました！しかし！！！！実は問題がありました。jsが実行されないのです。よって、slickなどで作ったカルーセルの確認などは現時点ではできません。。。今後の課題として残しておき、ひとまず『Vue.jsでCSSスタイルガイド作成に挑戦！』は、これで区切りとしたいと思います。
いやー、長かったですが、ようやくここまで辿り着けました。

にしても、OCN モバイル ONEのSIMカードを１契約で複数共用できるプラン・・・すごく気になります。試しに申し込んでみようかな・・・などと思っている今日この頃です。