こんにちは！「Vue:ゼロから始めるWebアプリ開発」を連載していきますTakahiRoyteです。本連載では2016年10月にバージョン2が登場した新進気鋭のJavaScriptフレームワークVue.jsを採用した初心者向けのWebアプリ開発を解説していきます。第一回は導入ということでJSの歴史とVue.jsとはなんぞや、という部分について説明させていただきます。歴史に興味ない方は「なぜVue.jsなのか」まで読み飛ばしてください。
JavaScriptの歴史
誕生からECMAScriptまで
JSは元々今はなきNetscapeへの実装から始まります(1995)。翌年にはライバルのInternet Explorer3.0に実装され(1996)、双方がライバルに勝とうと独自実装を突き進みました。結果、一方のブラウザで動くコードがもう一方で動かないことが当たり前の混沌とした世界へ。そんな世界に秩序をもたらすべくECMAScriptというJSの標準が策定されました(1997)。ここからJSの進撃が始まりま……せん。
JavaScript暗黒時代
ECMAScriptの策定から互換性が改善されたJSですが、2000年台半ばまでまともに使われません。実装されても余計なアニメーション（マウスカーソルを追いかけてくるアレ等）が多かったり、Flash(1996)の流行により影に追いやられます。また、いわゆるブラクラやJSの脆弱性をついたウィルスの登場から「ブラウザのJSはオフが推奨」なんて時代を迎えます。
Google Mapの登場、Ajax時代
「JavaScriptなんてダッセーよな」なんて言葉が聞こえてくる中、2005年に革命的Webアプリが登場しました。Googleマップです。Googleマップが先駆けて利用したAjaxによる非同期通信で、Webアプリの世界は可能性を広げここから急加速します。GMailやGoogle CalendarもAjaxを利用したアプリです。またブラウザChromeに高速なJSエンジンV8が搭載されJSはもはや遅いものではなくなります(2008)。Googleすごい。
JS黄金時代
JSライブラリの時代到来です。jQuery (2006)などのライブラリや、AngularJS (2009)やReact (2013)など大規模開発に利用できるようなフレームワークが登場します。Node.js (2009)の登場でJSはWebだけでなくサーバーにも適用範囲が広がり、JSは最盛期を迎えます。そんな中でVue.jsは2015年に誕生しました。
なぜVue.jsなのか
JS黄金時代はJS混沌時代？
JS黄金時代とありますが、実は混沌の時代でもあります。下記のxkcdというサイトに掲載されたコミックを見てください。
訳：
技術標準が増殖する理由
1. 状況: 14の競合する技術標準が存在
2. 14?!馬鹿げてる!!俺らが皆を満足させる世界標準を作ってやる!!(そうだ!!)
3. 状況: 15の競合する技術標準が存在
そうです。JSにはフロントエンドのフレームワークが乱立しており、それぞれが長所を主張しあいながら競合を続けています。下記は有名どころ(Github Star > 5000)のリストです。
- React
- AngularJS
- Angular2
- Ember
- Backbone
- Aurelia
- Meteor/Blaze
- Knockout
- jQuery
- Polymer
- Mithril
- Riot
- Marionette
- Cycle
- Vue.js
冗談抜きに15あります。この中から選べとか言われても初心者は途方にくれるでしょう。でも大丈夫。今回テーマにするVue.jsは自信を持ってオススメできます。
理由その1：基本に忠実で簡単
JSのライブラリの中には結構「俺のやり方に従え！」的なものが多いです。Google謹製のAngularJSも”Angular Way”なんて言われたり、Githubで一番人気のReactはJSコードの中にHTMLやCSSを書く必要があったり。それぞれの実装があります。その為学習コストが高いものが多く、JSへの理解＋ライブラリへの理解が求められ、初心者には荷が重いです。
Vue.jsは違います。
- いつものHTML
- いつものCSS
- いつものJS
これでOKです。サンプルを見てみましょう。以下のデモをクリックしてみてください。
JS
1 2 3 4 5 6 7 | var app = new Vue({ el: '#app', data: { message: 'Hello ', name: 'John' }}) |
このデモだけである程度Vue.jsのすごさが伝わるかと思います。JS側の変数messageには'Hello 'が、変数nameには'John'が設定されておりHTML内の{{}}タグに紐付いて表示されます。nameに至っては“タグと紐付いていて、リアルタイムで変更が反映されます。モデル(JSのデータ)とビュー(HTML)の関係もこれなら簡単そうでしょ？
理由その2：最先端で軽くて速い
Vue.jsは2016年10月にバージョン2公開されました。2から最近話題の仮想DOMを導入しています。同じく仮想DOMを採用しているReactやRiotとくらべても速いです。
ファイルサイズも23キロバイト(min+gzip)と下記のフレームワークとくらべて小さい！これはモバイル環境において強みです。
| Name | Size |
|---|---|
| Angular2 + Rx | 143K |
| Ember 2.2.0 | 111K |
| Angular 1.4.5 | 51K |
| React 15.3.0 + React DOM | 43K |
| Vue 2.0.3 | 23K |
理由その3：エンジニアに人気
The State of JavaScript 2016というサイトがあります。9000人を超えるエンジニアが回答したJavaScriptについてのアンケートサイトで、Vue.jsは以下の評価を受けました。
- 満足度(また利用したい)ランキング2位
- 利用したことはないが学習したいランキング2位
- 2015年の登場と遅めながら利用者数は第5位
つまり、使われていて、使いやすくて、期待されているフレームワークなんです。
理由その4：公式サイトが日本語化されている
意外かもしれませんがFacebookのReactやGoogleのAngularはドキュメントが日本語化されていません。技術的な初心者にとってハードルが高いかと思います。
Vue.jsの公式サイトは有志により日本語化されています。ドキュメントだけでなくブログさえも訳してくれているので、Vue.js作者の思いすらも伝わります。
ちなみにVue.jsの作者はEvan Youさんという中国の方で、Googleで働いていたこともあるエンジニアです。今はコミュニティファンドでVue.jsの開発にフルタイムで臨んでいます。Youさんの働き方は新しいアプローチを取っていて面白いので、機会があれば書いてみたいです。
次回は早速コーディング！
長くなってしまいましたが、JSの歴史とVue.jsを選んだ理由について説明しました。次回は早速Vue.jsを使ったコーディングに入っていきます！Webアプリ開発に興味がある方は是非読んでみてくださいね。
Future Hearts