こんにちは！GIGのサービス開発事業部でアプリケーションエンジニアとして働くちいかた（片田）です！

みなさん、Webアプリケーションを開発するときにUIライブラリは使ってますか？

有名どころだとMantine UIやChakra UI、shadcn/uiなどがあると思います。ただ、今回は2023年の年末にリリースされた国産のUIライブラリ、Yamada UIについてご紹介させてください！

Yamada UIはその名の通り、日本人の山田さん(@hiromotoyamada)によって開発され、洗練されたUIコンポーネントを提供しているUIライブラリです。

Yamada UIなどのUIライブラリを使えば、見た目が綺麗なだけでなくアクセシビリティにも考慮されたUIコンポーネントが手軽に使えるのが嬉しいポイントです。

今回の記事では、Yamada UIに魅了されOSSにも参加している私ちいかたが、Yamada UIとはどんなUIライブラリなのかを解説しつつ、Next.jsとYamada UIを使って実際にUIを構築する方法を実演します！

Yamada UIとは

Yamada UIは、Reactアプリケーション向けの包括的なコンポーネントライブラリです。2023年末にリリースされた比較的新しいライブラリですが、その機能性と使いやすさで急速に注目を集めています。

Yamada UI 公式サイト：
https://yamada-ui.com/

Yamada UIは、日本人開発者の山田さん(@hiromotoyamada)によって開発され、活発なOSSコミュニティによってサポートされています。この日本発のUIライブラリは、グローバルな標準を取り入れつつ、日本のデザイン感覚や開発者のニーズに応える特徴をもっています。

実際のコンポーネントは公式サイトのExamplesから確認できます。さまざまなUIパターンやインタラクションを実際に体験できるので、ぜひ覗いてみてください！

Yamada UI Examples：
https://yamada-ui.com/example

Yamada UIの特徴×10

1. 包括的なコンポーネント群
100以上の再利用可能なコンポーネントを提供しており、ボタンやフォーム要素から、複雑なナビゲーション、モーダル、データ表示コンポーネントまで幅広くカバーしています。

2. 完全なTypeScript対応
Yamada UIはTypeScriptで書かれており、型安全性が確保されています。これにより、開発時のエラー検出が容易になり、IDEの自動補完機能も十分に活用できます。

3. アクセシビリティ重視
WAI-ARIAガイドラインに準拠したコンポーネントを提供しており、アクセシブルなアプリケーション開発をサポートします。キーボードナビゲーションやスクリーンリーダーの対応も考慮されています。

4. 国際化（i18n）サポート
多言語対応のアプリケーション開発をサポートする機能を備えており、グローバルなプロジェクトにも対応可能です。

5. パフォーマンス最適化
不要な再レンダリングを最小限に抑えるよう設計されており、大規模アプリケーションでも高いパフォーマンスを維持できます。

6.充実した日本語ドキュメント
日本語での詳細なドキュメントが提供されており、日本人開発者にとって導入・学習しやすいライブラリとなっています。

Yamada UIは、これらの特徴により、開発者がより魅力的で動的なユーザーインターフェースを簡単かつ効率的に作成できるようサポートします。UIの一貫性を保ちながら、開発時間を短縮し、より洗練されたアプリケーションを実現できます。

7. 柔軟なスタイリングシステム
Yamada UIは独自のスタイリングシステムを採用しており、プロップスを通じて直感的にスタイルを適用できます。また、テーマのカスタマイズも容易で、プロジェクト全体の一貫したデザインを維持しやすくなっています。

import { extendTheme, UIProvider } from "@yamada-ui/react"

const customTheme = extendTheme({
  colors: {
    brand: {
      500: "#0070f3",
    },
  },
})

function MyApp({ Component, pageProps }) {
  return (
    <UIProvider theme={customTheme}>
      <Component {...pageProps} />
    </UIProvider>
  )
}

8. アニメーションと動的UI
組み込みのアニメーション機能により、洗練された動的UIを簡単に作成できます。useAnimationフックやMotionコンポーネントを使用することで、複雑なアニメーションも少ないコードで実現可能です。

import { Motion } from "@yamada-ui/react"

<Motion
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
>
  <Button>アニメーションボタン</Button>
</Motion>

9. レスポンシブデザインのサポート
ブレークポイントに基づいたレスポンシブなプロパティを簡単に設定でき、さまざまな画面サイズに対応したデザインを効率的に実装できます。

