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: 'こんにちは びゅう!' } })
どうですか。見慣れた書式で安心感がありますね。
変数app
にVue()
オブジェクトを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はライブラリらしいが