Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScriptフレームワークVue.jsの紹介 / 2018-05-11

8633a8f6f8918729865ae3dfd0d7919f?s=47 Munieru
May 11, 2018

JavaScriptフレームワークVue.jsの紹介 / 2018-05-11

## 1
『JavaScriptフレームワークVue.jsの紹介』というテーマで発表いたします。
よろしくお願いします。

## 2
始めに、軽く自己紹介をさせてください。

## 3
改めまして、ムニエルと申します。
都内IT企業でエンジニアをやっています。
職種は明確に定められたものがないので、勝手にアプリケーションエンジニアを名乗っています。

大学は、千葉工業大学 情報ネットワーク学科出身です。

趣味は結構移り変わりが激しいのですが、現在は読書、プログラミング、ライティングに落ち着いています。
ライティングというのは光を当てることではなく、文章を書くことです。

中学生の頃にウェブサイトを作り始め、大学でC、Java、PHPといったプログラミング言語を学びました。
普段の業務では主にサーバーサイドでJavaを扱っていますが、プライベートではJavaScriptを書くことが多いです。

JavaScriptまわりの技術では、jQuery、Node.js、React、そしてVue.jsなどを使ったことがあります。
最近は、Chromeの拡張機能を開発したり、ウェブサイトをつくったりしています。

## 4
これは宣伝になるのですが、ネット上ではムニエルという名前で活動しており、ブログやQiitaに記事を投稿しています。
ゆくゆくはブログで食っていこうと考えています。

## 5
三大JavaScriptフレームワークについて。

## 6
昨今のフロントエンド開発には、JavaScriptフレームワークの存在が欠かせません。
今までに数々のフレームワークが生まれてきましたが、現在は、Angular、React、そしてVue.jsの三つ巴状態です。

せっかくなので皆さんにお聞きしたいのですが、この中でAngularを使ったことがあるという方は?
【反応に応じて一言】

Reactを使ったことがあるという方は?
【反応に応じて一言】

Vue.jsを使ったことがあるという方は?
【反応に応じて一言】

## 7
こらら3つのフレームワークを簡単に比較してみましょう。
開発主体についてですが、AngularがGoogle、ReactがFacebookと、いずれも名だたる企業が主体となって開発しています。
それに対し、Vue.jsはEvan You氏とコミュニティが主体となっています。
Evan氏は元AngularJS開発メンバーの一人で、Vue.jsもAngularJSの影響を受けています。
Vue.jsは当初、Evan氏の個人プロジェクトとして始まりましたが、現在はEvan氏を含む20名近くのコアチームによる開発体制となっています。

フレームワークの登場時期はAngularが最も早く、次にReact、Vue.jsという順になっています。
Vue.jsは後発なこともあり、他のフレームワークの反省を活かして改善されているところがあります。

人気度を測るバロメーターとして、GitHubのスター数を見てみましょう。
Angularはメジャーバージョンアップ時にリポジトリが分かれたせいで少なくなっていますが、少なくともVue.jsはReactに匹敵する人気があることが分かります。
とはいえ、スターの増加率で見るとVueは2016年、2017年の2年連続で1位となっており、今後逆転する可能性もあるかもしれません。

アプリケーションを書くのに用いる標準言語は、Vue.jsとReactがJavaScriptで、AngularがTypeScriptとなっています。
もっとも、Vue.jsやReactでTypeScriptを使うこともできます。

これは後ほど説明しますが、データバインディングについては、AngularとVue.jsがデータとHTMLの双方向なのに対し、ReactはデータからHTMLの片方向となっています。
そのためReactで双方向データバインディングを実現するには、自分でイベントをリッスンする必要があります。

フレームワークを学ぶための学習コストは、一般的にAngular、React、Vue.jsの順に大きいと言われています。
僕はAngularは使ったことがありませんが、少なくともReactよりはVusのほうが学習コストが低いと感じました。

## 8
Vue.jsは、自身を「プログレッシブフレームワーク」と名乗っています。
これはいったいどういうことでしょうか。

## 9
プログレッシブというのは、「進歩的」だとか「革新的」だとかいう意味です。

## 10
Vue.jsでは、アプリケーションの規模に応じて構成を柔軟に変えることができます。
中核となるのは、宣言的レンダリングです。
必要に応じて、コンポーネントシステム、クライアントサイドルーティング、大規模な状態管理、ビルドシステムといった機能を追加したり、あるいは取り除いたりすることができます。
このように段階的に進歩していけるのが、Vue.jsがプログレッシブフレームワークたるゆえんです。

