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

スポンサーリンク
プログラミングWEB技術

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

【第0回】完全初心者がフレームワークを習得するまでの道のり【Vue?React?Angular?】
最初にお断りをいれておきますが、既に学習マスターをされている方やWEB関連の仕事をされていない方には全くおもしろくない記事となっておりますので予めご了承ください! 僕は普段WEB関連のお仕事をしています。 今までWEBサ...

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

スポンサーリンク

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フレームワークも存在するらしい。

演習1:フォーム操作

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

基本中の基本ですが、これだけでかなり記法の根本が理解できるのも事実です。
テキストを表示するだけでは面白くないので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>
jQueryに比べ、超絶すっきりした内容になりました。
Vue.jsはフォーム操作に向いており、何よりv-modelプロパティを使用するだけで値を瞬時に同期できるのが魅力的です。

v-for=”data in ary_data”

先ほどのjQueryの$.eachと同様に配列分のoptionタグに対してvalueプロパティとテキスト値を付与するループ処理となっています。

jQueryは逐一script文で記述していましたが、Vue.jsはこのVueディレクティブの力でスクリプトに数式を記述することなくループ処理が行えるので非常に記述が楽といえます!

ループできるのはoptionタグだけでなく、リスト作成に用いる「liタグ」やテーブル作成の「tdタグ」、あるいはテンプレートタグを用いれば複数のタグをひとまとまりでループさせることも可能です。

Vueディレクティブの省略記法

省略記法についてですが、かなり手間が省けます。
とはいえ、プロジェクトや会社によって記法が異なりますので省略記法にするかしないかは統一を図り可読性を上げましょう。

v-bind:〇〇〇 → :〇〇〇
上記のoptionにある「value」と「:valueは別物」で、:valueはVueディレクティブにおけるv-bind:valueの省略記法です。
v-bindは非常に使用頻度が高いのでこのように省略記法として使われるケースが多いので慣れてきたら使ってみましょう。
v-bindとはhtmlタグ内のプロパティに任意の値を同期させるプロパティで、この場合v-forを展開している間にvalueプロパティにその値を格納させる働きを持っています。
v-on:〇〇〇 → @〇〇〇
ボタンなどイベントメソッドを実行するときに使用し、同じく使用頻度が高いv-onを省略させるものです。

引き続きはReactで再現をしてみようなんて考えましたが、、まずはVue.jsを覚えてからやろうと思います!

まとめ

今回ご紹介させて頂いたのはVue.jsの基本の「き」でした!
現在udemyにてVue.jsの基本を学んでおりますので、また随時共有させていただきます。

次回は算出プロパティについて記載させていただきます。

【第0回】完全初心者がフレームワークを習得するまでの道のり【Vue?React?Angular?】
最初にお断りをいれておきますが、既に学習マスターをされている方やWEB関連の仕事をされていない方には全くおもしろくない記事となっておりますので予めご了承ください! 僕は普段WEB関連のお仕事をしています。 今までWEBサ...
WEB技術
スポンサーリンク
Nagiをフォローする
スポンサーリンク
Nagi Rhythm
タイトルとURLをコピーしました