フロントエンド開発 / 約25分
AIが書いたコンポーネントをレビューする
なぜこれを学ぶか
AIに「ボタンコンポーネント作って」と頼むと、一見動くコードが返ってきます。しかし本番で使える品質かは、あなたが判断しなければなりません。
AI生成コードによくある問題: アクセシビリティの欠如、不要な再レンダリング、エラー処理の欠如、ハードコードされた値 です。
例えば <div onClick={...}> は動きますが、キーボード操作できず、スクリーンリーダーにも認識されません。<button> を使うべきです。
再レンダリング問題では、インラインのオブジェクトや関数が毎回新しい参照を作り、子コンポーネントの memo を無効化するパターンが典型です。
レビューのコツは「動くか」ではなく「壊れる条件を列挙する」こと。ネットワークが遅い時は？ 空データの時は？ 日本語と英語が混ざった長いテキストは？
重要ポイント
- div onClick → button を使う（a11y）
- インラインオブジェクトは毎回新しい参照を作る
- レビューは「壊れる条件の列挙」から
コードレビュー演習
AIに「ユーザー一覧を表示するコンポーネント」を書かせたところ、以下のコードが返ってきました。本番投入前にあなたが指摘すべき最も重大な問題はどれ？
function UserList() {
const [users, setUsers] = useState([])
useEffect(() => {
fetch('/api/users')
.then(res => res.json())
.then(data => setUsers(data))
}, [])
return (
<div>
{users.map(u => (
<div onClick={() => alert(u.name)}>
{u.name}
</div>
))}
</div>
)
}このコードの最も重大な問題は？
ヒントを見る
「動くか」ではなく「壊れる条件」を列挙してみましょう。APIが失敗したら？ ネットワークが遅かったら？ 結果が0件だったら？ — 画面はユーザーに何を伝えるでしょうか。
コーディング演習実際に書く
XSS対策の基礎であるHTMLエスケープ関数を書いてください。文字列中の & < > " をそれぞれ & < > " に置換して返します。重要: & は最初に置換しないと、後で置換した < 等の & が二重エスケープされます。
function escapeHtml(str)
スキルセルフチェック
このレッスンの内容をどの程度理解できましたか？