Vue.jsプラグイン「v-ajax-form」を作りました

こんにちは、細川です。
Vue.js流行ってますね。
弊社でもフロントエンドにVue.jsを使ったサービスが、いくつかリリースされています。

Vue.jsが必要になるWebサービスの要件では、
非同期通信処理を行うフォームを実装する場面が多々あると思います。

非同期通信処理をするためだけに、inputタグの一つ一つにVue.jsのインスタンスと同期する設定を施し、
さらに通信のためのコードを書くのは面倒だと感じていました。
また、多くの画面で記述されているコードを見ていると大体同じようなコードがバラバラに実装されていて、
それでも本質的に行いたいことは同じです。

このパターンをライブラリとして切り出したいと考え、週末コーディングで

「v-ajax-form」
https://github.com/hosokawat/v-ajax-form

というVue.jsコンポーネントプラグインを開発しました。

そして、サンプルとしてISBNをキーに本の情報を調べるページを作りました。
https://jsfiddle.net/hosokawat/tfhn2cp3/

以上。

と、これで終わってしまうとそれだけになってしまうので
「v-ajax-form」のこだわりポイントを書きます。

こだわりポイント

formタグ置き換えで使えるようにした

「非同期通信処理を効率的に実装できるようにする」
というアイデアを実現するためには色々な方法が考えられます。
利用シーンを考えて一番シンプルな方法を考えた結果、
formタグの置き換えによって使えるようにしました。

属性を捨てずに、formタグに全てコピーする

v-ajax-formはvue.jsのレンダリングでformタグに置き換えられます。
v-ajax-formに設定された全属性は全てformにコピーします。

デザインの都合でクラスやIDの設定を行いたい時や、
自分で意図していなくてもデザインフレームワークの使用の時、
その他、私が考えてもいない使い方ができることでしょう。

こういうのは地味なようで大切な配慮だと考えています。

v-ajax-formの実装の話となるのですが、
全ての属性をコピーする時、
何かフレームワークの内部情報にアクセスして、ループを書かなければならないのかなと
複雑な実装が必要となるであろう虫の知らせを感じていたのですが、とても簡単に実現できました。
templateに記述するHTMLでv-ajax-formの全属性を出力したいタグに「v-bind="$attrs”」
と書くだけでコンポーネントのプロパティとして指定されていない属性は全て出力されます。

非同期通信処理タイミング毎にコールバックを設定できる

内部で使っているaxiosのコールバックは全て設定できるように、
そして長らく使ってきたjQueryのajaxメソッドを参考に
非同期通信処理の各フェーズに合わせて
start, receive,fail,doneというイベントをディスパッチするようにしました。

Vue.jsコンポーネントのプロパティではなく、イベントで受け渡すようにしたことで、
万が一、jQueryで処理したい場合でも処理することができます。

非同期通信処理により生み出された情報は全てコールバック変数に渡す

非同期通信処理の各タイミングで呼ばれるstart, receive,fail,doneのコールバック関数で、
非同期通信処理の中で生成される情報は全て受け取れるようにしています。
色々なケースに対応できる柔軟性を持たせられたと考えています。

データはHTML,ロジックはJavascriptと自然に分離できるようにした

このコンポーネントを使うことで自然とデータはHTML,ロジックはJavascriptに書くことになります。
HTMLはデータ表現のために作られた言語で、Javascriptは操作するために作られた言語です。
それぞれの得意分野に任せたいというのもformタグ置き換えで使えるコンポーネントとすることが魅力的に感じた理由の一つです。
また、これは主観的なところが多分にあるのですが、
私はデータを分離して、なるべくイミュータブルな実装にしておく方が可読性が高く良いとも考えております。