😎

日本発のReact UIコンポーネントライブラリ『Yamada UI』

2023/12/24に公開

3件

初めまして、プログラマーを始めて3年目の山田です。今回、日本発のReact UIコンポーネントライブラリYamada UIをリリースしたので、その素晴らしい機能の数々を紹介していこうと思います。

ちなみに、Yamada UIのYamadaは山田が名付けたわけではありません。気になる方は、山田に聞いてください。

`Yamada UI`とは

一言で言うならば、『すべてのUIコンポーネントライブラリを超えた(つもり)』のUIコンポーネントライブラリです。

現在のUIコンポーネントライブラリで代表的なものと言えば、Material UIやChakra UIであり、フロントエンドエンジニアであれば、誰でも知っている知名度だと思います。

しかし、現在主流となっているUIコンポーネントライブラリは数年前に開発されたものであり、色々な面(カラーモード・アニメーション・CSSプロパティ・型安全など)において首が回らない状況になっているのは、ご存知の通りでしょう。

Yamada UIは、Material UI, Chakra UIやMantineの良さを継承しつつ、1から再設計することで、問題を解消・改善しています。

なにが違うの？

今回は、Yamada UIの良さを感じてもらうため、他のUIコンポーネントライブラリと比較しています。ダメ出しみたいな感じになっていますが、ちゃんとリスペクトしています（はーと）。

CSSプロパティの強化

Yamada UIは、Chakra UIのStyle Propsに深く感銘を受けました。その使いやすさをそのままに、Chakra UIより200以上のプロパティを追加し、さらに機能(アニメーションやCSS変数)を強化しています。

Yamada UI - Style Props

ダークモードの最適化

Material UIは、ダークモード時にリロードするとフラッシュすることがあります。これは、ダークモードが当たり前になっている現在では採用したくない方も多いことでしょう。また、Chakra UI, MantineやNext UIは、オペレーションシステム(OS)のモードを計算し自動的にモードを切り替えるのに弱いのが印象です。Yamada UIは、ローカルストレージやcookiesを活用し、上記のすべてを改善しました。

またダークモードのスタイリングは、カスタムフックなどで設定するのが一般的ですが、Yamada UIはStyle Propsに配列を渡すことでダークモードに対応します。この新しいアプローチで、記述量は従来のUIコンポーネントライブラリより、かなり削減できます。

Chakra UI

const bg = useColorModeValue('red.500', 'red.200')

return (
  <Box bg={bg} />
)

Yamada UI

return (
  <Box bg={['red.500', 'red.200']} />
)

Yamada UI - カラーモード

アニメーションの強化

UIコンポーネントライブラリは、『アニメーションに弱い』という印象を持つ方も多いのではないでしょうか。当然ですよね、UIですから。しかし、アニメーションつけたいですよね？そうですよね。

大丈夫です。Yamada UIは、アニメーションにとて強です。

アニメーションに特化したコンポーネントのMotionやCSSのkeyframesのように記述できるuseAnimationなど、多くのユーティリティを提供しています。

useAnimation

const animation = useAnimation({
  keyframes: {
    "0%": {
      bg: "red.500",
    },
    "20%": {
      bg: "green.500",
    },
    "40%": {
      bg: "purple.500",
    },
    "60%": {
      bg: "yellow.500",
    },
    "80%": {
      bg: "blue.500",
    },
    "100%": {
      bg: "red.500",
    },
  },
  duration: "10s",
  iterationCount: "infinite",
  timingFunction: "linear",
})

return <Box w="full" h="xs" animation={animation} />

useAnimation (複数)

const animation = useAnimation([
  {
    keyframes: {
      "0%": {
        bg: "red.500",
      },
      "20%": {
        bg: "green.500",
      },
      "40%": {
        bg: "purple.500",
      },
      "60%": {
        bg: "yellow.500",
      },
      "80%": {
        bg: "blue.500",
      },
      "100%": {
        bg: "red.500",
      },
    },
    duration: "10s",
    iterationCount: "infinite",
    timingFunction: "linear",
  },
  {
    keyframes: {
      "0%": {
        h: "xs",
      },
      "50%": {
        h: "md",
      },
      "100%": {
        h: "xs",
      },
    },
    duration: "10s",
    iterationCount: "infinite",
    timingFunction: "linear",
  },
  {
    keyframes: {
      "0%": {
        w: "full",
      },
      "50%": {
        w: "50%",
      },
      "100%": {
        w: "full",
      },
    },
    duration: "10s",
    iterationCount: "infinite",
    timingFunction: "linear",
  },
])

