株式会社HAMWORKSの長谷川 広武（ハム）さんによるVue.jsのセッション。
Vue.jsを使ったことはある人は会場の半分。
触ったことのない人向けの、基礎知識の解説です。
Vue.jsとは
Vue.jsは、The progressive JavaScript Flameworkといわれ、進歩的なフレームワーク。
開発者が段階的に選択できるフレームワークという意味合いです。
有名なjQureyはライブラリ、フレームワークは処理を実行する枠組みのこと。ライブラリは家電、フレームワークは家というイメージです。
jQueryはまだまだ現役。シンプルなコードで利用可能でプラグインが絶大で効率化には良いですが、DOMの追加にはhandlebars.jsなどのテンプレートが必要。
jQuery単体だと不向き、苦手な案件も出てきています。
Vue.jsはデータと表示を同期させる処理が得意で、DOMの変更などに向いています。
Vue.jsの基礎
公式サイトからダウンロードする際、開発用を選択すると、エラーなども表示されるようです。
HTMLから読み込み、elはエレメントの略で、Vue.jsを利用するIDを指定。
二重中括弧を入れるのがMustache構文と言われます。
リアクティブという仕組みがあり、外側からの指定も可能。（詳細は後日リライト）
dataを変更すると表示（View）も変わるもの。
ディレクティブ（v-xxx）という機能を使うと条件分岐も可能。
ループと属性もあり、v-for、v-bindで、タイトル、本文の流し込みなども指定ができます。
イベントをつけるときは、v-onをHTML側に書くことで設定可能。vueのインスタンスにmethodsを指定すると、そのイベントが起きたときの処理が指定できるようです。
双方向バインディングはv-modelで指定したものをそのまま表示できる機能です。
Vueのコンポーネントとして作成することも可能でその中にインスタンスを入れ、複数のコンポーネントを利用可能。
本家サイトにもチュートリアルがありますが、英語で分かりづらいので、たにぐちまことさんのチャンネルなどがおすすめとのこと。
まとめ
Vue.jsは必須ではないですが、何ができるかは知っておくべき。コンポーネント単位での機能向き。他のフレームワークよりも導入が敷居が低いので、まずは触ってみましょう。
コメント