入力欄にメールアドレスを入力したら、 リアルタイムでバリデーションしたい
メールバリデーションを実装しますね。
const [email, setEmail] = useState('')
const [error, setError] = useState('')
const validateEmail = (value) => {
const regex = /^[^\s@]+@[^\s@]+$/
if (!regex.test(value)) {
setError('メールアドレスが無効')
} else {
setError('')
}
}AIがコードを生成した後、そのコードに関するクイズが出題される。 なぜこう書くのか、他の書き方はないか、を考えることで、 単なるコピペではなく、本当に理解したコードになる。
このコードで使われている正規表現は、何をチェックしていますか？
正解！この正規表現は、標準的なメールアドレスの形式をチェックしています。
ボタンをクリックしたら、のように日本語でやりたいことを伝えるだけ
要件に合ったコードをAIが生成する。コメント付きでわかりやすい
生成されたコードについてクイズを出題する。コピペで終わらせない
4ステップで、生成されたコードを自分のものにできる
〜したい、〜を実装したいなど、自然な言葉で入力
AIが生成したコードを読んで、動作を理解
理解度を確認するクイズに挑戦。間違えても大丈夫
理解した上でコードを使用。応用も効くように
フォームバリデーション、API呼び出し、状態管理など、 定番のパターンをサッと生成できる。
やりたいことはわかるけど、どう書けばいいかわからない。 そんな時に最適なコードを提案する。
初めて使うライブラリやフレームワークでも、 まずはコードを生成して動きを理解できる。
まずは動くものを作りたい時に。 クイズで理解を深めながら、実装を進められる。