イイダリョウのブログ。Vue.jsしてみた!JSJSのフレームワークについて調べるとAngular、React、vue.jsの「三大フレームワーク」というのが出てきます。この3つが三大?これを使うとどんなことが実現できるのか。SPA?MVC?仮想DOM?データバインディング?調べているうちに混乱してきたけど、とにもかくにも3つの中では一番わかりやすそうだったVue.jsを始めてみる。※目次:今をときめく「三大フレームワーク」キーワードが数珠つなぎ。ここに詳しくまとめられています。山ほどあるJSフレームワークの中でなぜにこの3つが三大なのだろうか。ちなみに2014年ころはBackbone.js、Knockout.js、Angular.jsが三大だったようです。Angular以外は入れ替わりましたな。Qiita5年後にはまた違うものが「三大」になっているかもしれない。これらのフレームワークで何が実現できるのか知りたい。どんなものかわかれば今後新しい潮流が起こっても比較ができる。キーワードが数珠つなぎ。三大フレームワークの中でWeb界隈で一番多く目にするのはReactだと思う。「リアクト」と読み「反応する」という意味だ。リアクションなどの元になる言葉。リアクティブプログラミングという言葉もあるようだ。Reactの記事ですぐに目に付くキーワードは「仮想DOM」。魂が震えるほどに素晴らしい概念らしく、jQueryのDOM操作に辟易とする民にとって救世主なんだとか。バーチャルDOMともいう。MS(モビルスーツ)みたいでなんだかカッコいい。(Ajaxとは違うの?)、モジュール化、コンポーネント志向、SSR(サーバサイドレンダリング)、MVC、MVVM、MVW...などなど、調べたいキーワードが数珠繋ぎ。※参考:すぐにこんな状態になった。Mediumこれはもう「百文は一プログラミングに如かず」。実際に書いて体感してみる方が早いと思った。三大フレームワークの書式まず三つの書式をざっと比較してみよう。Angularは「TypeScript」で書き、コンパイルする。Reactは「JSX記法」で書き、コンパイルする。Vue.jsはコンパイルしなくてもすぐに始められることができる!ふむふむ。ちなみにTypeScriptは前に「altJS事始め」で触れましたね。クモのようにコツコツとJSX記法はJSの中にHTMLのテンプレートみたいのを書くようです。Mediaこれが「JSX辛い」「JSXキモい」「悪魔合体」など言われ参入障壁に感じる方もいる模様。Vue.jsの読み込みそれでは一番敷居が低そうなVue.js、いっちょやってみっかー。※参考:Vue.jsまずはVue.jsの本体ファイルを読み込む。src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>codepenの場合は「Setting」>「JavaScript」>「Quick-add」に「Vue」があります。Vue.jsはWordPressっぽい!公式チュートリアルにもあるハローワールドを書いてみます。HTMLをこう書きます。}}という珍しい書式にに囲まれたmessageという文字があります。}}と表示されちゃいます。}}のところも何かを読み込んでくれそうな期待感。ここら辺もVue.jsに「とっつき易さ」を感じさせてくれた部分です。CodePen.でました!JSはこんなです。見慣れた書式で安心感がありますね。変数appにVue()オブジェクトをnewしてインスタンス化します。Vue()はVue.jsの中にあらかじめ定義されたオブジェクトですね。クモのようにコツコツとVue()の中には連想配列が入っており、一つ目のelキーの値は'#app'。これがHTMLのid#appと紐づいているわけですね。