<Box
  fontSize={{ base: "md", md: "lg", lg: "xl" }}
  bg={{ base: "red.500", md: "blue.500", lg: "green.500" }}
>
  レスポンシブなボックス
</Box>
10. ダークモード対応
すべてのコンポーネントがダークモードに対応しており、カラーモードの切り替えもuseColorModeフックを使用して簡単に実装できます。

import { useColorMode, Button } from "@yamada-ui/react"

function ColorModeToggle() {
  const { toggleColorMode } = useColorMode()
  return (
    <Button onClick={toggleColorMode}>カラーモード切り替え</Button>
  )
}

Yamada UIの使い方

ここまでYamada UIの素晴らしさをお伝えしてきましたが、ここからはより実践的に、Next.jsと組み合わせた使い方をご紹介します。

Next.jsとYamada UIを組み合わせてお問い合わせページを構築する

1. プロジェクトのセットアップ
まず、Next.jsプロジェクトを作成し、Yamada UIをインストールします。

npx create-next-app@latest yamada-ui-nextjs-tutorial
cd yamada-ui-nextjs-tutorial
npm install @yamada-ui/react

2. Yamada UIのセットアップ
pages/_app.jsファイルを編集して、Yamada UIのプロバイダーを追加します。

import { UIProvider } from "@yamada-ui/react"

function MyApp({ Component, pageProps }) {
  return (
    <UIProvider>
      <Component {...pageProps} />
    </UIProvider>
  )
}

export default MyApp

3. お問い合わせフォームの作成
pages/contact.jsファイルを作成し、以下のようなコードを記述します。

import { Box, VStack, Heading, FormControl, FormLabel, Input, Textarea, Button } from "@yamada-ui/react"

export default function ContactPage() {
  return (
    <Box maxWidth="500px" margin="auto" padding="6">
      <VStack spacing="6">
        <Heading>お問い合わせ</Heading>
        <FormControl>
          <FormLabel>お名前</FormLabel>
          <Input placeholder="山田 太郎" />
        </FormControl>
        <FormControl>
          <FormLabel>メールアドレス</FormLabel>
          <Input type="email" placeholder="yamada@example.com" />
        </FormControl>
        <FormControl>
          <FormLabel>メッセージ</FormLabel>
          <Textarea placeholder="お問い合わせ内容をご記入ください" />
        </FormControl>
        <Button colorScheme="primary">送信</Button>
      </VStack>
    </Box>
  )
}

このコードでは、Yamada UIのBox、VStack、Heading、FormControl、FormLabel、Input、Textarea、Buttonコンポーネントを使用しています。これらのコンポーネントを組み合わせることで、簡単に整形されたフォームを作成できます。

おわりに

Yamada UIを使えば、コンポーネントを1から実装することなく、スピーディに高品質なUIを構築できます。

国産のUIライブラリなのでドキュメントが読みやすいのと、OSS活動も活発なので今後も発展していくでしょう。

みなさんもYamada UIを使って高品質なWebサイトを構築してみてください！

◇

株式会社GIGは、ナショナルクライアントからスタートアップまで、Webコンサルティング、UI/UXデザイン、システム開発など、DX支援をおこなうデジタルコンサルティング企業です。また、50,000人以上が登録するフリーランス・副業向けマッチングサービス『Workship』や、7,000人以上が登録するデザイナー特化エージェントサービス『クロスデザイナー』、リード獲得に必要な機能を備えたCMS『LeadGrid』、UXコンサルティングサービス『UX Design Lab』などを展開しています。

WebやDX支援のご相談はいつでもご連絡ください。

Web制作/Webマーケティングに関するご相談・ご依頼はこちら
会社紹介資料のダウンロードはこちら

また、株式会社GIGでは一緒に働くメンバーも募集中です！技術が好きなエンジニアも多く、モダンな技術に関しても常に情報交換しながら切磋琢磨しています。挑戦したいことにはどんどん挑戦できる環境なので、LeadGridの開発に少しでもご興味を持っていただいた方は、ぜひカジュアル面談でお話しましょう。

採用応募はこちら（GIG採用サイト）
採用応募はこちら（Wantedly）

片田 凌太

1997年10月生まれ。自動車のコネクティッドサービス開発や日本最大のコーヒーサブスクリプションサービス開発などの経験を経て2023年10月に株式会社GIGに入社。現在は、Webサイト制作からコンテンツSEO、問い合わせ管理、LP制作などWebマーケティングに必要な機能をもったCMS『LeadGrid』の開発チームに所属。