巷で話題になっているJavascript3大フレームワーク。
各どんな意図で開発されたかを知っておくと学習しやすいみたいなのでまとめてみます。
ひとまず、各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側でのバックエンド処理をスクリプト側で処理をさせるようにしました。
スクリプト側でコンポーネントを作成して管理することで、よりシンプルになったということですね。
React.js(挫折した)
ReactはFacebookが開発したコンポーネント型のJavascriptフレームワークです。
Reactは「JSX」と呼ばれた独特の記法があります。
その独特のJSXと呼ばれる記法に、、僕はアレルギーが出て挫折しました・・・!
しかし何度も記法が変更されており、最近ではかなり可読性の向上と記述のしやすさが向上しているそうです。
Reactの特徴を一言で言うなら
部品の管理を徹底するために、リアクティブな処理をhtml側で一切できないようにしています。
部品の調達と管理はすべてJSXに則ったコンポーネント内で行う仕組みになっています。
Vue.jsと比較してみると、
Angular(挫折した)
AngularはAngularJSでの失敗を教訓に、その失敗の原因となったソースの汚れを解消させたものです。
そしてvue.js、Reactと違い、RubyのRailsやPHPのLaravel、PythonのDjangoのような、それ一つでパッケージとなっているフルスタックフレームワークとなっており、TypeScriptがベースです。
※これを改善すべく、省力化・小規模化した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の根幹となる「バインド技術」となります。
dataプロパティ
dataプロパティはVueディレクティブで作業するための変数据え置きで、これを定義しておかないと「〇〇〇 is not defined」と処理中に未定義のエラーが起きてしまいます!
今回は「mes」という変数を使用しているので、mesを定義しておいてから初期値を空っぽにしておきます。
マスタッシュ構文
マスタッシュとは英語で「口髭」と呼ばれることから{{}}という記号で呼ばれています。口髭に見える・・・か・・・?
Vue.jsではVueディレクティブの外側であるv-modelやv-bindなどのプロパティに値を適用する場合は{{変数名}}とすることで、その値を受け取ることができます。
ここでは{{mes}}はVueディレクティブの外側なのでマスタッシュ構文で記述しています。
演習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>
そして、「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>
v-for=”data in ary_data”
先ほどのjQueryの$.eachと同様に配列分のoptionタグに対してvalueプロパティとテキスト値を付与するループ処理となっています。
jQueryは逐一script文で記述していましたが、Vue.jsはこのVueディレクティブの力でスクリプトに数式を記述することなくループ処理が行えるので非常に記述が楽といえます!
Vueディレクティブの省略記法
省略記法についてですが、かなり手間が省けます。
とはいえ、プロジェクトや会社によって記法が異なりますので省略記法にするかしないかは統一を図り可読性を上げましょう。
引き続きはReactで再現をしてみようなんて考えましたが、、まずはVue.jsを覚えてからやろうと思います!
まとめ
今回ご紹介させて頂いたのはVue.jsの基本の「き」でした!
現在udemyにてVue.jsの基本を学んでおりますので、また随時共有させていただきます。
次回は算出プロパティについて記載させていただきます。