JavaScriptフレームワーク入門に
Vue.jsはいかが?
山崎好洋@44x1carbon
グランフロントエンド2016
自己紹介
 山崎好洋
 専門学生
 Vue.js,Laravel
 ITCreate部 部長
44@44x1carbon
ITCreate部とは
 つくりたいものを、作りたいときに、造り
たいだけ、創る
 学内勉強会
 KOFブース出展
 0泊3日の合宿
システム開発演習
 クラス内で5〜8人のチームを作りシステ
ムを開発する
 フロントエンド:Vue.js サーバサイ
ド:Laravel
なぜフレームワークを使うの
か?
 セキュリティ面をあまり気にしなくてもい
い
 プラグインで楽ができる
 開発経験が浅いため綺麗なコードが書けな
い
 フレームワークの規約に則ることで、共通
のコード規約で開発ができる
JavaScriptフレームワーク
 Backbone.js
 Ember.js
 Knockout.js
 AngularJS
 React.js
 Ractive.js
 vue.js
 Aurelia.js
なぜVue.jsなのか?
 公式ドキュメントが日本語対応している
 シンプルで学習コストが低い
Vue.jsとは?
 MVVMフレームワーク
 双方向データバインディング
双方向データバインディング
 データの変更があればUIの表示を更新し、
UIの変更があればデータの更新を自動的に
行う機能
双方向データバインディング
<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
リストレンダリング
Vue.js
<ul id="example-1">
<li v-for="event in events">
<a v-bind:href="event.url">{{ event.title }}</a>
</li>
</ul>
HTML
まとめ
 JavaScriptフレームワークを使ってみたい
けど難しそうと思ってる方は是非Vue.jsを
 Vue.jsでJavaScriptフレームワークになれ
て、他のフレームワークを触るという使い
方もできるかも
最後に
 関西フロントエンドUGで一緒に学生スタッフ
やってくれる人探してます!一緒にコミュニ
ティ活動やりましょう!

JavaScriptフレームワーク入門にVue.jsはいかが?