【第1回】Vue/React/Angularのまとめとvue.jsでの簡単実装【3大フレームワーク】

巷で話題になっているJavascript3大フレームワーク。
各どんな意図で開発されたかを知っておくと学習しやすいみたいなのでまとめてみます。

【第0回】完全初心者がフレームワークを習得するまでの道のり【Vue?React?Angular?】

ひとまず、各3大フレームワークには共通部分があります。
それはいずれも素早くデータの同期をとりたいために実現させている技術であることです。

Contents

Vue.js（今勉強中）
React.js（挫折した）
1. Reactの特徴を一言で言うなら
Angular（挫折した）
演習１：フォーム操作
1. Vue.jsで再現してみる
  1. dataプロパティ
  2. マスタッシュ構文
演習2：プルダウンメニューの制御
まとめ

Vue.js（今勉強中）

元々、Googleが開発したAngularJSの開発者の一人が個人で開発を始めたJSフレームワークです。
なのでAngularと似たところもあったりなかったり！

Vue.jsを一言でいうと、

html内のコンポーネント（部品）に対して、Vueディレクティブという魔法をかける

ディレクティブとは？

Vue.jsで定義される「v-〇〇〇」というコマンドのものですね。
例えばv-modelやv-bindとかがあります。

データのインプットとアウトプットをリアルタイムで行うことができたりする同期操作のことです。

3大フレームワークの各呼び方

Vue.jsのバインドを
Reactではリアクティブと呼び、
AngularJSでは双方向バインディングなどと呼ばれています。

そしてAngularJSではhtml側で「ng」というプロパティやメソッドを用いてバックエンドの処理をしています。

分かりやすい反面、開発が進むとカオスになりやすいことが多いので、Angularというパッケージ単位のフレームワークを作ったみたいです。

Vueディレクティブ

しかし、AngularJSの双方向バインディングとシンプルさを捨てるのがもったいないと考えられ、
飛躍的に発展させたのがVue.jsです。

「Vueディレクティブ」というもので、これはソースが汚れる原因となったhtml側でのバックエンド処理をスクリプト側で処理をさせるようにしました。

スクリプト側でコンポーネントを作成して管理することで、よりシンプルになったということですね。

AngularJS：双方向バインディング処理をhtml側で処理できたために、開発が進んでいくうちにカオスになることがあった。

Vue.js：バインド（双方向バインディングと同定義）処理をスクリプト側に記載し、html側はメソッドとプロパティだけ入出力させるようにしているので、「Javascriptの基本に返った」といってもいいでしょう。

Vue.jsは現在絶賛勉強中ですのでjQueryと比較を用いていくつか簡単な実装をしてみます！

React.js（挫折した）

ReactはFacebookが開発したコンポーネント型のJavascriptフレームワークです。
Reactは「JSX」と呼ばれた独特の記法があります。

JSX：スクリプトの中に直接htmlタグを記述し、「デザイン部分とプログラム部分の完全な切り分け」を図るために作られたものです。

その独特のJSXと呼ばれる記法に、、僕はアレルギーが出て挫折しました・・・！

しかし何度も記法が変更されており、最近ではかなり可読性の向上と記述のしやすさが向上しているそうです。

Reactの特徴を一言で言うなら

部品の管理を徹底するために、リアクティブな処理をhtml側で一切できないようにしています。
部品の調達と管理はすべてJSXに則ったコンポーネント内で行う仕組みになっています。

Vue.jsと比較してみると、

Vue.js：リアクティブな部品（Vueディレクティブ）自体はhtml内に存在。

React：リアクティブな部品はhtml内にはなく、バックエンド上のコンポーネントで作成される。
また、リアクティブな処理を行う際もそのバックエンド内だけで処理するので、
非常に動きが高速でかつ部品もバックエンドにしか存在しないことで、開発を分担しやすく中規模の開発に向いている。

コンポーネントの記法もいろいろあって、しかも度重なる変更がされているので、それが却って敬遠させている気もしますが、基本となる部分（デザイン部分とプログラム部分の乖離）は全くぶれていません。

Angular（挫折した）

AngularはAngularJSでの失敗を教訓に、その失敗の原因となったソースの汚れを解消させたものです。

そしてvue.js、Reactと違い、RubyのRailsやPHPのLaravel、PythonのDjangoのような、それ一つでパッケージとなっているフルスタックフレームワークとなっており、TypeScriptがベースです。

Augular:バインディング処理を行う部品はhtml上にあるが、処理は外部のアーキテクチャ内で行う。

フルスタックフレームワークとなっているので個人的に難易度ベリーハードでした。

本当に自由自在。その反面管理が大変だし学習コストも非常に高め。勉強しながら泣きそうになります。

