Tweet
Tweet

Slide 1

Slide 1 text

JavaScriptフレームワーク Vue.jsの紹介 @munieru_jp http://munieru.jp

Slide 2

Slide 2 text

自己紹介 @munieru_jp JavaScriptフレームワークVue.jsの紹介 2

Slide 3

Slide 3 text

自己紹介 名前 ムニエル 職種 アプリケーションエンジニア（？） 大学 千葉工業大学 情報ネットワーク学科 趣味 読書/プログラミング/ライティング 言語 HTML/CSS/Sass/JavaScript/C/Java/PHP/GAS 技術 jQuery/Node.js/React/Vue.js @munieru_jp JavaScriptフレームワークVue.jsの紹介 3

Slide 4

Slide 4 text

自己紹介 @munieru_jp JavaScriptフレームワークVue.jsの紹介 4

Slide 5

Slide 5 text

三大 JavaScriptフレームワーク @munieru_jp JavaScriptフレームワークVue.jsの紹介 5

Slide 6

Slide 6 text

三大JavaScriptフレームワーク @munieru_jp JavaScriptフレームワークVue.jsの紹介 6 Angular Vue.js React

Slide 7

Slide 7 text

三大JavaScriptフレームワークの比較 Angular Vue.js React 開発主体 Google Evan You[^1]と コミュニティ Facebook 登場時期 2009年 2014年 2011年 スター数[^2] 36,000+ 93,000+ 95,000+ 標準言語 TypeScript JavaScript JavaScript データ バインディング データ↔HTMLの 双方向 データ↔HTML の双方向 データ→HTMLの 片方向 学習コスト 大 小～中 中 @munieru_jp JavaScriptフレームワークVue.jsの紹介 7 [^1]: 元AngularJS開発メンバー [^2]: 2018/5/11時点

Slide 8

Slide 8 text

The Progressive Framework @munieru_jp JavaScriptフレームワークVue.jsの紹介 8

Slide 9

Slide 9 text

プログレッシブとは “進歩的なさま。革新的なさま。 また、進歩主義者。” @munieru_jp JavaScriptフレームワークVue.jsの紹介 9 出典：小学館

Slide 10

Slide 10 text

宣言的レンダリング The Progressive Framework コンポーネント システム クライアント サイド ルーティング 大規模な 状態管理 ビルドシステム

Slide 11

Slide 11 text

Vue.jsの3つの特徴 • 標準のHTML、CSS、JavaScriptの文法で書ける 親しみやすい • アプリケーションの規模や好みに応じて構成を選べる 融通が効く • ファイルサイズが軽量で、Virtual DOMによる高速レンダリング 高性能 @munieru_jp JavaScriptフレームワークVue.jsの紹介 11

Slide 12

Slide 12 text

Vue.jsを使う方法 @munieru_jp JavaScriptフレームワークVue.jsの紹介 12

Slide 13

Slide 13 text

HTMLのscriptタグでライブラリを読み込む @munieru_jp JavaScriptフレームワークVue.jsの紹介 13 … 1. 2. 3. 4. 5. 10. 11.

Slide 14

Slide 14 text

npmでライブラリをインストール cd my-vue-app npm install vue @munieru_jp JavaScriptフレームワークVue.jsの紹介 14 $ $

Slide 15

Slide 15 text

vue-cliでテンプレートから生成 npm install –g @vue/cli vue create my-vue-app @munieru_jp JavaScriptフレームワークVue.jsの紹介 15 $ $

Slide 16

Slide 16 text

他のフレームワークに組み込まれている @munieru_jp JavaScriptフレームワークVue.jsの紹介 16

Slide 17

Slide 17 text

Hello World @munieru_jp JavaScriptフレームワークVue.jsの紹介 17

Slide 18

Slide 18 text

Hello World HTML

{{ message }}

JavaScript new Vue({ el: '#app', data: { message: 'Hello World' } }) @munieru_jp JavaScriptフレームワークVue.jsの紹介 18 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 1. 2. 3. 4. 5. 6.

Slide 19

Slide 19 text

Hello World @munieru_jp JavaScriptフレームワークVue.jsの紹介 19

Slide 20

Slide 20 text

Single File Components @munieru_jp JavaScriptフレームワークVue.jsの紹介 20

Slide 21

Slide 21 text

Single File Components .vueファイル <style> @munieru_jp JavaScriptフレームワークVue.jsの紹介 21

Slide 22

Slide 22 text

双方向データバインディング @munieru_jp JavaScriptフレームワークVue.jsの紹介 23

Slide 23

Slide 23 text

双方向データバインディング データ HTML @munieru_jp JavaScriptフレームワークVue.jsの紹介 24

Slide 24

Slide 24 text

双方向データバインディングの例 HTML（一部抜粋）
JavaScript new Vue({ el: '#app', data () { return { text: ‘# Hello World' } }, computed: { html () { return marked(this.text) } } }) @munieru_jp JavaScriptフレームワークVue.jsの紹介 25 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.

Slide 25

Slide 25 text

双方向データバインディングの例 @munieru_jp JavaScriptフレームワークVue.jsの紹介 26 https://munierujp.github.io/md2html/

Slide 26

Slide 26 text

双方向データバインディングの例 HTML 入力エリア 出力エリア データ text プロパティ html プロパティ @munieru_jp JavaScriptフレームワークVue.jsの紹介 27 Markdownを HTMLに変換 ユーザーが文字を入力 HTMLを書き換え

Slide 27

Slide 27 text

Vue.jsの周辺ライブラリ vue-router[^1] URLのルーティング vuex[^1] アプリケーションの状態管理 vue-server-renderer[^1] SSR（サーバーサイドレンダリング） vue-meta ページのメタ情報管理 vue-i18n 国際化（多言語化） @munieru_jp JavaScriptフレームワークVue.jsの紹介 28 [^1]: 公式ライブラリ

Slide 28

Slide 28 text

まとめ • JavaScriptフレームワークは Angular、React、Vue.jsの三つ巴状態 • 標準言語の文法に近く、覚えることが少ない • 小さく始められ、徐々にスケールアップ可能 • Single File Componentsという仕組みがある • 双方向データバインディングという仕組みがある • 周辺ライブラリが充実している @munieru_jp JavaScriptフレームワークVue.jsの紹介 29

Slide 29

Slide 29 text

参考文献 • Vue.js https://jp.vuejs.org/ @munieru_jp JavaScriptフレームワークVue.jsの紹介 30