はじめに
前回
https://qiita.com/jun2/items/ae09f35c307711ac4dd5
にてフレームワークは必要か？について記事を投稿しましたが、その続編となります。
実際色々触ってみてやっぱり強力だなと思う点についてもう少し詳細に触れていきたいと思います。
基本的にNuxt.jsをベースとしたお話です。
業務システムでは特に旨味ありか？
Atomicデザインに基づいて開発を進めてみたところ、当初はvuetifyなどコンポーネントフレームワークを利用することで、Atomsレベルの開発は行わないのでは？と考えていました。
ただ、業務系システムでは「一般的である」ことは求められません。
業務に特化する必要があり、顧客の要望を一般化という正論で押し通すことは難しいことは携わる方なら「わかる。つらいとことだよね。」と同調してくださる方もいらっしゃるのではないでしょうか？
例えば、生年月日の入力については「和暦での入力・表示」を求められます。
正直私は和暦で年齢を推測することはよほど近くない限りはできません・・・
一方要件定義での場では他は西暦での入力に抵抗はあまりないが、生年月日だけは・・・と言われてしまうことが多々。
もちろんvuerifyを使っても和暦入力を許容するようなオプションはありません。
ここでatomレベルでの開発が必要となってくるのでしょう。
コンポーネント化するとどうなるのか？
手元に実行環境がないところで記事をおこしましたので、誤字も含めだいぶニュアンス実装ですがご了承ください。
BirthdayInput.vue
<template>
<v-text-field v-model="birthday" @blur="change" \>
<\template>
<script>
const birthday=ref();
const change = () => {
birthday.value = 半角に直した上で、西暦でも和暦でも和暦文字列に直す関数(birthday.value)
}
</script>
これが、
<template>
<BirthdayInput />
</template>
これだけですむわけですね。
正直「半角に直した上で、西暦でも和暦でも和暦文字列に直す関数」が面倒くさいだけであって、utilとして用意してあればあまり苦ではないかもしれません。
それでも、「どうやってやるんだっけ？」「参考ソースは・・・」などいちいち考えずに実装できることが大きいと思います。
開発者によってどの程度気が利くかの差がでないのもいいですね。
他思いつくもの
- 生年月日から年齢の自動計算
- 氏名漢字入力から氏名カナの自動補完
- 郵便番号から住所自動補完
など、AtomsからMoleculesレベルでの作り込みがその後の開発を相当楽にさせるだろうと思いました。
作成したものは検索しやすいようにしておくといいでしょう。
また、前回の記事通りこれらをsubmoduleとした構成をテンプレート化することによって追加モジュールやバグフィックスしたモジュールを他のプロジェクトでも簡単に反映させられるため、非常に効率的だと思います。
いいね！ストック！などモチベーションに繋がりますのでポチッていただけると嬉しいです(^^)