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/)