クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた!

JSのフレームワークについて調べるとAngular、React、vue.jsの「三大フレームワーク」というのが出てきます。なぜにこの3つが三大?これを使うとどんなことが実現できるのか。SPA?MVC?仮想DOM?データバインディング?調べているうちに混乱してきたけど、とにもかくにも3つの中では一番わかりやすそうだったVue.jsを始めてみる。

※目次:

※参考:JSのフレームワークとは
【卒jQueryへの道】生JSとライブラリとフレームワークの理解 - クモのようにコツコツと

今をときめく「三大フレームワーク」

JS「三大フレームワーク」Angular、React *1、Vue.js。ここに詳しくまとめられています。

※参考:【JavaScript】3大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口

山ほどあるJSフレームワークの中でなぜにこの3つが三大なのだろうか。

ちなみに2014年ころはBackbone.js、Knockout.js、Angular.jsが三大だったようです。Angular以外は入れ替わりましたな。ん?新・三大?その前は何が三大だったの?

※参考:新・三大JavaScriptフレームワークの実践(Backbone.js Knockout.js Angular.js) - Qiita

5年後にはまた違うものが「三大」になっているかもしれない。まずはこれらのフレームワークで何が実現できるのか知りたい。どんなものかわかれば今後新しい潮流が起こっても比較ができる。

キーワードが数珠つなぎ。。

三大フレームワークの中でWeb界隈で一番多く目にするのはReactだと思う。「リアクト」と読み「反応する」という意味だ。リアクションなどの元になる言葉。リアクティブプログラミングという言葉もあるようだ。

Reactの記事ですぐに目に付くキーワードは「仮想DOM」。魂が震えるほどに素晴らしい概念らしく、jQueryのDOM操作に辟易とする民にとって救世主なんだとか。バーチャルDOMともいう。MS(モビルスーツ)みたいでなんだかカッコいい。

※参考:なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita

仮想DOMについて調べてると他にもSPA(シングルページアプリケーション)、Webアプリ、ネイティブアプリ、データバインディング、差分再構築、非同期処理(Ajaxとは違うの?)、モジュール化、コンポーネント指向、SSR(サーバサイドレンダリング)、MVC、MVVM、MVW…などなど、調べたいキーワードが数珠繋ぎ。。。

※参考:すぐにこんな状態になった。2018年だからなw
2016年にJavaScriptを学ぶとこんな感じ - Medium Japan - Medium

これはもう「百文は一プログラミングに如かず」。まずは実際に書いて体感してみる方が早いと思った。

三大フレームワークの書式

まず三つの書式をざっと比較してみよう。

  • Angularは「TypeScript」で書き、コンパイルする。
  • Reactは「JSX記法」で書き、コンパイルする。
  • Vue.jsはコンパイルしなくてもすぐに始められることができる!

ふむふむ。コンパイルのいらないVue.jsが一番参入障壁は低そうです! ちなみにTypeScriptは前に「altJS事始め」で触れましたね。

※参考:【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め - クモのようにコツコツと

JSX記法はJSの中にHTMLのテンプレートみたいのを書くようです。

//ReactのJSX記法
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('app')
);

※参考:JSXの基本 – React入門 - to-R Media

これが「JSX辛い」「JSXキモい」「悪魔合体」など言われ参入障壁に感じる方もいる模様。。

Vue.jsの読み込み

それでは一番敷居が低そうなVue.js、いっちょやってみっかー。

※参考:Vue.js

まずはVue.jsの本体ファイルを読み込む。CDN、ありまぁす。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

codepenの場合は「Setting」>「JavaScript」>「Quick-add」に「Vue」があります。

Vue.jsはWordPressっぽい!

公式チュートリアルにもあるハローワールドを書いてみます。 まずはHTMLをこう書きます。

<p id="app">{{ message }}</p>

波括弧2つ{{ }}という珍しい書式にに囲まれたmessageという文字があります。
これ、このままなんもJSを書かないと{{ message }}と表示されちゃいます。

ところでこの形って、なんとなくWordPressのテーマファイルなどにあるテンプレートタグを彷彿しませんか?

<p id="app"><?php the_content(); ?></p>

※参考:ざっくりWordPress:PHP書式とテンプレートタグの識別-後編 - クモのようにコツコツと

上記のテンプレートタグのように、{{ message }}のところも何かを読み込んでくれそうな期待感。
ここら辺もVue.jsに「とっつき易さ」を感じさせてくれた部分です。

Vue.jsの基本書式

さあいよいよここにJSを書き加えると{{ message }}が「こんにちは びゅう!」になります。じゃん!

でました!JSはこんなです。

var app = new Vue({
  el: '#app',
  data: {
    message: 'こんにちは びゅう!'
  }
})

どうですか。見慣れた書式で安心感がありますね。
変数appVue()オブジェクトをnewしてインスタンス化します。Vue()はVue.jsの中にあらかじめ定義されたオブジェクトですね。

※参考:インスタンスとは
【JS】newとプロトタイプとクラス - クモのようにコツコツと

Vue()の中には連想配列が入っており、一つ目のelキーの値は'#app'。これがHTMLのid#appと紐づいているわけですね。
二つ目のdateキーの中にはさらに連想配列が入っており、messageキーの値がこんにちは びゅう!
これによって{{ message }}が「こんにちは びゅう!」になったとさ。めでたしめでたし。

最後に

ふ〜、ようやく重い腰を上げてVue.jsデビューできました! とは言え、Hellow WorldはバニラJSやjQueryでもできるわけで、まだ仮想DOMらしさは体感できてないですね。 これから仮想DOMの「肝」の部分に近づいていきたく思います。それではまた!!


※参考:Vue.jsの習得のためにやったことまとめ
qiita.com

*1:厳密にいうとReactはライブラリらしいが