kk-web

Kuma UIを使ってみた

2023-07-30

kk-web を最新の Next.js を使用してリプレイスしてみました。

リプレイスにあたって、なんとなく普段は使用しないコンポーネント系のライブラリを使用してみようと思い、Kuma UI を導入してみました。

Kuma UI

ということで、以下 Kuma UI の使用感です。

シンプルで良い

こういう系のライブラリでは非常にめずらしく国産製なのですが、まだまだ発展途上ということもあり、現時点ではめちゃくちゃシンプルです。

個人的には昨日過多よりは少し足りないくらいのほうが肌感に合いやすいので、今くらいでも全然十分だなーと思いつつ、導入から使用までほぼ詰まることなく導入できました。

クラス名がかわいい

出力されたクラス名がかわいいです、ぜひインスペクターから見てもらえればと。

Breakpoint のクセが強め

個人的に1番キツいなーと感じたのが Breakpoint です。

基本的に Breakpoint に合わせてスタイリングを行う場合、以下のように記述を行うのですが。

<Box display={["none", "none", "block"]} />

見てもらったらわかる通り、場合によっては同じ値を2回記述しなければいけません。

で、さすがにめんどくさいなーと思ったので、以下のような汎用関数を作成しまして。

type Breakpoint = "sm" | "md" | "lg" | "xl";

type Value = string | number;

export type GetBreakpointsParams<T extends Value> = Partial<
  Omit<Record<Breakpoint, T>, "sm">
> & {
  sm: T;
};

export default function getBreakpoints<T extends Value>(
  breakpoint: GetBreakpointsParams<T>,
): T[] {
  const { lg, md, sm, xl } = breakpoint;
  const breakpoints = [sm, md, lg, xl].reduce<T[]>(
    (previousBreakpoints, currentreakpoint, currentIndex) => [
      ...previousBreakpoints,
      typeof currentreakpoint !== "undefined"
        ? currentreakpoint
        : previousBreakpoints[currentIndex - 1],
    ],
    [],
  );

  return breakpoints;
}

以下のようにあてることで、この問題を解決しました。

<Box display={getBreakpoints({ lg: "block", sm: "none" })} />

Hot Reload が動かないことがある

スタイルを更新した際に、Next.js の Hot Reload が動かないことが結構な頻度で発生しました。

Next.js の Hot Reload の仕様を把握していないのでなんともいえないのですが、手動でリロードをかけないといけないのはやっぱりめんどうだなーと。

素の CSS も組み合わせる必要はありそう

Styled Components などとは異なり、今のところグローバルにスタイルをあてる方法は準備されていなさそうです。

現段階では素の CSS や Sass と組み合わせて開発を行うのがベターそうですが、その場合定数の共有の問題がどうしても発生します。

そんな感じです。

全体的には上にも書いた通り、クセがなくスイスイ書いていけるのですが、仕事とかに導入するのはちょっとリスキーかなーと思いました。

Kuma UI のこれからの発展に期待しつつ、そんな感じです。

© 2018 kk-web