関西Node学園4時限目の資料

1. 独学でVueを勉強した勢いで
自社アプリをリプレイスした話
株式会社KYOSO 泉 亮輔
2018/11/02 関西Node学園 #4

2. 2
自己紹介
名前 = 泉 亮輔
会社 = 株式会社KYOSO
お仕事 = IoT / フロントエンドエンジニア
AWS歴 = 約2.5年
好きなAWSサービス = Lambda, DynamoDB, AppSync
自称 = AWS中毒患者

3. 3

4. 4
TL;DR
独学でVueを勉強してチーム内に展開したら思
いの外反響があって、そこからなんやかんや
あって自社アプリをVueで書き換えた。
という話をします。

5. 5
Vueでアプリつくったこと
あるよ！って方

6. 6
、いいですよね！

7. 7
Vueとは？
Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築
するためのプログレッシブフレームワークです。他の一枚板(モノリシッ
ク: monolithic)なフレームワークとは異なり、Vue は少しずつ適用してい
けるように設計されています。中核となるライブラリは view 層だけに焦
点を当てています。そのため、使い始めるのも、他のライブラリや既存
のプロジェクトに統合するのも、とても簡単です。また、モダンなツー
ルやサポートライブラリと併用することで、洗練されたシングルページ
アプリケーションの開発も可能です。

8. 8
詳しくはWeb(公式サイト)で！

9. 9
なぜVueなのか？

10. 10
ある日の私。
そろそろ手組みでアプリケー
ション作るの飽きてきたな…
なにか良さげなフレームワー
クないかな…

11. 11
ある日の私。
おっ！この ってやつ
最近勢いあるし良さげや
な！触ってみるか！

12. 12
周囲のことなど考えず
勢い120%で始めました

13. 13
実際にリプレイスした
自社アプリケーション

14. 14
主役

15. 15
IoT.kyoto VIS
簡単に説明すると…
IoTデバイスデータの可視化アプリ

16. 16
リプレイスした結果…
• VueがDOM操作を隠蔽してくれる
jQueryから卒業できた🎉
• アプリケーションがServerlessになった

17. 17
jQuery卒業

18. 18
問題
DOM操作って複雑になりがち…

19. 19
解決
めんどいDOM操作をVueがよしなに
してくれる！解決！！嬉しい！！！

20. 20
解決

21. 21
結論
DOM操作のストレスから開放された。

22. 22
アプリケーションが
Serverlessになった

23. 23
これは副産物です

24. 24
VueってBuildしたら
HTML/CSS/JS
になるわけですよ。

25. 25
S3でホスティング
できるじゃん！！！

26. 26
リプレイス前

27. 27
構築中…構築中……
弊社環境 お客様環境

28. 28
構築中…構築中……
弊社環境 お客様環境

29. 29
構築中…構築中……
弊社環境 お客様環境

30. 30
構築中…構築中……
弊社環境 お客様環境

31. 31
リプレイス後

32. 32
🎉 祝・Serverless 🎉

33. 33
最近のVue界隈

34. 34
Vue CLI
VueにもCLIがある
Vue製アプリを開発するときに
シンプルにスタートすることができる

35. 35
vue-cli時代(v2)
生のJS書きたくないからTSで書きたい
TypeScriptのビルド環境作るかー

36. 36
@vue/cli時代(v3)
初期のビルドでTypeScriptのビルド環境
を用意するようになった！！！！🎉

37. 37
ちなみに私は…
Pug / Sass(SCSS) / TypeScript でVueを書いてます

38. 38
@vue/cli時代(v3)
Vue UI がいい感じ

39. 39
Vuesax

40. 40
Vuesax
最近出てきたUIコンポーネントのフ
レームワーク
ElementUIより個人的に好み

41. 41
Vueのつらみ…
まだまだTypeScriptに対して
優しくないなーという辛さがある…

42. 42
今後のVueについては…
↓この動画をチェック↓
Evan You来日記念！オンライン質問コーナー！！
URL: https://www.youtube.com/watch?v=oWSVBwcPBIk&feature=share

43. 43
Vueのこれからが楽しみ♫

44. 44
さいごに

45. 45
さいごに

46. 46
さいごに

47. 47
Fin.