共通コンポーネントはUIライブラリを!
2022/10/03
結論: UIライブラリを前提にしたデザインを用意すれば デザイン/開発の作業負荷が下がります
案件の前提条件
-
デザインが未FIXの状態で開発スタート
- 各画面/機能のLo-Fi がいくらかFIXしている
- 共通コンポーネントについてもHi-FiはFIXしていない
-
開発期間は3ヶ月
- 2022/01 に本格的にか初がスタート
- デザインLo-FiがFixしている画面と、共通コンポーネントから着手
- プロダクトオーナーは3月のリリースに向けて開発速度を最優先して欲しい考え
- vue3案件
なんでUIライブラリを使いたいのか
- 静的型付、scoped cssが普及したことにより、共通コンポーネントは1からつくらないことが主流になった。(たぶん)
-
UIライブラリも stylingの自由度が上がって、個別の変数の設定だけでもそれなりに styleを実現できるようになった。
- styleはHi-FIがFixしてから当てればよいので、画面実装に入りやすい。
- ライブラリによってはoverrideする必要があるものもあるけど、なんとかなる
-
webとして一般的なinterfaceが担保されている
- スクラッチするとブレが出やすい。。
- webとして一般的なstyleが担保されている
- UIライブラリそのままを利用できるコンポーネントがあれば、デザインの作成を省ける
↓vue3でelement-plusをwrapした実装。interfaceはUIライブラリから取るだけ。styleもvariableを変えるだけで済むので、とても楽。
JavaScript
<template>
<ElTag v-bind="props" class="sp-tag">
<span class="sp-tag-inner" :style="{ width }">
<slot></slot>
</span>
</ElTag>
</template>
<script lang="ts">
export default {
name: "SpTag",
};
</script>
<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
import { ElTag, tagProps, tagEmits } from "element-plus";
const props = defineProps({
...tagProps,
width: {
type: String,
default: "",
},
});
defineEmits({
...tagEmits,
});
</script>
<style scoped lang="scss">
/* stylelint-disable selector-class-pattern -- Reason for overwrite element-plus */
.sp-tag {
--el-tag-bg-color: var(--white);
--el-tag-border-color: var(--fill-border);
--el-tag-text-color: var(--primary);
--el-tag-hover-color: var(--fill-icon);
--el-tag-border-radius: 0;
--el-tag-font-size: 10px;
font-weight: bold;
transition: all 0.1s ease;
::v-deep(.el-tag__close) {
transition: all 0.1s ease;
}
&:hover,
&.hover {
background-color: var(--el-tag-hover-color);
::v-deep(.el-tag__close) {
background-color: var(--el-tag-text-color);
color: var(--white);
}
}
&:focus,
&.focus {
border-width: 2px;
}
&:active,
&.active {
border-color: var(--el-tag-border-color);
}
&:disabled,
&.disabled {
background-color: var(--fill-background);
border-color: var(--fill-background);
}
}
.sp-tag-inner {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>UIライブラリを利用すれば複雑性の高いUIデザインに注力できる
- 一般的ではないコンポーネントはデザイン/開発が1からつくる必要があるときはある
-
100%UIライブラリによる共通化ができなくても、ある程度の省力化はできる
- ↑の例でもフローの描画部分以外は共通化できてる
共通コンポーネントの話がでたら。。。
まずライブラリを探しましょう。
メジャーなやつ↓(他にもたくさんありますが個人的におすすめ)