フォームの作成で消耗していますか？
Webサイトのフォームは、基本的にはJavaScriptによるバリデーション等の制御をもって作成されている。そして当然、工数に跳ね上がる。つまりフォームの作成は面倒くさい、やりたくないエンジニアは多い。ことSPAになれば、クライアントサイドでバリデーションを行ったあとで、POSTしたデータをサーバーサイドを再検証する。POSTされてきたデータを自画面で捌いて、再描画するような昔の時代なら、HTMLを再構成してPUSHすれば済んだ時代ではなくなった。
それ、HTMLでも制御できますよ？
しかし、一方でVue.jsやReact.jsのようなフレームワークの登場によりとっつきやすくなったフロントエンドは、UI制御すべてがJavaScriptで行わないといけない思いがちである。もちろんそんなことはない。HTMLの規格は常に進化しており、様々なことを実現できるようになっている。簡単なモック程度であるならば、JSではなくブラウザ側に制御を移譲してしまってよいであろう。
頑張らないフォームをVue.jsで作成する
完成目標としては以下のように定める
- バリデーションは頑張らない
- SPAライクな実装はしたい
HTMLのfrom属性とrequired属性、submit.prevent（ブラウザ挙動によるformのactionを停止）を使用すると実現できる。
<div class="container">
<form id="app" v-on:submit.prevent="onSubmit">
<div v-if="status === 0">
<h1>１番めの入力です！！</h1>
<input type="text" v-model="text1" required>
<input type="text" v-model="text2" required>
<input type="text" v-model="text3" required>
<input type="text" v-model="text4" required>
<button>次の入力へ</button>
</div>
<div v-else-if="status === 1">
<h1>２番めの入力です！！</h1>
<input type="text" v-model="text5" required>
<input type="text" v-model="text6" required>
<input type="text" v-model="text7" required>
<input type="text" v-model="text8" required>
<button>次の入力へ</button>
</div>
<div v-else>
<h1>入力完了！！</h1>
</div>
</form>
</div>
new Vue({
el: '#app',
data(){
return{
text1 : '',
text2 : '',
text3 : '',
text4 : '',
text5 : '',
text6 : '',
text7 : '',
text8 : '',
status: 0
}
},
methods:{
onSubmit(){
this.status++;
window.alert('ok')
}
}
})
上記のような実装を行うと、ボタンを押して入力項目に満たない場合は、該当部分にブラウザが定めるツールチップが表示され、すべてを満たせば次の入力項目の画面が切り替わる。
ただし、プロダクションコードとしては適用できません
ただし、上記のコードはUI的にも洗練されておらず、更にSafariではrequiredが有効に機能しないという報告がされている。簡単にモックを作成する手段として、覚えておくとよいであろう。