#はじめに
Vue.jsでAjax処理を実装した時に便利だったので備忘録も兼ねてご紹介です。
初歩的過ぎるからか、Vue.jsの記事でこういった内容のものはあまり見かけませんね。
まだjQuery現役だけどVue.js使ってみようかな、とお考えの方の後押しになれば嬉しい限りです。
さて、今回はjQueryを使用していますが、axiosなどのXHRプラグインに変えても問題はないと思います。むしろ他箇所でjQueryを使っていなければそちらのほうが動作は軽くなります。
後述の説明はVue.js公式サイトの「基本的な使い方」を理解しているという前提で説明しています。
誤って理解している箇所もあるかと思いますが、ご指摘頂けますと助かります。
#コードと使用例
htmlのコードでは簡単なリンクの一覧実装例を記載しています。
var mixin = {
ajax:{
data:{
error:0, //エラー状態
loading:true, //通信状態
result:{} //取得結果格納用
},
methods:{
getData:function(){
var _this = this;
_this.loading = true;
$.ajax({
url: _this.request.url,
type: 'POST',
dataType: 'JSON',
timeout : 30000,
data:_this.request.data
})
.done(function(response) {
//結果をresultに格納、各種状態管理用の変数を完了ステータスに変更
_this.error = 0;
_this.loading = false;
_this.result = response;
})
.fail(function(error) {
//通信エラー時の再試行。
//再試行回数が指定数に達した場合は状態管理用の変数を更新しAjaxを停止
if(_this.error <= 5){
_this.error++;
_this.getData();
}else{
_this.error = true;
_this.loading = false;
}
});
}
},
mounted:function(){
//Ajaxを実行
this.getData();
}
}
}
var app = new Vue({
el:'#app',
mixins: [mixin.ajax],
data:{
request:{
url:'//example.com/path/to/api/', //呼び出しurl
data:{ //リクエストデータ
date:'2017/12/31'
}
}
}
});
<!-- 実装例 -->
<div id="app" v-cloak>
<div v-if=“!error”>
<ul>
<li v-for="item in result">
<a :href="item.url">{{ item.text }}</a>
</li>
<ul>
</div>
<p v-else-if="error">通信エラーが発生しました。しばらく時間をおいてから再度お試しください。</p>
</div>
#簡単な解説
要点はソースのコメントに記載しましたのでVue.jsを使った利点について少し書いておきます。
##データバインディング
Vue.jsはdataオブジェクトの全てのプロパティをプロキシしています。そのため、dataオブジェクト内の値が変更された時、それを検知し値が依存している箇所は全て自動で更新されます。
今回のようにdataオブジェクトに通信状態やエラー状態を管理する変数を用意してさえいれば、取得終了時やエラー時の同期処理を簡単に実装することができます。
テンプレート構文
Vue.jsではHTMLベースのテンプレート構文が使われていますので、html実装例のように記述するだけで直感的に実装が可能です。pugやEJSなどのテンプレートエンジンを利用されてる方は理解しやすいのではないでしょうか。
Ajaxで言えば、今までのようにforで変数にhtmlコードを入れて...という処理が必要なくなりますので、コードの見通しも良くなると思います。
ミックスイン
今回はVue.jsの便利な機能「ミックスイン」を使っています。これによって、Ajaxの機能が必要なインスタンスで呼び出すだけで使用可能になります。複雑なAjax用の関数を書く必要はありません。
ミックスイン内のメソッドや変数は呼び出されたインスタンスで完結するので、インスタンスの機能拡張に非常に有用です。
デベロッパーツール
フレームワークそのものには関係しませんが、Chromeの拡張機能である「Vue.js devtools」が非常に便利です。
dataオブジェクトの値や算出プロパティの状態などがひと目で分かるため、コンソールを使った確認作業は一切行いませんでした。
#あとがき
Ajaxを多用する案件で使ってみましたが今までのAjax処理とは比べ物にならないくらい素早く簡潔に進められました。もう取得結果をforで回して変数に入れてから出力なんて実装方法には戻りたくありません（笑）
書いていて気づきましたが、Vuexを使えば状態管理はもっと楽になるかもしれません。自分はまだVuex周りの知見を深められていないので勉強あるのみですね。
「フレームワークの導入」と聞くと身構えてしまう方も中にはいらっしゃると思いますが、このくらいの使い方でも十分に力を発揮してくれると思います。使ってみたいなと思った方はどんどん使ってみましょう！