なんとなく(今更ながら)Vue.jsを試してみた
納豆が大嫌いな kouraku です、おはこんばんちわ。
そんな kouraku が、先日、あの『美味しんぼ』でも取り上げられていた水戸の『天狗納豆』にチャレンジしてみました!結果は・・・後ほど。
さてさて今回は、隣の ishida が Vue.js を使っている姿を見ていて、「なんか便利そうだな・・・」と思い、今更ですが自分もちょっと触ってみることにしました。
※ここでは、Vue.js に関する基本的な内容には一切触れません。公式サイトを御覧ください。
Vue.js 日本公式サイト
とにかく公式の説明が丁寧
Vue.js の公式サイトは、とにかく説明が丁寧でわかりやすい!というのが第一印象です。
更に、環境を色々と用意する必要もないので、その辺りもとっつきやすさを感じました。
とりあえず、公式の最初のサンプルを書いてみると、こんな感じになります。
{{ style }}
には、script.js の data で指定した style の内容、「It's default text.」が入ります。
また、script.js の data にある message の内容が、{{ style }}
を囲む span の title属性 に入るようにしているので、「It's default text.」の上にカーソルを載せると、「You loaded this page on 現在日時」が表示されます。
初歩の初歩段階なので当然ではありますが、見た目がとてもシンプルです。
スタイルシートの内容を表示してみたくなった
指定したテキストを表示するだけではつまらないので、スタイルシート(style.css)の内容を表示させてみましょう。ここでやってみたいことは・・・
- axios を使用して style.css を読み込む。
- style.css 内のコメントのみ抜き出す。
- 抜き出したコメントのコメント記号は省く。
この3点です。チャレンジです。
結果は・・・こんな感じになりました。
おぉ・・・見事にできました。想定通り!!!
「ん・・・待てよ・・・ということはもしかしたら・・・」
この先の妄想は、試してみて、もしうまくできたら次回ご紹介します。
しめ
Vue.js は Angular と比較すると、ものすごく敷居が低く感じますね。馴染みやすいです。まぁ、突き詰めると色々と出てくるのでしょうけど(苦笑)。
さてさて、『天狗納豆』ですが、これがもうホントに、『美味しんぼ』でも紹介されていた通り、全くと言っても良いくらい、あの納豆独特のアンモニア臭がしないのです!むしろ、藁の香りが豆に移っていて、とても香ばしくて良い感じに思えました。
そして、いざ食べてみると・・・食べてもやはり納豆の臭みはほとんど感じられず、むしろ豆の食感と旨味がとても良く、タレの味が染み込んだネバネバさえも美味しく思えました。
すごい、『天狗納豆』!!!!納豆食べることができたよー!!!ありがとーー!!!!
納豆嫌いの方は、試してみてはいかがでしょうか?