RACCOON TECH BLOG

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。

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タグ置き換えで使えるコンポーネントとすることが魅力的に感じた理由の一つです。
また、これは主観的なところが多分にあるのですが、
私はデータを分離して、なるべくイミュータブルな実装にしておく方が可読性が高く良いとも考えております。

さいごに

v-ajax-formは、どんな要件の中にでもはめられるように汎用的にすることをゴールと考えました。
「非同期通信処理をシンプルに実装できるようにする」というコンセプトを守りつつ、
柔軟性を保つために、なるべくブラックボックス化しないように設計しました。

今後のVue.js開発で「v-ajax-form」を活用していきたいと思っています。
使っていく中で課題が見つかれば改良も行なっていきます。

この記事を読んで興味を持った方も無償で使うことができるのでぜひお試しください。

一緒にラクーンのサービスを作りませんか? 採用情報を詳しく見る

関連記事

運営会社:株式会社ラクーンホールディングス(c)2000 RACCOON HOLDINGS, Inc