return (
  <Box w="full" h="xs" animation={animation} />
)

当然、レスポンシブ・ダークモードにも対応しています。

// レスポンシブ
<Box w="full" h="xs" animation={{ base: desktopAnimation, md: tabletAnimation }} />

// カラーモード
<Box w="full" h="xs" animation={[lightAnimation, darkAnimation]} />

useDynamicAnimation

const [animation, setAnimation] = useDynamicAnimation({
  moveLeft: {
    keyframes: {
      "0%": {
        transform: "translateX(400%)",
      },
      "100%": {
        transform: "translateX(0%)",
      },
    },
    duration: "slower",
    fillMode: "forwards",
    timingFunction: "ease-in-out",
  },
  moveRight: {
    keyframes: {
      "0%": {
        transform: "translateX(0%)",
      },
      "100%": {
        transform: "translateX(400%)",
      },
    },
    duration: "slower",
    fillMode: "forwards",
    timingFunction: "ease-in-out",
  },
})

return (
  <VStack alignItems="flex-start">
    <Button
      onClick={() =>
        setAnimation((prev) =>
          prev === "moveRight" ? "moveLeft" : "moveRight",
        )
      }
    >
      Click me!
    </Button>

    <Box bg="primary" p="md" rounded="md" color="white" animation={animation}>
      Box
    </Box>
  </VStack>
)

Motion

<Motion
  animate={{
    scale: [1, 2, 2, 1, 1],
    rotate: [0, 0, 180, 180, 0],
    borderRadius: ["0%", "0%", "50%", "50%", "0%"],
  }}
  transition={{
    duration: 2,
    ease: "easeInOut",
    times: [0, 0.2, 0.5, 0.8, 1],
    repeat: Infinity,
    repeatDelay: 1,
  }}
  w="3xs"
  h="3xs"
  bg="primary"
/>

他にも、whileTapやonDrag、スクロールアニメーション、テーマからアニメーションを参照をサポートしています。

Yamada UI - アニメーション

型安全の強化

TypeScriptは10年ほど前から存在していましたが、広く使われるようになったのはつい最近のことです。他のUIコンポーネントライブラリの多くは、当初JavaScriptで開発していました(現在は、ほとんどTypeScript)。そのため、内部的にanyが多発していたり、propsの型が間違っていることがしばしばあります。

Yamada UIは、1からTypeScriptで開発しており、『型にうるさい山田』が監督していますので

『安心・安全』です。

柔軟な記述

UIコンポーネントライブラリには、それぞれ特徴があると思います。

記述量が少ないが柔軟性がない Material UI, Mantineなど
柔軟性はあるが記述量が多い Chakra UIなど

これは、個人の感想なので人によって違うと思いますが、コミッターをしてて感じたことです。

山田は悩みました。どうにかして両方を活かせないか。

辿り着いた答えは、これです。

<Dialog
  isOpen={isOpen}
  onClose={onClose}
  header="孫悟空"
  cancel="わけない"
  onCancel={onClose}
  success="わける"
  onSuccess={onClose}
>
  だ…大地よ海よ　そして生きているすべての　みんな…
  このオラにほんのちょっとずつだけ元気をわけてくれ…！！！
</Dialog>

<Dialog isOpen={isOpen} onClose={onClose}>
  <DialogHeader>孫悟空</DialogHeader>

  <DialogBody>
    だ…大地よ海よ　そして生きているすべての　みんな…
    このオラにほんのちょっとずつだけ元気をわけてくれ…！！！
  </DialogBody>

  <DialogFooter>
    <Button variant="ghost" onClick={onClose}>
      わけない
    </Button>
    
    <Button colorScheme="primary" onClick={onClose}>
      わける
    </Button>
  </DialogFooter>
</Dialog>