## 11
Vue.jsの公式サイトに、3つの特徴が挙げられています。

* 親しみやすい
標準のHTML、CSS、JavaScriptの文法で書けるので、覚えることが少なくて済みます。

* 融通が効く
アプリケーションの規模や好みに応じて構成を選べるので、最初は小さく始めて徐々にスケールアップすることも可能です。

* 高性能
ファイルサイズが軽量で、Virtual DOMによる高速レンダリングが可能です。

## 12
Vue.jsを使う方法は、いくつかあります。

## 13
最も手軽なのは、HTMLのscriptタグででライブラリを読み込むことです。
ライブラリはCDNで配信されているものを使用してもいいですし、ダウンロードしてプロジェクトに組み込んでも構いません。
これは、jQueryなど過去のフレームワークと同じですね。

## 14
Nodeプロジェクトにnpmでライブラリをインストールして使うこともできます。
Vue.jsの関連ライブラリを使いたい場合も、npmでインストールすることができます。

## 15
Vue.jsには、vue-cliというコマンドラインツールが用意されており、テンプレートからプロジェクトを生成することもできます。
vue-cliでは、いくつかの質問に答えることで、回答に即した構成のプロジェクトを自動的に生成できます。

## 16
Vue.jsが他のフレームワークにあらかじめ組み込まれていることもあります。
左から、Nuxt.js、Onsen UI、Weex、Laravelです。
この中で、Onsen UIとLaravelは、Vue.jsのスポンサーでもあります。

## 17
初歩的な例として、Hello Worldという文字列を出力するアプリケーションをお見せしましょう。

## 18
これは、実際のソースコードです。
これが全てです。

まずは、左側のHTMLから見ていきましょう。
3行目のscriptタグで、CDN上のvueライブラリを読み込んでいます。
6~8行目で、appというidを持つdiv要素を定義しています。
9行目で、スクリプトファイルを読み込んでいます。
ここでファイルを分割しているのはスペースの都合なので、インラインで書いても構いません。

次に、右側のJavaScriptに移ります。
Vue.jsの基本は、new演算子でVueインスタンスを生成することです。
その際、コンストラクタの引数で状態や振る舞いを定義することができます。
2行目のelプロパティで、指定した要素とVueインスタンスを紐づけます。
ここでは、先程のdiv要素のidを指定しています。
3行目のdataプロパティで、そのVueインスタンスが保持する状態を定義します。
ここでは、messageというプロパティを定義しています。

さて、HTMLに戻りましょう。
7行目のpタグの中に、二重波括弧に囲まれたmessageという文字列があります。
このように書くことで、ブラウザで表示したときにmessageプロパティの値が展開されます。

## 19
先程のファイルをブラウザで開くと、このようになります。
二重波括弧で囲んだmessageの中身が展開されていることが分かると思います。

## 20
Vue.jsには、Single File Componentsという仕組みがあります。

## 21
Single File Componentsでは、一つのvueファイルの中に、テンプレート、スクリプト、スタイルの3つのブロックをまとめて記述します。
また、各ブロックを別ファイルに切り出してsrc属性で読み込むことも可能です。
つまり、ほとんど通常のHTMLファイルと変わりません。

各ブロックの標準言語はHTML、JavaScript、CSSですが、好みに応じて他の言語を使用することもできます。
たとえば、テンプレートをPug、スクリプトをTypeScript、スタイルをSASSで書くみたいなことです。

Single File Componentsという仕組みによって、コンポーネント内にロジックやスタイルを閉じ込めて、再利用性を高めることができます。
Vue.jsでは、複数のコンポーネントを組み合わせることでページを構成していきます。

## 22
最初のほうにもお話ししましたが、Vue.jsには双方向データバインディングという仕組みがあります。

## 23
ユーザーの入力によってHTMLが変化したら、データも変化します。
逆に、時間経過や外部リソースの取得などによってデータが変化したら、HTMLも変化します。
すなわち、データとHTMLが互いに同期し合う仕組みです。
素のJavaScriptでこれを実現するには、特定の要素に対するイベントをリッスンしてデータを更新する処理を、自分で書く必要があります。
Vue.jsでは、これを少ない記述で実現することができます。

## 24
こちらは、入力したMarkdownテキストをHTMLに変換するアプリケーションの例です。

まずは、左側のHTMLから見ていきましょう。
3~5行目にあるのが、入力エリアです。
5行目のv-model属性で、textというプロパティを指定しています。
6~8行目にあるのが、出力エリアです。
8行目のv-html属性で、htmlというプロパティを指定しています。

