Yamada UI 触ってみた

Yamada UIとは？

こんにちは、コズム開発部エンジニアの山田です。

今回は、ReactのUIライブラリである「Yamada UI」について紹介してみようと思います。実際にこの技術を知った際には、私自身が山田姓ということもあり、親近感を感じずにはいられませんでした。
さて、本題ですがYamada UIは、Hirotomo Yamada氏によって開発され、昨年末にv1.0.0がリリースされ、現在も積極的に開発されているOSSのUIライブラリです。有名なUIライブラリとしてはMUI、ChakraUI、Ant Design、Semantic UI Reactなど多数ありますが、負けず劣らずの盛り上がりを見せていると感じます。そして、名前からお察しの通り、日本発のライブラリになっています。私は日本発のライブラリは初めて触るので非常にワクワクします。

日本語ドキュメント、ありがたすぎる…

開発を行っていると、日本語の情報ソースがないという状況は、多々あることだと思います。少しマイナーなライブラリを使ったりすると、基本的に英語圏のドキュメントやコミュニティノート等しか見つけることができなかったりします。しかし、Yamada UIは、完全日本語対応。いざ日本語のドキュメントがあるとこんなにもありがたいのか…と感じずにはいられません。

そして、Yamada UIはドキュメントの書き方が圧倒的に親切です。一つのコンポーネントをとってみても、Propsの渡し方やオプショナルな機能についてきめ細やかに解説されています。UIライブラリを初めて触ってみる、という方にとってはとてもやさしく、おすすめできる内容になっています。また開発に慣れている方でも、この手厚いドキュメントにより圧倒的にリサーチにかかる時間が短縮できるのではないでしょうか。

コンポーネント

なんと現在（v1.3.10）100以上のコンポーネントが用意されているようです。いくつかピックアップしてご紹介します。

DropZone

まずは、フォームでのファイル選択などに用いるDropZoneコンポーネントを見てみましょう。Reactのファイル選択ライブラリはreact-dropzoneが有名かと思いますが、Yamada UIではreact-dropzoneをベーシックに、機能面、UIの面でもブラッシュアップされています。今まで使っていた、react-dropzoneでは基本的な使い方は以下の様になります。

import React, {useCallback} from 'react'
import {useDropzone} from 'react-dropzone'

function MyDropzone() {
  const onDrop = useCallback(acceptedFiles => {
    // Do something with the files
  }, [])
  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {
        isDragActive ?
          <p>Drop the files here ...</p> :
          <p>Drag 'n' drop some files here, or click to select files</p>
      }
    </div>
  )
}

(react-dropzone 公式docより引用)

しかし、Yamada UIではさらに直感的にコンポーネントを使用することができます。

<Dropzone>
  <Text>Drag file here or click to select file</Text>
</Dropzone>

(Yamada UI公式docより引用)

比較すると、react-dropzoneではドラッグ領域のための初期設定を自分で行うのに対して、Yamada UIではあらかじめコンポーネントとして準備されているので、ヘッドレスのように迅速にコアな部分の開発に入ることができるというメリットがあるかと思います。

Carousel

<Carousel>
  <CarouselSlide as={Center} bg="primary">
    1
  </CarouselSlide>
  <CarouselSlide as={Center} bg="secondary">
    2
  </CarouselSlide>
  <CarouselSlide as={Center} bg="warning">
    3
  </CarouselSlide>
  <CarouselSlide as={Center} bg="danger">
    4
  </CarouselSlide>
</Carousel>

(Yamada UI公式docより引用)

カルーセルもこの様に、非常に直感的に設定することができます。自動再生も、autoplayプロパティを渡すのみで実装可能。お手軽です。

Loading

ローディングコンポーネントももちろん用意されていますが、特筆すべきはそのバリエーションの数でしょう。なんと7種類のバリアントが用意されています。

フック

次に、Yamada UIに実装されているカスタムフックを見てみましょう。

useMediaQuery

const [isLarge] = useMediaQuery([
  "(min-width: 1280px)",
])

useMediaQueryはこの様に画面幅の制限を手軽に宣言できます。つまり、JSX内での画面幅に応じた要素の出しわけなどを便利にするフックです。こちらはChakra UIから引用されているようです。

useHover

const { hovered, ref } = useHover()

return (
  <Box ref={ref} w="full" bg="red.500" p="md" rounded="md" color="white">
    {hovered ? "I am hovered" : "Put mouse over me please"}
  </Box>
)

(Yamada UI公式docより引用)

useHoverは、ホバー状態を検知することができます。このフックによって、通常CSSに記述するホバーに関わる部分をJSX内に簡潔に記述できるメリットがあります。

まとめ

私がYamada UIに触れてみて、もっとも恩恵を感じたのはコンポーネントの使用法が統一されていることです。開発で様々なライブラリを用いる際、そのセットアップやコンポーネントのマウント方法はライブラリによって様々な仕様があり、その部分で詰まることも多々あります。Yamada UIではそういった部分の差を吸収し、直感的にコンポーネントを配置することができます。この利点により、Yamada UIを用いた開発では迅速かつ快適な開発体験を得られるでしょう。

また実装上での利便性のみならず、これらの豊富な機能を充実したドキュメントと共に使用できることは、特に日本の開発者の開発体験を大幅に向上させるものであると感じました。私が直近の開発で使用したライブラリも多く引用されている様だったので、Yamada UIを用いてリファクタリングを行ってみたいです。

参考

https://yamada-ui.com/ja