Zenn
📝

shadcn/uiとconformによるTextareaの実装ガイド

2024/07/20に公開
zod
shadcn/ui
conform
tech

関連記事

このシリーズの他の記事もご覧ください：

これらの記事を組み合わせることで、shadcn/uiとconformを使用した包括的なフォーム実装の知識を得ることができます。

概要

この記事では、shadcn/uiとconformを使用して基本的なTextareaを実装する方法を解説します。長文入力やマルチラインテキストの取り扱いについて、スキーマ定義と実装例を提供します。

shadcn/ui の Textarea コンポーネント自体の仕様や使い方については、公式サイトをご覧ください。

https://ui.shadcn.com/docs/components/textarea

セットアップ

まず、必要なライブラリをインポートします。

import { getTextareaProps, useForm } from '@conform-to/react'
import { getZodConstraint, parseWithZod } from '@conform-to/zod'
import { z } from 'zod'
import { Textarea } from '~/components/ui/textarea'
import { Label } from '~/components/ui/label'

基本的なフォーム構造は以下のようになります：

export default function TextareaForm() {
  const [form, fields] = useForm({
    onValidate: ({ formData }) => parseWithZod(formData, { schema }),
    constraint: getZodConstraint(schema),
    shouldValidate: 'onBlur',
    shouldRevalidate: 'onInput',
  })

  return (
    <form {...getFormProps(form)} method="post">
      {/* Textarea field will be placed here */}
    </form>
  )
}

実装例

以下、基本的なTextareaのスキーマ定義と実装例を示します。

基本的なTextarea

スキーマ定義:

const schema = z.object({
  basicTextarea: z
    .string({ required_error: '必須' })
    .min(10, { message: '10文字以上入力してください' })
    .max(1000, { message: '1000文字以内で入力してください' }),
})

実装例:

<div>
  <Label htmlFor={fields.basicTextarea.id}>基本的なTextarea</Label>
  <Textarea
    placeholder="ここに長文を入力してください"
    {...getTextareaProps(fields.basicTextarea)}
    key={fields.basicTextarea.key}
  />
  <div id={fields.basicTextarea.errorId} className="text-destructive">
    {fields.basicTextarea.errors}
  </div>
</div>

デバッグとテスト

フォームの値とエラーを確認するためのデバッグセクションを追加することができます：

<div>
  <h3>フォームの値</h3>
  <pre>{JSON.stringify(form.value, null, 2)}</pre>
</div>
<div>
  <h3>フォームのエラー</h3>
  <pre>{JSON.stringify(form.allErrors, null, 2)}</pre>
</div>

これにより、フォームの状態を簡単に確認できます。

デモと実装例

本記事で解説した内容の実際の動作を確認したい場合は、以下のデモページをご覧ください：

shadcn-uiとconformを使用したフォーム実装デモ

このデモページでは、shadcn/uiとconformを組み合わせた様々なフォーム要素の実装例を見ることができます。各要素の動作を確認でき、実際のユーザー体験を把握するのに役立ちます。

また、デモページからは実装のソースコードにもアクセスできます。ソースコードを参照することで、本記事で説明した実装方法がどのように適用されているかを詳細に確認できます。

デモとソースコードを併せて確認することで、理論と実践の両面から理解を深めることができます。ぜひ、デモページを訪れて、実際の動作とコードの詳細を確認してみてください。

まとめ

shadcn/uiとconformを組み合わせることで、基本的なTextareaを簡単に実装できます。適切なバリデーションとエラーハンドリングを行うことで、ユーザーフレンドリーな長文入力フォームを作成することができます。

次回は、Selectの実装について詳しく解説します。お楽しみに！

GitHubで編集を提案

Discussion