読者です 読者をやめる 読者になる 読者になる

Vue.jsとその未来 2.0 - WordBench 京都 & ng-kyoto 10月勉強会 #wbkyoto #ng_kyoto #wordbench

twitter.com

一昔前のフロントエンドの開発手法に慣れていて移行したいかたや、サーバーサイドエンジニアで少しフロントエンドも関わってみたいかたにもおすすめできる、 シンプルでわかりやすく、かつ強力なフレームワークであるVue.js。 今回はVue.jsに関する基本的な話のほか、最新バージョンであるVue 2.0についてご紹介したいと思います。

Vue.jsとその未来 2.0

f:id:niwatako:20161009133516j:plain

資料です

f:id:niwatako:20161009133522j:plain

f:id:niwatako:20161009133530j:plain

フレームワーク使ったことある人、多いですね

Vue.js使ったことある方、少ないですね

SPAやったことある人、まあいる

f:id:niwatako:20161009133454j:plain

f:id:niwatako:20161009133505j:plain

ドキュメントの翻訳をやり始めました

f:id:niwatako:20161009133537j:plain

お手伝いできそうな方ぜひ

今回話すこと

f:id:niwatako:20161009133617j:plain

Vue.jsとはなにか

f:id:niwatako:20161009133626j:plain

f:id:niwatako:20161009133632j:plain

シンプルで分かりやすいフレームワークjQueryだけの人からも移行しやすいのがメリットだと思います。詳しくは後で。

最近新しいバージョンが出て進化したのであとで紹介します

f:id:niwatako:20161009133716j:plain

Vue.jsを使うだけでも、かんたんな使い方から、手慣れた方が書きやすいとか、初心者から上級者まで触りやすい。軽いフレームワークのわりに公式フレームワークが充実している。

f:id:niwatako:20161009133801j:plain

f:id:niwatako:20161009133802j:plain

双方向データバインディングとは

f:id:niwatako:20161009133911j:plain

f:id:niwatako:20161009133912j:plain

インプットの値、フォームまわりのチェックボックスやセレクトボックス、テキストを変更したらJSも変わるしJSが変わるとフォームも変わるみたいなことが出来る。

こうして

f:id:niwatako:20161009133959j:plain

こうすると

f:id:niwatako:20161009134020j:plain

こうなって

f:id:niwatako:20161009134036j:plain

httpsjp.vuejs.orgから確認できます。

カスタムコンポーネントとは

f:id:niwatako:20161009134221j:plain

f:id:niwatako:20161009134309j:plain

HTMLやJSをスコープに閉じ込めることが出来る。 Webサイトのパーツを定義できる。そういうことを行うと、例えばここのナビゲーションの要素を他サービスに持っていきたい、みたいなことが容易にできます。

こういうコードを作っておくと、

f:id:niwatako:20161009134358j:plain

こうなる。

f:id:niwatako:20161009134418j:plain

Vuejs.org のガイドの方に言っていただくとこの辺はわかると思います。

f:id:niwatako:20161009134521j:plain

jQueryでやろうとするとインプットに応じてデータを受けて、デフォルト値も別に指定して、とかしていると...

f:id:niwatako:20161009134527j:plain

f:id:niwatako:20161009134556j:plain

こういうことをしなくていいのが便利だよねと。

f:id:niwatako:20161009134609j:plain

初めて書くときは index.html に全部書いてしまって始められて、設計とかを考えないところから始められる。

f:id:niwatako:20161009134622j:plain

慣れたらディレクトリ分けたり出来る。

f:id:niwatako:20161009134657j:plain

f:id:niwatako:20161009134705j:plain

f:id:niwatako:20161009134731j:plain

最終的にはこうして諸々やっていって、Webpackなどを使う構成とかになると

f:id:niwatako:20161009134751j:plain

こういうのも問題なく出来る。

f:id:niwatako:20161009134806j:plain

このように習熟度に応じて使えるのがよい。

利用方法

f:id:niwatako:20161009134849j:plain

scriptタグからちょく、npm、bowerにも対応している、Webpack、browserify両方からのビルドも可能。

webpack知らない人

Angularの人「知らないです!教えてください」

(会場笑い)

…ふつうにやると全部読み込みに行かないとか、ブラウザがJSを解釈できるように特殊な書き方ができないとか、ブラウザが対応していないとかがある。そういうのをまとめてやってくれるツール。開発中は大量のファイルがあるが、webpackなどを通すと最終的には一つのファイルになる。

f:id:niwatako:20161009134947j:plain

中規模でも利用しやすい拡張郡

f:id:niwatako:20161009135107j:plain

f:id:niwatako:20161009135109j:plain

JSフレームワークはJS上で全て完結する都合上、JSが実行されるまでは基本空っぽ。全部読み込み終わってJSが実行されて結果が流し込まれて初めて読める。そうするとSEOとかが良くないと言われる。

しかし割りとカバーできるようになってきている。

JSがで完結するけどルーティングもページ振り分けも出来る。バックエンドのルーティング概念をそのまま表に持ち込む。

f:id:niwatako:20161009135226j:plain

JSオブジェクトでルーティングする様子

f:id:niwatako:20161009135357j:plain

Fluxパターンを実装したければVuex

f:id:niwatako:20161009135253j:plain

f:id:niwatako:20161009135416j:plain

サーバ側でVue.jsを持ってHTMLを生成してクライアントに渡すみたいなの(サーバーサイドレンダリング?)はVue 2.0で出来るようになる

f:id:niwatako:20161009135343j:plain

f:id:niwatako:20161009135426j:plain

サーバーサイドレンダリングの話もご紹介しますがスピードアップなどもしている

f:id:niwatako:20161009135454j:plain

f:id:niwatako:20161009135456j:plain

f:id:niwatako:20161009135512j:plain

Vue.js1系のコードの9割がた変更無しで2に移行できる。Routerまわりは変更があってそこをたくさん使っていたら大変かも。

知りたい人はぜひいろいろ聞いて下さい!

f:id:niwatako:20161009135558j:plain

まとめ

f:id:niwatako:20161009135711j:plain

jQueryだとDOMをゴリゴリ操作しなきゃいけなかったが、モデルを定義すれば良くてむしろ初心者に分かりやすいという声も。

日本語ドキュメントの翻訳の完成をお待ち下さい

f:id:niwatako:20161009135738j:plain

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

twitter.com

twitter.com

twitter.com