インフラエンジニアを募集中です。詳細はこちらなんとなく(今更ながら)Vue.jsを試してみた〜その2JavaScriptVue.jskouraku2018.04.05我が家の目の前にある雑木林から、この時期になると鶯が歌の練習を始め、目覚めの良い朝を与えてくれます。昨年の鶯は珍しく音痴でしたが、今年の鶯はとても上手です。使ってスタイルシートの中身をHTML上に表示するところまでやりました。その時、「おや・・・?もしかして、これって・・・アレを簡単に作れるんじゃない?」という妄想が膨らんできました。そのアレとは何か・・・を今回少し形にできるところまでやってみたいと思います。今のスタイルシート(style.css)はこんな感じです(適当すぎてすみません)。#0ff;}ここからコメント記号を外して表示させたのが、先週の最後の内容です。文字列がそのまま、横一列に並んで表示されているだけで、このままだと何が書かれているかちょっと分かりづらいですよね。よって、少し体裁を整えてみたいと思います。やる内容はこんな感じです。使用して分かりやすくする。準備は、以下のJSを設定するだけです。準備は、以下のCSSとJSを設定します。:といった感じで設定してみます。付与されるクラスには、デフォルトで「lang-」という接頭辞が付いてしまいます。オプション設定を以下のようにします。:すると・・・こんな感じになりました。何となく形にできそうになってきたので、ここでアレの正体を発表しましょう。スタイルガイドできたら、生成不要だからめっちゃ便利じゃない?」そんなことをふと思いつき、ちょっとチャレンジしてみようと思ったわけですね。スタイルガイドっぽく・・・ということで、ここで先に以下の変更をします。スタイルガイド用のCSS(guide.css)を追加。内容も、もう少し分かりやすく、以下の様に変更。#66f;}準備はできました。スタイルガイド、と言えば、サンプルコードだけでなく、表示サンプルも必要です。表示サンプルを追加する処理を入れてみます。:もっとスマートな書き方があるのかもしれませんが、とりあえずゴリゴリ書いてみました。それでは、結果を見てみましょう。やった!!!しめ妄想が、大分現実味を帯びてきました。スタイルガイドとしてはまだまだですよね。次回は、もう少しスタイルガイドっぽく要素を追加したり、表示の仕方を変更してみたいと思います。暖かくなってきたせいか、最近は散歩中の子犬が我が家の前を通るたびにキャンキャン吠え始め、それにつられて我が愛犬もワンワンと対抗し・・・鶯の心地良い歌声による目覚めが台無しになることもしばしば・・・、まぁ、そんなこともあります。便利JavaScriptfujihara2019.05.17はてブバシャログ。Web制作スタッフによるブログです。「現場で使えるテクニック」をモットーに、Web制作全般についてお届けします。