Blog

HeroUIとは？初心者向けHeroUIチュートリアル

Mark Ponomarev

Mark Ponomarev

12 6月 2025

HeroUIとは？初心者向けHeroUIチュートリアル
💡
美しいAPIドキュメントを生成する優れたAPIテストツールをお探しですか？

生産性を最大化して開発チームが共同作業できる、統合されたオールインワンプラットフォームをお探しですか？

Apidogは、お客様のあらゆる要求に応え、Postmanをはるかに手頃な価格で置き換えます！

ボタン

フロントエンド開発者にとって、見た目が美しく、高性能で、高度にカスタマイズ可能なユーザーインターフェースへの要求はかつてないほど高まっています。開発者は、品質や創造的な制御を犠牲にすることなく、ワークフローを加速できるツールを常に探しています。モノリシックなUIコンポーネントライブラリは何年もコミュニティに貢献してきましたが、開発者の所有権、モジュール性、最新フレームワークとのシームレスな統合を優先する新しいパラダイムが登場しています。HeroUIは、この新しいパラダイムの中にニッチを切り開いています。

HeroUIは単なる別のコンポーネントライブラリではありません。プロジェクトに直接統合できるように設計された、再利用可能なUIコンポーネントの精巧に作られたコレクションです。1 これは、開発者にコードベースに対する究極の制御を与える哲学を支持しています。nodeモジュールから不透明なコンポーネントをインポートする代わりに、HeroUIコマンドラインインターフェース（CLI）を使用して、必要なコンポーネントの実際のソースコードをプロジェクトに追加します。2 この「コピー＆ペースト」の進化は、すべてのボタン、カード、ダイアログボックスが独自のアプリケーションの一部となり、特定のニーズに合わせて調整、再スタイル、適応できるようになることを意味します。

React、Tailwind CSS、Next.jsのような巨人の肩の上に構築されたHeroUIは、美しく、アクセシブルで、レスポンシブなユーザーインターフェースを作成するためのビルディングブロックを提供します。速度と特異性の両方を重視する現代の開発者向けに設計されており、厳格なデザインシステムに縛られることのない堅牢な出発点を提供します。この記事では、HeroUIのコア原則の理解、プロジェクトへのインストール、外観と感触のカスタマイズ、そしてその強力なCLIを活用して次世代のWebアプリケーションを構築するための包括的なガイドとして機能します。

パート1：HeroUIを解体する - 哲学とコア機能

インストールと使用に関する技術的な詳細に入る前に、HeroUIの「なぜ」を理解することが重要です。それはどのような問題を解決し、UIツールの混雑した分野で魅力的な選択肢となるのはなぜでしょうか？

哲学：所有権と妥協なきカスタマイズ

HeroUIとMaterial-UIやAnt Designのような従来のUIライブラリとの根本的な違いは、所有権の概念にあります。従来のライブラリをインストールすると、package.jsonに依存関係が追加されます。アプリケーションは、このパッケージからプリコンパイルされたコンポーネントをインポートします。これは便利ですが、いくつかの欠点があります。

  1. 限定的なカスタマイズ：スタイルのオーバーライドは複雑になる可能性があり、しばしば!importantタグや複雑なテーマプロバイダー設定でライブラリのデフォルトスタイルと戦う必要があります。
  2. ブラックボックスコンポーネント：コンポーネントの内部ロジックはnode_modulesフォルダに隠されています。予期しない動作のデバッグや内部の仕組みの理解が著しく困難になります。
  3. バンドルサイズの肥大化：少数のコンポーネントしか使用しない場合でも、ライブラリ全体、またはそのかなりの部分をインポートすることが多く、アプリケーションの最終的なバンドルサイズが増加する可能性があります。
  4. 依存関係地獄：ライブラリの更新サイクルとその依存関係に縛られます。ライブラリの破壊的な変更により、アプリケーションで大規模なリファクタリングが必要になる場合があります。

HeroUIはこれらの問題を完全に回避します。CLIがコンポーネントのソースコードをプロジェクトのディレクトリ（例: /components/ui）に直接配置することで、いくつかの重要な方法で開発者を力づけます。

この哲学は、ゼロから始めることなく、製品のための独自のデザインシステムを構築したい開発者やチームを対象としています。それは、基盤となる、スタイル付けされていない（または軽くスタイル付けされた）プリミティブを提供し、あなたはブランドアイデンティティを提供します。

主な機能の概要

HeroUIは、単なるインストール方法以上のものです。最新の開発ワークフロー向けに設計された機能が満載です。4

HeroUIは誰のためのものか？

HeroUIは、特定のタイプの開発者とプロジェクトにとって理想的な選択肢です：

最小限の設定で済む、より「箱から出してすぐに使える」、バッテリー付属のソリューションを好む完全な初心者にはあまり適さないかもしれません。HeroUIの力は、その構成可能性にあり、これにはTailwind CSSと最新のフロントエンド開発環境に関する基本的な理解が必要です。

