Vue.js

IT研修で5分間LTを行った資料です。
聴衆はプログラミング初心者でしたので、それに合わせたものです。

Transcript

1. 勝利条件 　・全員が表題を良いものだと認識 　・半分が表題を勉強したいと思う 前回のフィードバック 　・体が揺れてしまう 　・デザイン的に壁が出来てしまう 　・用語の定義が不十分 　・ストーリーが微妙
2. 高木　徹 @TTrpbm Vue.js!!
3. Building User Interface HTML/CSS/JavaScript WHAT IS Vue.js! 2018/4/23 3
4. WHAT IS FRAMEWORK! ルールに則った記述で効果を得る 2018/4/23 4
5. 背景 フロントエンドの変化 5 2018/4/23
6. 目的 6 Vue.jsを使いたい 2018/4/23
7. なぜ Vue.js を選んだ？ 7 ✔ 世界中で愛されてる ✔ 小規模から大規模に対応 ✔ 学習コストが低い 2018/4/23
8. FRONT END FRAMEWORK 2018/4/23 8 図 1 2017 年のフロントエンドフレームワークの GitHub スターランキング [1]Micheal Rambeau, “bestof.js.org,“ https://risingstars.js.org/2017/en/#section-framework, 2018-01-01( 閲覧日 :2018-04-20)
9. JavaScript Rising Stars 2018/4/23 9 図 2 2017 年の JavaScript の GitHub スターランキング [2] [2]Micheal Rambeau, “bestof.js.org,“ https://risingstars.js.org/2017/en/, 2018-01-01( 閲覧日 :2018-04-20)
10. なぜ Vue.js を選んだ？ 10 ✔ 世界中で愛されてる ✔ 小規模から大規模に対応 ✔ 学習コストが低い 2018/4/23
11. PROGRESSIVE Framework! 2018/4/23 11 図 3 ProgressiveFramework[3] [3]Evan You, “Vue.js,“ https://jp.vuejs.org/index.html, 2018-02-06( 閲覧日 :2018-04-20)
12. なぜ Vue.js を選んだ？ 12 ✔ 世界中で愛されてる ✔ 小規模から大規模に対応 ✔ 学習コストが低い 2018/4/23
13. 13 ▪ HTML/CSS/JavaScriptでOK ▪ 公式リファレンスが日本語対応 2018/4/23
14. Vue.js の魅力 14 ✔ コンポーネント指向 ✔ リアクティブ ✔ more... 2018/4/23
15. Single file components! 2018/4/23 15 図 4 コンポーネント指向 [3] 図 5 シングルファイルコンポーネント [3]
16. Vue.js の魅力 16 ✔ コンポーネント指向 ✔ リアクティブ ✔ more... 2018/4/23
17. Two-way binding! 2018/4/23 17 図 6 リアクティブなソースコード例 図 7 リアクティブ例
18. 2018/4/23 18 図 8 基礎から学ぶ Vue.js[4] [4]mio, “ 基礎から学ぶ Vue.js,“ https://www.amazon.co.jp/ 基礎から学ぶ -Vue-js-mio/dp/4863542453, 2018-04-12( 閲覧日 :2018-04-20)
19. Vue FES JAPAN! 2018/4/23 19 図 9 Vue Fes Japan[5] [5]kazupon, “Vue Fes Japan,“ https://vuefes.jp/, 2018-03-23( 閲覧日 :2018-04-20)
20. Simple & EASY 2018/4/23 20 図 10 Simple VS Easy[6] [6]Evan Clark Williams, “Twitter,“ https://twitter.com/youyuxi/status/431669784770392064, 2016-05-24( 閲覧日 :2018-04-20)