Upload
justsystems-corporation
View
1.461
Download
0
Embed Size (px)
Citation preview
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とも上手くつきあいたい
ご清聴ありがとうございました