パート2：始める - インストールとセットアップの詳細なウォークスルー

哲学を理解したところで、実際に手を動かしてみましょう。このセクションでは、HeroUIを新規または既存のプロジェクトに統合するための、綿密なステップバイステップガイドを提供します。推奨される最も効率的な方法は、公式のHeroUI CLIを使用することです。16

前提条件

始める前に、開発環境が以下の要件を満たしていることを確認してください。

npx create-next-app@latest my-heroui-app

Next.jsのセットアップ中に、TypeScriptとTailwind CSSを選択することを推奨します。これらはHeroUIエコシステムの基盤となるためです。

HeroUI CLI initコマンド：あなたの出発点

initコマンドは、HeroUIの世界への魔法の入り口です。プロジェクトをインテリジェントに検査し、一連の質問を尋ね、必要なすべてを自動的に設定します。

プロジェクトディレクトリに移動します：Bash

cd my-heroui-app

次に、初期化コマンドを実行します：Bash

npx heroui-cli@latest init

CLIがセットアッププロセスをガイドします。各質問と選択肢の意味を詳しく見ていきましょう。

1. 「どのスタイルを使用しますか？」

2. 「ベースカラーとしてどの色を使用しますか？」

3. 「グローバルCSSファイルはどこにありますか？」

4. 「色にCSS変数を使用しますか？」

5. 「tailwind.config.jsファイルはどこにありますか？」

6. 「コンポーネントのインポートエイリアスを設定します。」

7. 「ユーティリティのインポートエイリアスを設定します。」

8. 「React Server Componentsを使用していますか？」

すべての質問に答えると、CLIはその魔法を実行します。それは以下のことを行います：

これで、プロジェクトは完全に設定され、HeroUIを使用する準備が整いました。

変更点の解剖

CLIが変更または作成した主要なファイルを詳しく見てみましょう。

components.json

このファイルは、プロジェクト内のHeroUIのマニフェストです。initプロセス中に選択した内容を保存し、プロジェクトがどのように設定されているかをCLIに伝えます。JSON

{
  "$schema": "https://www.heroui.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "utils": "@/lib/utils",
    "components": "@/components"
  }
}

このファイルを手動で編集する必要はほとんどありませんが、その目的を理解しておくと役立ちます。これはCLIの操作の頭脳です。

tailwind.config.js

Tailwindの設定は、このように拡張されます。主な追加点は、themeの拡張とtailwindcss-animateプラグインです。JavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        // ... and many more color definitions linked to CSS variables
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // ...
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        // ... keyframes for animations
      },
      animation: {
        // ... animation utilities
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

primaryのような色が、HEXコードではなくhsl(var(--primary))で定義されていることに注目してください。これは、TailwindにグローバルCSSで定義されている--primaryという名前のCSS変数を使用するように指示します。

app/globals.css

このファイルは、デザインシステムのテーマの中心となります。基本のTailwindディレクティブと、CSS変数の大きなブロックが含まれます。CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    /* ... many more variables for the light theme */
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    /* ... many more variables for the dark theme */
  }
}

ここで、この設定の威力を確認できます。すべてのライトテーマの色は:rootスコープで定義され、すべてのダークテーマの色は.darkクラススコープ内で定義されます。<html>要素に.darkクラスが追加されると、ブラウザは自動的にダークテーマの変数を使用します。

パート3：カスタマイズをマスターする - テーマ設定、レイアウト、ダークモード

HeroUIが初期化されたら、本当の楽しみが始まります。それは自分自身のものにすることです。アーキテクチャは、深く直感的なカスタマイズのために明確に設計されています。25

CSS変数によるテーマ設定の技

HeroUIのテーマ設定は、他のライブラリに見られるような複雑なJavaScriptベースのテーマオブジェクトとは異なります。よりシンプルで強力であり、最新のCSS機能を活用しています。テーマ全体（色、ボーダーラディウス、フォント）は、globals.cssファイルで定義されたCSS変数によって制御されます。

色の変更

プライマリブランドカラーを変更したいとしましょう。Tailwindの設定に入る必要はありません。globals.cssで関連するCSS変数を見つけて、その値を変更するだけです。

色はHSL（色相、彩度、明度）値を使用して定義されますが、hsl()ラッパーはありません。例：CSS

:root {
  /* ... */
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  /* ... */
}

.dark {
  /* ... */
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 210 40% 98%;
  /* ... */
}

プライマリカラーを鮮やかな緑に変更するには、オンラインカラーピッカーを使用して選択した色合いのHSL値を見つけ、変数を更新します：CSS

/* In globals.css */
:root {
  /* ... */
  --primary: 142.1 76.2% 36.3%; /* New Green Primary Color */
  --primary-foreground: 355.7 100% 97.3%; /* A contrasting light color for text on the primary color */
  /* ... */
}

