🔔 本の下書きプレビューをシェアできるようになりました
Zenn
😸

laravel 12 starter kit(react)のui(shadcn/ui)以外に最初からあるcomponentの使い方

2025/03/03に公開
1
laravel12
tech

resources/js/components/ 以下

resources/js/components/
├── appearance-dropdown.tsx
├── appearance-tabs.tsx
...
└── ui
    ├── alert.tsx
    ├── avatar.tsx
...

このような構成で諸々配置されている。

この中でresources/js/components/ui/ 以下は shadcn/ui(vueでは shadcn-vue)のファイルになっている。これに関しては後日解説を書くとして、その上位に追いてあるコンポーネントをどのように呼び出すとよいかという点にフォーカスした記事にしている。といっても大量にあるけど実際には3つ(4つ)しかない。

ヘッダ系 (heading.tsx, heading-small.tsx)

<h2 className="text-xl font-bold">H2: components/ui/alert.tsx</h2>
<Heading title="Heading: components/ui/alert.tsx" />
<HeadingSmall title="HeadingSmall: components/ui/alert.tsx" />

こんな感じでmargin付きのヘッダーが与えられてh2とかをベタで書くより調整される。それとdescriptionがある

<h2 className="text-xl font-bold">H2: components/ui/alert.tsx</h2>
<Heading
  title="Heading: components/ui/alert.tsx"
  description="This is a primary heading used for main sections."
/>

<HeadingSmall
  title="HeadingSmall: components/ui/alert.tsx"
  description="This is a secondary heading used for smaller sections."
/>

このようにタイトル + 説明というデザインで統一できるので、h2、h3を使うなら使っといてもいいかもしれない。

TextLinkコンポーネント

<div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
  <Heading title="components/ui/alert.tsx" />
  <p>
    <strong>TextLink:</strong>{' '}
    <TextLink href="#">Link</TextLink>
  </p>

  <p>
    <strong>A tag:</strong>{' '}
    <a href="#" className="text-blue-600 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
      Link
    </a>
  </p>
</div>

結構シンプルさがある。

中身は

    <Link
      className={cn(
        'text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500',
        className
      )}
      {...props}
    >
      {children}
    </Link>

このようにダークモード対応になっている。このcn[1]によりクラスをmergeできる。たとえば赤にする場合

<p>
  <strong>TextLink:</strong>{' '}
  <TextLink href="#">Link</TextLink>
</p>
<p>
  <strong>TextLink (Red):</strong>{' '}
  <TextLink href="#" className="text-red-500">Link</TextLink>
</p>

<p>
  <strong>A tag:</strong>{' '}
  <a href="#" className="text-blue-600 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
    Link
  </a>
</p>

となるわけだ。

InputError

これは基本的にフォームと一緒に使われるのだが、基本的にエラーメッセージが無いときは出ないようになっている。

<div className="space-y-2">
  <Label htmlFor="example-input">Example Input</Label>
  <Input
    id="example-input"
    type="text"
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
    onBlur={validateInput}
    className="w-full"
  />
  <InputError message={error} />
</div>

これは後日formの組み立て型と一緒に解説するつもりだが(余裕あれば)、このようにdefaultでは赤を基調とした色でエラーメッセージを出す仕様になっている。

その他のコンポーネントを含むまとめ

レイアウトを弄るとか以外の自作のビューで呼び出されるのはここまでで紹介したコンポーネントでほとんど完了する(もちろん自分で追加してもよいが、あくまで最初から配置されているものの解説)。それ以外を以下の表でまとめる。

コンポーネント名 説明 主な用途
appearance-dropdown.tsx テーマ切り替え用のドロップダウンメニューを提供する ダークモード/ライトモードの変更
appearance-tabs.tsx テーマ切り替え用のタブUIを提供する テーマ設定
app-content.tsx レイアウトのコンテンツ部分を管理 main エリアの管理
app-header.tsx アプリケーションのヘッダー部分 ナビゲーションやアバターの表示
app-logo-icon.tsx アプリケーションのロゴアイコンを提供 小サイズのロゴ表示
app-logo.tsx アプリケーションのロゴコンポーネント メインロゴの表示
app-shell.tsx アプリケーション全体のレイアウト管理 レイアウト全体の構成
app-sidebar-header.tsx サイドバーのヘッダー部分 サイドバーのタイトルや操作ボタン
app-sidebar.tsx アプリケーションのサイドバー メニューやナビゲーションの管理
breadcrumbs.tsx パンくずリストの表示 ユーザーが現在のページを確認
delete-user.tsx ユーザーアカウント削除のUI アカウント削除の確認と実行
heading-small.tsx 小サイズの見出しコンポーネント セクションタイトルの表示
heading.tsx 通常サイズの見出しコンポーネント 大きめのセクションタイトル表示
icon.tsx アイコンコンポーネント 汎用的なアイコン表示
input-error.tsx 入力エラー表示 フォームエラーの表示
nav-footer.tsx フッターナビゲーション ドキュメントや外部リンクの表示
nav-main.tsx メインナビゲーション メインのメニュー項目管理
nav-user.tsx ユーザーナビゲーション ユーザー情報や設定メニュー
text-link.tsx a タグのラッパー スタイル付きのリンク表示
user-info.tsx ユーザー情報表示 ユーザーのアイコンと名前を表示
user-menu-content.tsx ユーザーメニューの内容 設定やログアウトメニュー

結局

同じディレクトリにばばっと置いてあるのでちょっとわかり辛いんだよね...

脚注

  1. resources/js/lib/utils.tsに存在 ↩︎

1

Discussion