一昔前のフロントエンドの開発手法に慣れていて移行したいかたや、サーバーサイドエンジニアで少しフロントエンドも関わってみたいかたにもおすすめできる、 シンプルでわかりやすく、かつ強力なフレームワークであるVue.js。 今回はVue.jsに関する基本的な話のほか、最新バージョンであるVue 2.0についてご紹介したいと思います。
WordBench京都 x ng-kyoto共催イベントでVue.jsについて話しました！#wbkyoto #wordbench #ng_kyotohttps://t.co/zgIiTnXGST
— Potato4d (@potato4d) 2016年10月9日
Vue.jsとその未来 2.0
資料です
フレームワーク使ったことある人、多いですね
Vue.js使ったことある方、少ないですね
SPAやったことある人、まあいる
ドキュメントの翻訳をやり始めました
お手伝いできそうな方ぜひ
今回話すこと
Vue.jsとはなにか
シンプルで分かりやすいフレームワーク。jQueryだけの人からも移行しやすいのがメリットだと思います。詳しくは後で。
最近新しいバージョンが出て進化したのであとで紹介します
Vue.jsを使うだけでも、かんたんな使い方から、手慣れた方が書きやすいとか、初心者から上級者まで触りやすい。軽いフレームワークのわりに公式フレームワークが充実している。
双方向データバインディングとは
インプットの値、フォームまわりのチェックボックスやセレクトボックス、テキストを変更したらJSも変わるしJSが変わるとフォームも変わるみたいなことが出来る。
こうして
こうすると
こうなって
httpsjp.vuejs.orgから確認できます。
カスタムコンポーネントとは
HTMLやJSをスコープに閉じ込めることが出来る。 Webサイトのパーツを定義できる。そういうことを行うと、例えばここのナビゲーションの要素を他サービスに持っていきたい、みたいなことが容易にできます。
こういうコードを作っておくと、
こうなる。
Vuejs.org のガイドの方に言っていただくとこの辺はわかると思います。
jQueryでやろうとするとインプットに応じてデータを受けて、デフォルト値も別に指定して、とかしていると...
こういうことをしなくていいのが便利だよねと。
初めて書くときは index.html に全部書いてしまって始められて、設計とかを考えないところから始められる。
慣れたらディレクトリ分けたり出来る。
最終的にはこうして諸々やっていって、Webpackなどを使う構成とかになると
こういうのも問題なく出来る。
このように習熟度に応じて使えるのがよい。
利用方法
scriptタグからちょく、npm、bowerにも対応している、Webpack、browserify両方からのビルドも可能。
webpack知らない人
Angularの人「知らないです！教えてください」
（会場笑い）
…ふつうにやると全部読み込みに行かないとか、ブラウザがJSを解釈できるように特殊な書き方ができないとか、ブラウザが対応していないとかがある。そういうのをまとめてやってくれるツール。開発中は大量のファイルがあるが、webpackなどを通すと最終的には一つのファイルになる。
中規模でも利用しやすい拡張郡
JSフレームワークはJS上で全て完結する都合上、JSが実行されるまでは基本空っぽ。全部読み込み終わってJSが実行されて結果が流し込まれて初めて読める。そうするとSEOとかが良くないと言われる。
しかし割りとカバーできるようになってきている。
JSがで完結するけどルーティングもページ振り分けも出来る。バックエンドのルーティング概念をそのまま表に持ち込む。
JSオブジェクトでルーティングする様子
Fluxパターンを実装したければVuex
サーバ側でVue.jsを持ってHTMLを生成してクライアントに渡すみたいなの(サーバーサイドレンダリング？)はVue 2.0で出来るようになる
サーバーサイドレンダリングの話もご紹介しますがスピードアップなどもしている
Vue.js1系のコードの9割がた変更無しで2に移行できる。Routerまわりは変更があってそこをたくさん使っていたら大変かも。
知りたい人はぜひいろいろ聞いて下さい！
まとめ
jQueryだとDOMをゴリゴリ操作しなきゃいけなかったが、モデルを定義すれば良くてむしろ初心者に分かりやすいという声も。
日本語ドキュメントの翻訳の完成をお待ち下さい
QA
Wordpressでどう使ったら良いですか？
記事データがAPIになるWP Rest APIという機能があると効いているのですが、それを使って記事データを取得してVueで表示するということが出来る。 スマホ版を作る時にAPIを叩いて表示するということも出来るが、まぁ、Wordpressのことはあまり考えないほうが良いんじゃないですかねw
Flux の概念がわからなかったです
サーバーサイドMVCのような設計パターンの一つで、データの流れがわかりやすくなる。Reactとかを使っている人が好むような、JS界隈の代表的設計パターンの一種です。
Angular2でRouterやFluxも出来てあまり変わらない気がしたが、すごいところはどこですか
Vue.jsの何が良いか、「それAngularでもできるよ」って言う人が毎回一人いらっしゃるんですけど、とっつきやすい、頭使わなくていいというのがよい。後で誰が触るのかわからないコード、協業で人数が大きくなるものは、Fluxの基盤がわからないとかいう人が混ざると困ったりロスが出たりする。あとで分かりやすいコードを残すという面では協力、そして短い期間でも教えながら、学びながら実戦投入しやすい。学習コストと頭使わなくていい問題
「それAngluarで出来ると思うんですけど」
ロールアップ？は
webpackで良いんじゃないですか
Hello worldをバンドルしたときのサイズどれくらいですか
ちょっとわからないです
これがメガとかになると辛いってなるはずで、Reactだけならそんなにならないはず。
Reactって結構デカかったはずですけど
AngularはReactと比べると馬鹿みたいにデカイ
あ、Angularと比較してVue.jsは軽いです
圧縮すると200 キロぐらいになりました
Vue.jsは何年後まで戦えると思いますか？
そうですねぇ、何年ぐらい、、、JSの変遷って早くなったり減退したりで読めないところがあるが、オリンピックの直前ぐらいまではいけるんじゃないですかねぇ
リオ？(もう終わってる)
まだ死んでないです、頑張ったら3年か4年ぐらいじゃないですかね、Angularは？
Angularは3年だと思ってます
じゃあVueも3年で
Vueは大きな企業に採用されていますか？ReactはFacebookみたいな
無いですね、どこか1企業と仲良くはしているが、それほどでかくはない。Laravelは本体にVue入れるみたいな話になってる。コミュニティベースで多方面のつながりがある、女ったらしみたいなフレームワークですね。
Wordpressのテーマの公式ディレクトリに上げる時に、ReactとかはHTMLにDOM書いちゃうんで、だせない。RiotやVueだとHTMLとして残ってるので、公式テーマにはそのへんのを使ったほうがよさそう。
だとしたらRiotのほうが良いんじゃないですかね、Riotはボイラープレート作るのアホらしいしScriptタグでやってもいいぞみたいな感じ。VueはなんだかんだでWebpack使うのが良いぞというスタンスなので、従来のWeb感ある作り方がいいんだったらRiotかな。
最後に何か一言
あと2セッションあると思いますがあまりWordpressのことは考えないほうが良いと思います。
みんなの反応
twitter.comなんだろう。WordBenchにVue.jsの話をぶち込みにくるって、結構なことですよね・・・。#wbkyoto #ng_kyoto #ng_kyoto
— 榊原昌彦 (@rdlabo) 2016年10月9日
twitter.comFluxもReduxもしってるけど、Vuexってあるんだｗｗ#wbkyoto #ng_kyoto
— 榊原昌彦 (@rdlabo) 2016年10月9日
twitter.com満足度、Vue > Angular2というアンケート結果 もあるhttps://t.co/diC5gajzs5 #wbkyoto
— 国土交通省 (@amagitakayosi) 2016年10月9日
twitter.comng2は5年は持つと思ってるけどなあ #wbkyoto
— 国土交通省 (@amagitakayosi) 2016年10月9日
