akiyoko blog

akiyoko の IT技術系ブログです

「Vue.js Tokyo v-meetup="#1"」に参加してきました

会場

株式会社プレイド
東京都品川区西五反田1-5-1 五反田サンケイビル 4F


Twitter

twitter.com


感想など

Vue.js は、シンプルなデータバインディング機能(控えめなリアクティブシステム)を持った MVVM フレームワークで、そのシンプルさをウリにしています。

Vue.js (発音は / v j u ː /、view と同様) はインタラクティブな Web インタフェースを構築するためのライブラリです。Vue.js のゴールは、できる限りシンプルな API でリアクティブデータバインディング と 構成可能な View コンポーネントを提供することです。


概要 - vue.js

その他にも、

  • 拡張可能なデータバインディング
  • 純粋な JavaScript オブジェクトモデル
  • 理に適ったシンプルな API
  • コンポーネントで UI をビルド
  • 小さいライブラリとマッチしてミックスできる

といった特徴があるようです。(「公式ドキュメント」より)


私はフロントエンジニアではなくて、少し前に隆盛を極めた AngularJS の 1系や、最近 Webフロントエンド界隈で注目を集めている React.js には全然付いて行けていないので、その対抗馬としてシンプルで学習コストが低いという噂の Vue.js をひと目見てみようと、今回特に何の事前知識もなく敵情視察に来たわけですが、なかなかのアウェー感で歯がゆい想いをしました(笑)。


そもそも Vue.js は 2013年に誕生し、2015年10月に 1.0 がリリースされ、この 4月に 2.0 がアナウンスされています(現在ベータ)。
そして、人気急上昇中の PHP フレームワーク「Laravel」のコミュニティにフロントエンドライブラリとして採用された、というのも興味深いところです。

Taylor Otwell, the author of Laravel, picked up Vue.js instead of React as he was searching for a new front-end library. Soon afterwards Jeffrey Way created a screen cast series on Laracasts which popularized Vue.js in the Laravel community. Today some of the most active Vue.js users are from the Laravel community and there are really cool open source projects like Koel built with the two technologies combined.


Vue.js: 2015 in Review

(参考)
Learning Vue 1.0: Step By Step


話題の JSフレームワークという括りで Vue.js/React.js/Ember.js/Knockout.js を比較したトレンドを見てみると、React.js となかなかいい勝負をしているように見えます。



しかしながら、AngularJS パイセンをキーワード候補に入れた途端、その圧倒的な人気を前にして他のフレームワークがひれ伏すことになります。。

勉強会のあと、公式ドキュメント を読んだりしたところによると、JavaScript 以外のサーバサイドフレームワークとの相性も良さげで、お手軽にデータバインディングを試せそうだなと感じました。


8分で入門 Vue.js

@hashedrock さん


  • 一番使うバインディング機能の説明
  • いろいろ組み合わせが可能
    • Vue.js+SVG
    • Vue.js+Canvas
    • Vue.js+D3.js
  • なぜ Vue.js なのか?
    • デザイナーと開発者のハイブリッド


 

ViewModelのダイエット Messengerパターン編

@kitak さん

Vue.js Tokyo v-meetup="#1"でLTしてきた、と発表からカットしたMVVMのあれこれ - kitak.blog

  • M・V・VMに分割
  • 揮発性の現象
    • ダイアログや画面遷移など(は本来消失すべき)
    • 元々 ViewModel で扱っていた状態や振る舞いが、ダイアログの状態と混ざってしまう
  • VM が Messenger を使ってイベントを発火する
  • $emit で投げて Vue.directive で受け取る



 

Vue, from view to view

@lepture さん

  • component は UI
  • widget はサーバとやり取り


 

翻訳から始めるVue.js入門

@hypermkt さん

  • vue-validator 日本語ドキュメントが昨日リリース
  • JTF日本語標準スタイルガイド(翻訳用)に準拠
  • textlint
    • テキスト向けのLintツール
  • 一部カスタマイズ
  • 翻訳してもVue.jsには詳しくならない。。


 

Vue.js体験記(2ヶ月目)

@sibukixxx さん

  • サーバサイドは Laravel
  • マニュアルではわからなかったことも
  • 0.1系の古いシンタックスのままの記事が多い
  • webpack の存在を忘れていた
    • vue file を component に分けても require できない
  • requirebin の webpack版「WebpackBin
  • awosome-vue にいろいろサンプル集が載ってた


 

SPA with Vuex + Vue-Router

@tejitak さん


  • SPA やるなら他にもいろいろなフレームワークがある
    • Ember は海外で人気、Riot は最近出てきた
  • 何でも SPA にすればいいものでもない
    • 本当にパーシャルレンダリングが必要?
    • SEO 効かないとか
  • Vuex は flux アーキテクチャ、redux と同じ考え方
    • Store, Mutation, Action
  • 双方向バインディングは禁止?
  • 両方使うときに便利なのが、Vue-router-sync



 

Evan You Q&A セッション with Skype

Q. 今後、2.0 の展望は?

  • 疎結合で並列で開発中。vue core はほぼ出来上がってる。ほかはまだ出来上がってないので、2.0 はまだリリースできない
  • スポンサーが出資してくれる人が増えてきたので、個人で会社を立ち上げるらしい。vue.js の未来は明るいよ

 

Q. Vue.js を選ぶ一番の理由は?

  • simple, faster, smaller
  • 学ぶの簡単なので、トレーニングコストが低いのはビジネス面で有利
  • Redux, React はコミュニティが大きい、バックグラウンドがしっかりしている。Vue.js もこれから追いつくよ
  • 技術的なメリットはパフォーマンス。React は大きいプロジェクトではオプティマイズが大変

 

Q. Webworker を使ってパフォーマンス上げる予定ある?

  • 予定はない。60 msec 内に UI をアップデートできているので、今のところ必要性が無い
  • 将来的に実装は可能ではある

 

Q. 2.0 のコードネームは?

  • Ghost in the shell

 

Q. 少ないエンジニアで開発できるモチベーションは?

  • React は大きい会社がバックにいて、いろんな需要が満たされるようにしないといけない。React はニーズに応える必要があるけど、Vue.js は使ってくれるデベロッパーをハッピーにしたい。アイデアが根本的に違う
  • Facebook はリクルーティング目的で OSS にした?

 

Q. AltJS や 特定のビルドシステムを推奨することはある?

  • 直接使わせるようなことはない。実際に裏で使ってる人はいるはず