Vue:ゼロから始めるWebアプリ開発 第1回 JSの歴史とVue.jsを選んだ理由

こんにちは!「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はオフが推奨」なんて時代を迎えます。

Uncyclopediaよりブラクラ画像

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というサイトに掲載されたコミックを見てください。

xkcd CC BY-NCライセンス


技術標準が増殖する理由
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です。サンプルを見てみましょう。以下のデモをクリックしてみてください。

CODEPENデモ 1-1

JS

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アプリ開発に興味がある方は是非読んでみてくださいね。

TakahiRoyte について

フルスタックエンジニアになりたい一心のSE。今はJavaScriptにハマってます。