最終更新日時
Dec 6, 2024 6:19 AM
コンテンツカテゴリ
活用例
ツール
ChatGPTGitHub Copilot
利用シーン
実装/ドキュメントからコードを生成する
テクニック
レベル
初級
要件が決まり、ベースとなる処理を作成したい時は生成AIにより生成を行うことができます。
‣
GitHub Copilot
‣
このサイトはCookieを使用しています。サイトの使用を続けることで、Cookieの使用に同意することになります。
要件が決まり、ベースとなる処理を作成したい時は生成AIにより生成を行うことができます。
あなたは優秀なエンジニアです。
以下の{#要件}を元にソースコードを生成してください
#要件
- ユーザー登録ページを作る
- 登録ページには下記の入力要素がある
- 名前
- 性別
- メールアドレス
- パスワード
- Reactを使う
- ReactHookFormとZodを用いてバリデーションを行う
- submit時はaxiosを用いてPOSTリクエストを送信するあなたは優秀なエンジニアです。
以下の{#要件}を元にソースコードを生成してください
#要件
- ユーザー登録ページを作る
- 登録ページには下記の入力要素がある
- 名前
- 性別
- メールアドレス
- パスワード
- Reactを使う
- ReactHookFormとZodを用いてバリデーションを行う
- submit時はaxiosを用いてPOSTリクエストを送信するimport React from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import axios from 'axios';
// Zodでのバリデーションスキーマ
const schema = z.object({
name: z.string().min(1, '名前は必須です'),
gender: z.enum(['male', 'female', 'other'], '性別を選択してください'),
email: z.string().email('有効なメールアドレスを入力してください'),
password: z.string().min(6, 'パスワードは6文字以上で入力してください')
});
type FormData = z.infer<typeof schema>;
const RegistrationForm: React.FC = () => {
const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
resolver: zodResolver(schema)
});
const onSubmit: SubmitHandler<FormData> = data => {
axios.post('/register', data)
.then(response => {
// 登録成功時の処理
console.log(response.data);
})
.catch(error => {
// エラー処理
console.error(error);
});
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<label>名前:</label>
<input type="text" {...register('name')} />
{errors.name && <p>{errors.name.message}</p>}
</div>
<div>
<label>性別:</label>
<select {...register('gender')}>
<option value="male">男性</option>
<option value="female">女性</option>
<option value="other">その他</option>
</select>
{errors.gender && <p>{errors.gender.message}</p>}
</div>
<div>
<label>メールアドレス:</label>
<input type="email" {...register('email')} />
{errors.email && <p>{errors.email.message}</p>}
</div>
<div>
<label>パスワード:</label>
<input type="password" {...register('password')} />
{errors.password && <p>{errors.password.message}</p>}
</div>
<button type="submit">登録</button>
</form>
);
};
export default RegistrationForm;