狠狠撸

狠狠撸Share a Scribd company logo
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で一緒に学生スタッフ
やってくれる人探してます!一緒にコミュニ
ティ活動やりましょう!

More Related Content

闯补惫补厂肠谤颈辫迟フレームワーク入门に痴耻别.箩蝉はいかが?