TECH
Vol.154
K.M.
今人気のライブラリshadcn/uiを使ってみる
2023 JavaScript Rising Starsにて1位を獲得するなど今人気が高まっているshadcn/uiを使用してフォームやサイトを作成してみました。
shadcn/uiとは
shadcn/uiの特徴は、必要なコンポーネントのみを選択してインストールできる点です。これにより、プロジェクトの要件に応じて軽量で柔軟なコンポーネント構成を実現することができます。
さらに、サイズ面でも広く使用されているMUIやBootstrapとほぼ同等のサイズ（MUIが約100kb、Bootstrapが約81kb、shadcn/uiが約87kb程度）のため、サイトのパフォーマンスにもほとんど影響がありません。
インストール方法
1.プロジェクトの作成
npx create-next-app@latest my-app --typescript --tailwind --eslintを使用してプロジェクトの作成を行います。
2.CLIの実行
npx shadcn-ui@latest initを使用してshaadcn/uiのセットアップを行います。その際いくつか質問をされるので答えていきます。
3.ローカル環境を立ち上げる
npm run devを使用してローカル環境を立ち上げlocalhost:3000を開きます。
4.使用したいコンポーネントをインストールし自由にカスタマイズを行う。
公式サイトのコンポーネントから使用したいコンポーネントをコピ−&ペーストでインストールし、自由にプロジェクトに組み込みます。 例:ボタンをインストールする場合https://ui.shadcn.com/docs/components/buttonから
npx shadcn-ui@latest add buttonを実行してボタンをインストールする。
import { Button } from "@/components/ui/button"を使用したいファイルに記述し、
<Button variant="outline">Button</Button>を使用してボタンコンポーネントを使用する。
フォームを作ってみる
これまでのおさらいと実用的な参考としてフォームの実装手順をご紹介します。
1.必要なコンポーネントをインストールする
npxを用いてコンポーネントのインストールを行います。
npx shadcn-ui@latest add form
npx shadcn-ui@latest add button
npx shadcn-ui@latest add input
npx shadcn-ui@latest add toastshadcn/uiではこのように必要なコンポーネントのみを読み込むことで軽量な動作を実現しています。
2.Form.tsxファイルを作成する
Zodスキーマを使ってフォームを定義します。
"use client"
import { z } from "zod"
const formSchema = z.object({
username: z.string().min(2).max(50),
})3.フォームを定義する
react-hook-formのuseFormフックを使用してフォームの作成を行います。
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
const formSchema = z.object({
username: z.string().min(2, {
message: "Username must be at least 2 characters.",
}),
})
export function ProfileForm() {
// 1. フォームを定義する。
const form = useForm>({
resolver: zodResolver(formSchema),
defaultValues: {
username: "",
},
})
// 2. 送信ハンドラを定義する。
function onSubmit(values: z.infer) {
console.log(values)
}
} 4.フォームの作成する
<Form>コンポーネントが使用できるようになったので、<Form>コンポーネントを使用してフォームの作成を行います。
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { Button } from "@/components/ui/button"
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
const formSchema = z.object({
username: z.string().min(2, {
message: "Username must be at least 2 characters.",
}),
})
export function ProfileForm() {
const form = useForm>({
resolver: zodResolver(formSchema),
defaultValues: {
username: "",
},
})
function onSubmit(values: z.infer) {
console.log(values)
}
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="shadcn" {...field} />
</FormControl>
<FormDescription>
This is your public display name.
</FormDescription>
<FormMessage />
</FormItem>
)}>
</FormField>
<Button type="submit">Submit</Button>
</form>
</Form>
)
} 5.テーマの設定
こちらのリンクからテーマの設定を行うことができます。
設定を行ったのち、Copy codeをクリックすることでコードをコピーできるので、src/app/globals.cssの既存のコードに上書きします。
今回はdefault, green, 0.5, lightを選択しました。
6.出来上がり
特別なスタイリングやアクセシビリティに関する記述をしなくても、キーボード操作が可能な入力フォームができました。
おまけ
今回はその他のコンポーネントなどを組み合わせてサンプルページを作成したので合わせて紹介したいと思います。
https://shadcn-ui-mrh8.vercel.app/
パフォーマンスもとても高いスコアを記録しています。
今後の展望
昨今生成AIを用いた技術革新が日々行われています。
Shadcn/uiも例外でなく、vercel社の開発したv0.devというshadcn/uiを使用したUI生成に特化したAIも登場しており、コピー&ペーストのみで優れたUIを作成することができるようになっています。
また、開発者のXにてAIを組み込みパーソナライズされたドキュメントの作成を行う旨の投稿がありました。おそらく史上初めての取り組みで、筆者も今1番期待している機能です。
上記のように活発に開発、改善が行われているライブラリのため、将来性もあるのではと考えています。
まとめ
shadcn/uiは、RadixuiとTailwindCSSを基盤とした高度にカスタマイズ可能なUIコンポーネントライブラリです。主な特徴として、必要なコンポーネントのみをインストールできる、導入が簡単、豊富なコンポーネントとテーマのカスタマイズなど、柔軟で効率的なUI開発を行うことができます。
さらに、AI技術との連携も進んでおり、v0.devによるshadcn/uiを使用したUI生成AIの登場、パーソナライズされたドキュメント作成のためのAI統合の計画など将来性も高いライブラリだと考えられます。
高速な開発を行いながら、アクセシビリティにも配慮したい開発現場では特に相性がいいライブラリのため筆者もぜひ積極的に活用していきたいと思います。
RECENT POSTS
Vol.198
From parent–child bonds to community: The future of education that nurtures diversity and designs relationships
Vol.197
Exploring the future of environmental design integrating vision, diversity, and a future-oriented perspective
Vol.196
Vision-making for diverse and future-oriented education: Interpreting the future of learning through environmental design
Vol.195
“One Health” and Japan — Toward an Era of Integrating Humans, Animals, and the Environment
Vol.194
The benefits and challenges of digital education in the AI era, and the future of learning
Vol.193
Vision-Making in the age of AI — How artificial intelligence is transforming the meaning of work and the nature of organizations
