グランフロントエンド2016のLTスライドです

1. JavaScriptフレームワーク入門に
Vue.jsはいかが？
山崎好洋@44x1carbon
グランフロントエンド2016

2. 自己紹介
 山崎好洋
 専門学生
 Vue.js,Laravel
 ITCreate部 部長
44@44x1carbon

3. ITCreate部とは
 つくりたいものを、作りたいときに、造り
たいだけ、創る
 学内勉強会
 KOFブース出展
 0泊3日の合宿

4. システム開発演習
 クラス内で５〜８人のチームを作りシステ
ムを開発する
 フロントエンド：Vue.js サーバサイ
ド:Laravel

5. なぜフレームワークを使うの
か？
 セキュリティ面をあまり気にしなくてもい
い
 プラグインで楽ができる
 開発経験が浅いため綺麗なコードが書けな
い
 フレームワークの規約に則ることで、共通
のコード規約で開発ができる

6. JavaScriptフレームワーク
 Backbone.js
 Ember.js
 Knockout.js
 AngularJS
 React.js
 Ractive.js
 vue.js
 Aurelia.js

7. なぜVue.jsなのか？
 公式ドキュメントが日本語対応している
 シンプルで学習コストが低い

8. Vue.jsとは？
 MVVMフレームワーク
 双方向データバインディング

9. 双方向データバインディング
 データの変更があればUIの表示を更新し、
UIの変更があればデータの更新を自動的に
行う機能

11. 双方向データバインディング
<span>Message is: {{ message }}</span>
<br>
<input type="text" v-model="message" placeholder="edit me">
HTML
var app = new Vue({
el: '#app',
data: { message }
});
JS

13. リストレンダリング
Vue.js
<ul id="example-1">
<li v-for="event in events">
<a v-bind:href="event.url">{{ event.title }}</a>
</li>
</ul>
HTML

14. まとめ
 JavaScriptフレームワークを使ってみたい
けど難しそうと思ってる方は是非Vue.jsを
 Vue.jsでJavaScriptフレームワークになれ
て、他のフレームワークを触るという使い
方もできるかも

15. 最後に
 関西フロントエンドUGで一緒に学生スタッフ
やってくれる人探してます！一緒にコミュニ
ティ活動やりましょう！