.dark {
  /* ... */
  --primary: 142.1 70.2% 46.3%; /* A slightly different green for dark mode */
  --primary-foreground: 355.7 100% 97.3%;
  /* ... */
}

このファイルを保存すると、「primary」色を使用するすべてのコンポーネント（<Button>など）は、アプリケーション全体で瞬時に更新され、この新しい緑色を反映します。これは信じられないほど強力です。

ボーダーラディウスの変更

カードや入力などのコンポーネントの角の丸みは、単一のCSS変数--radiusによって制御されます。CSS

/* In globals.css */
:root {
  /* ... */
  --radius: 0.5rem; /* The default value */
}

よりシャープで角張った外観を好む場合は、この値を減らすことができます：CSS

:root {
  --radius: 0.25rem; /* Less rounded */
}

または、非常にソフトで丸みを帯びた美的感覚のために、これを増やすことができます：CSS

:root {
  --radius: 1.5rem; /* Very rounded */
}

この1行の変更は、すべてのコンポーネントにカスケードされ、UI全体で一貫したボーダーラディウスを保証します。

新しい色の追加

initコマンドによって提供される色に限定されません。独自のセマンティックカラーを簡単に追加できます。たとえば、「special」ブランドカラーを追加してみましょう。

globals.cssでCSS変数を定義します：CSS

/* In globals.css */
:root {
  /* ... */
  --special: 320 86% 59%;
  --special-foreground: 330 100% 98%;
}
.dark {
  /* ... */
  --special: 320 80% 69%;
  --special-foreground: 330 100% 98%;
}

tailwind.config.jsでTailwindに公開します：JavaScript

// In tailwind.config.js
// ...
extend: {
  colors: {
    // ...
    special: {
      DEFAULT: "hsl(var(--special))",
      foreground: "hsl(var(--special-foreground))",
    },
  },
},
// ...

これで、bg-specialやtext-special-foregroundのようなTailwindのユーティリティクラスを使用して、コンポーネントでこれらの色を使用できます。

レスポンシブレイアウトの構築

HeroUIコンポーネントはTailwind CSSで構築されており、これはそれらが本質的にレスポンシブであることを意味します。26 任意のユーティリティクラスでTailwindのレスポンシブプレフィックス（sm:、md:、lg:、xl:）を使用して、異なる画面サイズでコンポーネントのスタイルを変更できます。27

デスクトップでは表示され、モバイルでは折りたたまれるサイドバーを持つシンプルなページレイアウトを構築することを想像してみましょう。HeroUIは低レベルのコンポーネント（Card、Button）を提供しますが、それらをより大きなレイアウトに構成するのはあなたの責任です。

Next.jsのページコンポーネントでこれをどのように構造化するかの例を以下に示します：TypeScript

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export default function DashboardPage() {
  return (
    <div className="flex min-h-screen flex-col md:flex-row">
      {/* Sidebar */}
      <aside className="w-full border-b bg-muted p-4 md:w-64 md:border-b-0 md:border-r">
        <h2 className="text-lg font-semibold">Navigation</h2>
        <nav className="mt-4 flex flex-row space-x-2 md:flex-col md:space-x-0 md:space-y-2">
          <Button variant="ghost" className="justify-start">Dashboard</Button>
          <Button variant="ghost" className="justify-start">Settings</Button>
          <Button variant="ghost" className="justify-start">Profile</Button>
        </nav>
      </aside>

      {/* Main Content */}
      <main className="flex-1 p-8">
        <h1 className="text-4xl font-bold tracking-tight">Dashboard</h1>
        <p className="mt-2 text-muted-foreground">
          Welcome to your dashboard.
        </p>
        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          <Card>
            <CardHeader>
              <CardTitle>Revenue</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">$45,231.89</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Subscriptions</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">+2350</p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Active Users</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-3xl font-bold">+573</p>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  );
}

この例では：

完璧なダークモードの実装

HeroUIの最もエレガントな機能の1つは、ダークモードの組み込みサポートです。29 initコマンドがすでにライト（:root）とダーク（.dark）の両方のテーマのカラー変数を設定しているため、実装は驚くほど簡単です。

最も一般的なアプローチは、テーマ切り替えを処理し、ユーザーの選択をローカルストレージに保持するnext-themesパッケージを使用することです。

next-themesをインストールします：Bash

npm install next-themes

テーマプロバイダーを作成します：

新しいファイルを作成します。例えば、components/theme-provider.tsxに作成します。TypeScript

"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

ルートレイアウトをプロバイダーでラップします：

Next.jsのルートレイアウト（app/layout.tsx）で、ThemeProviderをインポートして使用します。30TypeScript

import { ThemeProvider } from "@/components/theme-provider";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

ここでの主要なpropsは次のとおりです：

ApidogでAPIデザイン中心のアプローチを取る

APIの開発と利用をよりシンプルなことにする方法を発見できる

無料会員登録ダウンロード