FormKitってなに？
- Vue3, Nuxt3 でフォームを作るときに便利なライブラリだよ
- FormKitひとつあれば、フォームに関すること（バリデーションやテーマ設定、国際化など）をすべて対応できるよ
- JSONにシリアライズできるオブジェクト（スキーマ）で、フォームを生成できるよ
まだ日本語の記事をほぼ見かけないけれど、実際に使ってみて便利だなと思ったから、今回紹介してみる。
何が良いの？（個人的な感想）
- JSONにシリアライズできる簡潔なオブジェクトでフォーム生成できるのがとっても好き
- TailwindCSSとの噛み合わせも良い
- バリデーションもシンプル
- 公式ドキュメントがとてつもなく分かりやすい（大事）
- カスタムinputも簡単に作れる
実際にコード見せてよ
じゃあ、下記の条件を満たすフォームを作ってみるよ。
- 名前を入力して、submitで関数を実行できる
- 必須バリデーションあり
- 名前は30文字まで
こんな感じ
<script setup lang="ts">
import { FormKitSchemaNode } from '@formkit/core';
// 名前を入力するスキーマを定義（前述のJSONにシリアライズできる云々はこれ）
const nameFormSchema: FormKitSchemaNode = {
$cmp: "FormKit",
props: {
type: "text",
label: "名前",
name: "nameForm",
// 必須 + 文字列の長さは 0文字から30文字 まで
validation: "required|length:0,30",
// 検証タイミングはユーザがinputの値を変更した後
validationVisibility: "dirty",
// バリデーションの内容によってエラーメッセージを出しわけ
validationMessages: {
required: "名前を入力してください",
length: "名前は30文字以内で入力してください。",
}
}
};
// 表示させたいフォームのスキーマを登録（複数可）
const schema = [nameFormSchema];
const submit = async (e: {nameForm: string}) => {
// 好きな処理を実装してね （フォームのname属性をキー、入力値がvalueのオブジェクトが手に入る）
console.log(e);
};
</script>
<template>
<FormKit
type="form"
@submit="submit"
submit-label="登録する"
incomplete-message="入力内容に不備があるよ">
<FormKitSchema :schema="schema"/>
</FormKit>
</template>
これだけで、前述の条件を満たすフォームができた。
コード中の FormKitSchemaNode は見ての通りフォームのname属性やラベル、バリデーションの内容を定義するスキーマになっていて、これが冒頭で書いた「JSONにシリアライズできるオブジェクトでフォームを生成できる」機能だよ。
シリアライズ可能だから、JSONに変換してフォームそのものをユーザごとに個別でDBに保存するなんてこともできるね。
あとがき
今回は簡単な紹介だからここまでだけど、FormKitはカスタマイズも自在で、デザインをいじったり、 FormKitSchemaNode として扱える自作Inputもコンポーネントとして作れるから、要件に合わせた柔軟かつ迅速な実装を進めていくことができるよ。
▼ FormKitでカスタムInputを作るドキュメントはここ
よかったら使ってみてね！（使う人が増えたら、きっともっと良くなっていくと思うから）
著者プロフィール
faable01です。かつては創作仲間と小説を書いたり、製菓業界で楽しくやっていたはずが、紆余曲折を経て、サーバーレス技術を触るのが好きなITエンジニアになっていました。AWSのIaC兼サーバレス爆速開発ツール 「SST」 が好きです。個人ブログでもたまに記事を書いています。
それから、業務日報SaaS 「RevisNote」 を運営しています。リッチテキストでの日報と、短文SNS感のある分報を書けるのが特徴で、組織に所属する人数での従量課金制です。アカウント開設後すぐ使えて、無料プランもあるから、気軽にお試しください。