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

なんとなく(今更ながら)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 と比較すると、ものすごく敷居が低く感じますね。馴染みやすいです。まぁ、突き詰めると色々と出てくるのでしょうけど(苦笑)。

さてさて、『天狗納豆』ですが、これがもうホントに、『美味しんぼ』でも紹介されていた通り、全くと言っても良いくらい、あの納豆独特のアンモニア臭がしないのです!むしろ、藁の香りが豆に移っていて、とても香ばしくて良い感じに思えました。

そして、いざ食べてみると・・・食べてもやはり納豆の臭みはほとんど感じられず、むしろ豆の食感と旨味がとても良く、タレの味が染み込んだネバネバさえも美味しく思えました。
すごい、『天狗納豆』!!!!納豆食べることができたよー!!!ありがとーー!!!!

納豆嫌いの方は、試してみてはいかがでしょうか?

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

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