Vue.jsでJavaScriptフレームワーク入門

株式会社ジャストシステム柳生田亮 2017/03/23

自己紹介

• 株式会社ジャストシステム柳生田亮

• 主にWebアプリのフロントエンド(JavaScriptとかSpring Frameworkとか)

• 複数プロジェクトでUI周りの基盤設計

• (なにか気の利いた小ネタ)

Vue.jsでJavaScriptフレームワーク入門

話すこと

• Vue.jsを使って嬉しかったこと

• jQueryだけの場合との比較

• こんな風に書けるんだベンリ！

• jQueryだけだったらと思うと...(戦慄)

• でも結局jQueryにも頼っちゃう

話さないこと

• Vue.jsと他の人気フレームワークとの比較

• Reactと比べてどうなの？

• 使い比べてないですすみません

Vue.jsどんなもの？(だと思ってる？)

• 親しみやすい• 最初から、なんとなく「こう書くのかな？」で書き進められる。• 日本語ドキュメントも豊富だし、学習コストは高くない。• 活用して便利さを享受するためには0ではない。

• 融通が効く• jQueryとか、他ライブラリとの併用も特に問題無し。• もっとフレームワークの流儀を押しつけてもらった方が嬉しい場合もあるかも。

• 高性能• まだ実感できていない。• 謳われている水準のパフォーマンスを得るためにはそれなりに習熟する必要があ

りそう。

(以上3点の見出しはVue.jsの自称→ https://jp.vuejs.org/ )

実際どんな構成で使っているか

• Webpackで、JavaScriptやCSSとあわせてVueもビルド。• Vueファイルのうれしさは後述。

嬉しいこと(1)• javascript上でhtmlの文書構造を知らなくてよい

• (＋純粋に記述量が少なくて済む)

嬉しいこと(2)

• .vueファイルでコンポーネントを記述できる。

• 必要なjs+template+styleをまとめて記述できる。• parts.jsとparts.htmlとparts.cssを行ったり来たり...が不要。• templateはhtmlやpug(jade)、styleはcssやscssやstylusなど使用できる。

• styleはこのコンポーネントだけに効かせることができる。

• React.jsのjsxと似ている？

• .vueはjs+html+cssの組み合わせ。

でもjQueryにも頼っちゃう• jQueryプラグイン資産

• ダイアログ• カレンダー• カスタムスクロールバー

• 併用できるのはVue.jsの懐の深いところ• カオスにならないように、jQueryを使う部分をVueコンポーネントとしてラップするなど工夫したい

VimでVue• https://github.com/posva/vim-vue

• > Vim syntax highlighting for Vue components.

• .vueファイルのsyntaxハイライト• 少し動作が遅い？• 結局テンプレート+scriptタグ+styleタグなのでfiletype=htmlでもよい

かも。

• https://github.com/w0rp/ale• > Asynchronous Lint Engine

• eslintにvueの設定をしておいて非同期でlintチェック

まとめ• Vue.js楽しい• 他のフレームワークと使い比べたい• jQueryとも上手くつきあいたい

ご清聴ありがとうございました