以前、いくつか既存のボードゲーム（カード型）をオンラインで遊べるようにしてみた。
ユーザ作成、ゲーム作成は流用し、ロジックだけ（これがゲームの９割を占めるが）を修正することで１０個以上のゲームをオンラインで遊べるようにしてみた。
そのときに使っていた技術としては
- FrontEnd: Html, Ajax, JQuery
- BackEnd:
- Server: Heroku
- Language: Python
- Framework: Flask
- Data: Redis
と言う構成で作っていた。
思ったこと
Ajax, JQueryの限界
まぁ、Ajaxは通信ライブラリなので、そこまで限界とは思っていないが、一番やばかったのはJQuery。
いや、これもすごい技術ではある。
今まで、ページをリフレッシュしないと更新されなかったオブジェクトを、リアルタイムに変更できるから。（一昔前はね）
が、現代ではそれが当たり前の上で、いかの効率よく作るか、、、と言うことが考えられてきている。
その中で、JQueryは以前から見直されてきているのがJavaScript系のフレームワーク。
Reactや、Backbone.jsなどのフレームワークが出始め、最近ではVueが注目を浴びている
なぜ最近のフレームワークが注目されるのか
ひとえに、更新されたデータが画面のリフレッシュなく参照できる技術が進化し、よりリアルタイムに、開発効率が良くなるような技術方法に進化してきているかと思われる。
どう変わったのか
HTMLの時代
このときは、１ページ毎に入力画面、完了画面と言うのを実装し、更新結果は次のページに遷移しないと見れない。と言うのが当たり前だった
┌──┐ ┌──┐
│入力│→│完了│
└──┘ └──┘
<body>
<form action='complete/' method='get'>
<input type='text' name='id' />
<input type='submit' value='確認' />
</form>
</body>
<body>
ID: test
transaction id: 1234
</body>
JavaScriptで制御するのは、入力内容のチェックだったり、表示/非表示ぐらい
フロントエンドはシンプルそうに見えるが、応答するHTMLはサーバ側で生成するため、画面遷移が必要
こちらのHTMLや、JavaScriptはイメージとして捉えてください。このまま実装して動くものではありません
JQuery/Ajaxの時代
ここから、上記のような１ページ毎に処理をしなくても、１ページ内で通信を行い、その結果を取得し、同じページを更新する。と言う現代のベースになる概念となった
<body>
<!-- 入力画面 -->
<div id='input'>
<input type='text' name='id' id='id' />
<input type='button' name='submit_input' value='確認'/>
</div>
<!-- 完了画面 -->
<div id='complete' style='visibility:hidden;'>
ID: <div id='id'></div>
trainsaction id: <div id='transaction_id'></div>
</div>
<script>
$("#submit_input").on( "click", function( event ) {
$.ajax({
url: "complete?id=" + $("#id").text(),
data: {
id: $("#id").val()
},
success: function( result ) {
$("#input").hide();
$("#complete").show();
$("#id").text($("#id").text());
$("#transaction_id").text(result);
}
});
});
</script>
</body>
こちらのHTMLや、JavaScriptはイメージとして捉えてください。このまま実装して動くものではありません
そしてVueな世界
<body>
<!-- 入力画面 -->
<template v-if="type == 'input'">
<input type='text' v-model='inp_id' />
<button @click='submit_input'>確認</button>
</template>
<!-- 完了画面 -->
<template v-if="type == 'complete'">
ID: {{ inp_id }}
transaction id: {{ transaction_id }}
</template>
<script>
function submit_input() {
asyncData: async function() {
let result = await axios.get('complete?id=' + inp_id);
return { transaction_id: result};
}
}
var app = new Vue({
el: '#app',
})
</script>
</body>
こちらのHTMLや、JavaScriptはイメージとして捉えてください。このまま実装して動くものではありません
ここまでのまとめ
最後の２つ、JQueryと、Vueでの違いと言うところでは、JavaScriptで制御している点は同じですが、HTMLとのデータのやり取りの際に、JQueryの場合はどのid/classと言う指定が目立つのですが、VueについてはすべてJavaScript内の変数名で記述が統一できていることがわかっていただけるかと思います。
私が有用と思う点をまとめてみました
私が思うVueの利点
- データを更新する際、わざわざJavaScript側でオブジェクトを指定する必要がない（単にJSとして変数の値を更新するだけ）
- 上記については反映する項目数が多くなった場合にかなり有利になってくる
- Vueとは直接関係ないが、サーバとの通信の際、JSON形式であればaxiosを使うと、そのままJSの配列として扱える（加工処理がいらないし、いきなり非同期）
- データの更新タイミングをsetTimeoutなどで制御する必要がない（JQueryの場合は、JSのデータが変更になっても、更新するためのトリガーを用意する必要がありますが、Vueではそれがリアルタイムなので、JSのデータが変更されれば、勝手に更新される）※これが一番大きい
ということで
Vue化したバージョンは、今後、リリース予定です。
乞うご期待ください。
それによりシンプルではありながら、JQueryでは制御が難しかったところを解消し、より使いやすいアプリにできればと思います。