Cho’s Vue.js
Hello, Vue.js
個⼈的な体験談
まとめ
AGENDA
Hello, Vue.js
Vue.jsとは?
#1. Electronとは
JavaScriptを使ったフロントエンドのフレームワーク
「Vue」の発音?
/ v j u ː /
viewと同じです
JR東日本 ビューカード 「異才のカード。」15秒編 00:14秒 〜
Vue.jsの特徴
特徴1 手軽く、メンテしやすい
❶ vue.js入れる
❷ tag設置
❸ ロジックを書く
1. DOMコントロールはほぼタグ設置で完結
2. 状態管理はモダンなパタンを使っていて扱いやすい
3. コンポーネント化するとコードがDRY*になる
※ DRY: Don’t Repeat Yourself
まとめると...
特徴2 オープンソース
MITライセンスなので
やり放題
特徴3 ハイパフォーマンス
らしい
● Vue.jsはパフォーマンス・メモリ消費とも優秀
● 体感的にReact.js・Angular.jsと大差がない
● 結論:ハイパフォーマンスは売りではない
react.jsとangular.jsユーザはvue.jsに乗り換える必要がない
ご安心ください
Vue.jsのライバルたち
PolymerReact.js Angular.js
個人的な体験談
Vue.jsを使って1.5ヶ月...
WorkshipにVue.jsを導入しようと思った理由:
1. HTMLのアトリビュートで状態管理できる
2. JSにまだ慣れてない方にも入りやすい
3. 自分の学習欲に満たすため
所詮JSじゃ
ん?
結果(2018年3月7日の時点で)
1. HTMLのアトリビュートで状態コントロールできる
2. JSにまだ慣れてない方にも入りやすい
3. 自分の学習欲に満たすため
結果(2018年3月7日の時点で)
1. HTMLのアトリビュートで状態コントロールできる
2. JSにまだ慣れてない方にも入りやすい
3. 自分の学習欲に満たすため
➔ 複雑のロジックはカオスになる
結果(2018年3月7日の時点で)
1. HTMLのアトリビュートで状態コントロールできる
2. JSにまだ慣れてない方にも入りやすい
3. 自分の学習欲に満たすため
➔ 複雑のロジックはカオスになる
結果(2018年3月7日の時点で)
1. HTMLのアトリビュートで状態コントロールできる
2. JSにまだ慣れてない方にも入りやすい
3. 自分の学習欲に満たすため
➔ 複雑のロジックはカオスになる
➔ 結局JSをゴリゴリ書かないと
結果(2018年3月7日の時点で)
1. HTMLのアトリビュートで状態コントロールできる
2. JSにまだ慣れてない方にも入りやすい
3. 自分の学習欲に満たすため
➔ 複雑のロジックはカオスになる
➔ 結局JSをゴリゴリ書かないと
結果(2018年3月7日の時点で)
1. HTMLのアトリビュートで状態コントロールできる
2. JSにまだ慣れてない方にも入りやすい
3. 自分の学習欲に満たすため
➔ 複雑のロジックはカオスになる
➔ 結局JSをゴリゴリ書かないと
➔ 勉強になってよかった
自分なりのBest Practice
1. コンポーネント化を徹底にする
2. UIパーツの共通化(デザイナーとの連携)をしっかりやる
3. webpack+JSXを利用する
4. Vue.jsをやめる(React.jsとAngular.js経験者のみ)
例えば...
「ui-button」というコンポーネントを作成し、
プロジェクトのHTML部品を統一させる。
まとめ
1. フロントのJavaScriptフレームワークの中でも有力な選択肢
2. ドキュメントしっかりしている
3. 既存のプロジェクトにも導入しやすい☆
Vue.js PROS
1. 下手するとHTMLの可読性が減る
2. 記述のクセが強い
3. 既存のreact.jsやangular.jsユーザには魅力が足りない
Vue.js CONS
ご清聴有難うございました
Good is good.
We provide opportunities to the SEKAI by fusing technology and ideas.
テクノロジーとクリエイティブでセカイをより良くする
お問い合わせはこちらから
https://giginc.co.jp/contact/

Vue.jp