kurokoroll（クロコロール）

2017.8.19

お盆休みも明けましたが、まだまだ残暑厳しいです。愛媛県松山市の街中では俳句甲子園、堀ノ内では松山BEERフェスタといったイベントが開催されている中、勉強会に参加いただいた方々ありがとうございました。

本日は「#3 Vue.jsを使ってみよう」ということで、気になっていたVue.jsを触ってみました。高橋としゆきさん（@gautt）に説明していただきながら、実際にコードも書いてみましたので、その内容を振り返っていきたいと思います。

JavaScriptのフレームワークであるVue.js。ReactやAngularJSなどの他のフレームワークよりも、比較的シンプルなコードで実装できるのが特徴のようです。

Vue.jsの「はじめに」の箇所（コンポーネント以外）を、CodePenを使って実際に実装してみました。たしかにシンプルですが、書き方がかなり独特ですね。慣れないと難しいなというのが正直な感想です。

See the Pen Start Vue.js by kurokoroll (@kurokoro) on CodePen.

レスポンシブなどで、ブラウザの幅によって表示する内容を切り替えるときに使えそうです。次のサンプルは、desktop、tablet、mobileの３段階で表示する内容を切り替えています。このブログだと幅が変わらないので、CodePenを開いて幅を変えてみてください。

WoordPressのREST APIで生成されるJSONデータを読み込み、Vue.jsを使って表示ができるということで、次のサイトを参考に、実際に高橋さんが実装したものを用いて説明していただきました。

HTMLをいちいち変更しなくても、ボタンを設置して表示件数を増やしたり、カテゴリー別の表示ができたりするようです。WordPressのREST APIとの連携はもう少し研究が必要のようなので、実践はまたの機会に。

Vue.js、たしかにコード自体はシンプルですが、書き方がかなり独特ですね。慣れるのに時間かかりそうだなというのが正直な感想。DOMを操作できるのはとても便利で、Webサイトでは属性を書き換えるあたりはすぐに使えそうかなと思いました。

今日使ってみて、どんなことができそうかがわかったので、あとは実践あるのみですね！こんな風に自分が使ってないものを使ってみるきっかけがあるといいなと思います。（自画自賛かよ…笑）

高橋先生、ありがとうございました！

#3 Vue.jsを使ってみよう