割と容量もあるので大規模開発向きです。
※これを改善すべく、省力化・小規模化したjsフレームワークも存在するらしい。

演習１：フォーム操作

テキスト文字を表示させてみます。

基本中の基本ですが、これだけでかなり記法の根本が理解できるのも事実です。
テキストを表示するだけでは面白くないのでjQueryでフォームに対し、キーの打鍵ごとに値を表示させるようにしてみます。

<body>
    <input type="text" id="f_inp">
    <p>入力された文字<span id="mes"></span></p>
    <script>
    $(function(){ 
        $('#f_inp').on("keyup",function(){
            let mes = $(this).val(); //値を取得する $("#mes").text(mes); //打ち込んだ値を反映させる
        })
    }) 
    </script>
</body>

これで打ち込んだ文字をそのまま#mesに表示させることができます。

Vue.jsで再現してみる

<scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
    <div id="app">
        <input type="text" v-model="mes">
        <p>入力された文字<span>{{ mes }}</span></p>
    </div>
<!-- 制御部分はコンテンツの後 -->
<script>
 new Vue({
        el: '#app',
        data:{
            mes: '',
        },
 });
</script>
</body>

「el」というプロパティと「v-model」と呼ばれるVueディレクティブがあり、これこそがVue.jsの根幹となる「バインド技術」となります。

適用される部品は「任意のIDで囲んだ単一の親要素のみ」となります。これを「エレメント」と呼び、el（Elementの略）プロパティで指定した範囲のみ、ディレクティブを適用できます。

dataプロパティ

dataプロパティはVueディレクティブで作業するための変数据え置きで、これを定義しておかないと「〇〇〇 is not defined」と処理中に未定義のエラーが起きてしまいます！

今回は「mes」という変数を使用しているので、mesを定義しておいてから初期値を空っぽにしておきます。

マスタッシュ構文

マスタッシュとは英語で「口髭」と呼ばれることから{{}}という記号で呼ばれています。口髭に見える・・・か・・・？

Vue.jsではVueディレクティブの外側であるv-modelやv-bindなどのプロパティに値を適用する場合は{{変数名}}とすることで、その値を受け取ることができます。

ここでは{{mes}}はVueディレクティブの外側なのでマスタッシュ構文で記述しています。

Elementの外側ではないので注意です。エレメントの外側にマスタッシュ構文を記述してもそこはvue.jsの適用外なのでただの文字列として認識されてしまいます！

演習2：プルダウンメニューの制御

繰り返し処理の実例として、「プルダウンメニューの生成」と「イベント処理」をそれぞれ記述していきます。

共通の動作として、プルダウンメニューを「オブジェクトから生成」し、選択した値を表示させるという動きをjQueryとVue.jsを比較しながら再現していきます。

jQuery

while文やfor文などループ式の記述方法はいろいろありますが、今回は$.eachメソッドを用いて実装します。
jQueryはあくまでJavascriptライブラリなのでECMA6でも普通に記述できます！

<script>
    $(function(){
        //配列の値
        let ary_data = [
            {key:0,name: "cakePHP"},
            {key:1,name: "Laravel"},
            {key:2,name: "CodeIgniter"},
            {key:3,name: "Symfony"},
            {key:4,name: "Zend Framework"},
            {key:5,name: "Yii"},
        ];
        let sel = $("#sel");
        //プルダウンメニューの生成
        $.each(ary_data,function(key,data){
            opt = $('<option>').val(item.key).text(item.name);
            sel.append(opt);
        })
        sel.appendTo("#f_sel");

        //プルダウンの操作
        $("#sel").on("change",function(){
            let selkey = $(this).val();
            $("#txt").text(ary_data[selkey].name);
        })
    })
</script>
</head>
<body>
    <div id="f_sel">
        <select id="sel">
            <option value="">選択</option>
        </select>
    </div>
    <p>選択された値:<span id="txt"></span></p>
</body>

「ary_data」という配列を「item」という変数に格納しながら順番に展開させていきます。
そして、「item.key」をvalueプロパティにitem.nameをoptionタグのテキスト値に代入している工程になります。

これをVue.jsで実現してみる

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
    <div id="app">
        <select v-model="sel">
            <option value="">選択</option>
            <option v-for="data in ary_data" :value="data.name" >{{ data.name }}</option>
        </select>
        <p>選択された値:<span id="txt" >{{ sel }}</span></p>
    </div>
<script>
new Vue({
    el: "#app",
    data:{
        sel: "",
        ary_data :[
            {name: "cakePHP"},
            {name: "Laravel"},
            {name: "CodeIgniter"},
            {name: "Symfony"},
            {name: "Zend Framework"},
            {name: "Yii"},
        ]
    }
})
</script>