次に、右側のJavaScriptに移ります。
5行目のtextプロパティで、入力エリアの初期値を定義しています。
8行目のcomputedプロパティは、dataプロパティの値を加工する際に使用するものです。
ここでは、textプロパティの値をHTMLに変換し、htmlプロパティで使用できるようにしています。

## 25
先程のファイルを開くと、このようになります。
ここで、デモをお見せしたいと思います。
【デモ】
こちらは右下のURLで公開しているので、誰でも試すことができます。

## 26
先程のアプリケーションのデータの流れを説明します。
左側がHTML領域、右側がデータ領域です。

入力エリアでユーザーが文字を入力すると、データのtextプロパティが更新されます。
textプロパティが更新されたので、htmlプロパティが更新されます。
このとき、MarkdownをHTMLに変換する処理を行ないます。
htmlプロパティが更新されたので、出力エリアのHTMLが更新されます。

Vue.jsを使うと、あれだけのソースコードから、このようなものを簡単につくることができるのです。

## 27
今回は紹介しませんでしたが、Vue.jsは周辺ライブラリも充実しており、主要なものは公式に提供されています。
実際に中規模から大規模なアプリケーションを構築する場合、これらのライブラリを組み合わせていくことになります。
周辺ライブラリが充実しているのも、Vue.jsの魅力の一つです。

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

## 29
* [Vue.js](https://jp.vuejs.org/)

8633a8f6f8918729865ae3dfd0d7919f?s=128

Munieru

May 11, 2018
Tweet

More Decks by Munieru

Other Decks in Technology

Transcript

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

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

  3. 自己紹介 名前 ムニエル 職種 アプリケーションエンジニア(?) 大学 千葉工業大学 情報ネットワーク学科 趣味 読書/プログラミング/ライティング

    言語 HTML/CSS/Sass/JavaScript/C/Java/PHP/GAS 技術 jQuery/Node.js/React/Vue.js @munieru_jp JavaScriptフレームワークVue.jsの紹介 3
  4. 自己紹介 @munieru_jp JavaScriptフレームワークVue.jsの紹介 4

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

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

  7. 三大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時点
  8. The Progressive Framework @munieru_jp JavaScriptフレームワークVue.jsの紹介 8

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

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

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

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

  13. HTMLのscriptタグでライブラリを読み込む @munieru_jp JavaScriptフレームワークVue.jsの紹介 13 <html> <head> <script src="vue.js"></script> </head> <body>…

    </body> </html> 1. 2. 3. 4. 5. 10. 11.
  14. npmでライブラリをインストール cd my-vue-app npm install vue @munieru_jp JavaScriptフレームワークVue.jsの紹介 14 $

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

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

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

  18. Hello World HTML <html> <head> <script src="https://unpkg.com/vue"></script> </head> <body> <div

    id="app"> <p>{{ message }}</p> </div> <script src="script.js"></script> </body> </html> 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.
  19. Hello World @munieru_jp JavaScriptフレームワークVue.jsの紹介 19

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

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

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

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

  24. 双方向データバインディングの例 HTML(一部抜粋) <div id=“app”> <main id=“main”> <textarea id="input" v-model="text"></textarea> <div

    id="output" v-html="html"></div> </main> </div> 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.
  25. 双方向データバインディングの例 @munieru_jp JavaScriptフレームワークVue.jsの紹介 26 https://munierujp.github.io/md2html/

  26. 双方向データバインディングの例 HTML 入力エリア 出力エリア データ text プロパティ html プロパティ @munieru_jp

    JavaScriptフレームワークVue.jsの紹介 27 Markdownを HTMLに変換 ユーザーが文字を入力 HTMLを書き換え
  27. Vue.jsの周辺ライブラリ vue-router[^1] URLのルーティング vuex[^1] アプリケーションの状態管理 vue-server-renderer[^1] SSR(サーバーサイドレンダリング) vue-meta ページのメタ情報管理 vue-i18n

    国際化(多言語化) @munieru_jp JavaScriptフレームワークVue.jsの紹介 28 [^1]: 公式ライブラリ
  28. まとめ • JavaScriptフレームワークは Angular、React、Vue.jsの三つ巴状態 • 標準言語の文法に近く、覚えることが少ない • 小さく始められ、徐々にスケールアップ可能 • Single

    File Componentsという仕組みがある • 双方向データバインディングという仕組みがある • 周辺ライブラリが充実している @munieru_jp JavaScriptフレームワークVue.jsの紹介 29
  29. 参考文献 • Vue.js https://jp.vuejs.org/ @munieru_jp JavaScriptフレームワークVue.jsの紹介 30