概要
本記事では、Reactで関数コンポーネントを実装する際の基本構文に基づく構造について、具体的なコードを例に分解・整理します。
以下のコンポーネントを用いて解説します：
-
LoginForm: ログイン用のフォーム -
InputField: 入力用コンポーネント（多言語プレースホルダ対応）
LoginFormの構造
コード全体
LoginForm.tsx
export const LoginForm: React.FC<LoginFormProps> = ({
onLogin,
disabled = false
}) => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (onLogin) onLogin(username, password);
};
return (
<form
data-testid="login-form"
onSubmit={handleSubmit}
style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 300 }}
>
<InputField
value={username}
onChange={e => setUsername(e.target.value)}
placeholderKey="input.enterUsername"
name="username"
disabled={disabled}
/>
<InputField
value={password}
onChange={e => setPassword(e.target.value)}
placeholderKey="input.enterPassword"
name="password"
type="password"
disabled={disabled}
/>
<Button
labelKey="button.login"
type="submit"
primary={true}
disabled={disabled}
/>
</form>
);
};
React基本構文に基づく構造
1. 関数定義セクション
export const LoginForm: React.FC<LoginFormProps> = ({
onLogin,
disabled = false
}) => {
-
React.FC型を使用して関数コンポーネントを定義 - Propsで
onLogin（親から渡されるログイン処理）とdisabled（入力無効制御）を受け取ります
2. 状態管理セクション
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
- フォームの入力内容をuseStateで状態管理します
-
username,passwordの状態を保持し、入力に応じて変化
3. イベントハンドラーセクション
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (onLogin) onLogin(username, password);
};
- フォーム送信時の動作を定義
-
preventDefault()によりページリロードを防止し、onLogin()を呼び出します
4. JSX返却セクション
A. フォーム要素
<form
data-testid="login-form"
onSubmit={handleSubmit}
style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 300 }}
>
-
<form>要素を使用し、ログインフォームを構成 - インラインスタイルでレイアウト指定
B. 子コンポーネント
<InputField ... />
<InputField ... />
<Button ... />
-
InputField: i18nextに対応した入力欄（ユーザー名・パスワード） -
Button: ログインボタン（多言語ラベルを表示）
InputFieldの構造
コード全体
InputField.tsx
export const InputField: React.FC<InputFieldProps> = ({
value,
onChange,
placeholderKey = '',
type = 'text',
name,
disabled = false,
style,
}) => {
const { t } = useTranslation();
let placeholderText = '';
if (placeholderKey) {
placeholderText = t(placeholderKey);
}
return (
<input
className="input-field"
type={type}
name={name}
value={value}
onChange={onChange}
placeholder={placeholderText}
disabled={disabled}
style={style}
data-testid="input-field"
/>
);
};
React基本構文に基づく構造
1. 関数定義セクション
export const InputField: React.FC<InputFieldProps> = ({
...
}) => {
- 関数コンポーネントとして定義
- Propsとして
value,onChange,type,name,disabled,placeholderKey,styleを受け取る -
placeholderKeyによってi18nextによる多言語対応を可能にしている
2. 状態管理セクション
-
無し
- このコンポーネントは状態を内部に持たない（Stateless Component）
-
valueやonChangeなどの制御は、すべて外部（親）から受け取って使用される
3. イベントハンドラーセクション
-
無し
- フォーム入力時の
onChange処理はProps経由で外部から渡される - イベント処理を内部で定義せず、柔軟に再利用可能
- フォーム入力時の
4. JSX返却セクション
A. フォーム要素
<input
className="input-field"
type={type}
name={name}
value={value}
onChange={onChange}
placeholder={placeholderText}
disabled={disabled}
style={style}
data-testid="input-field"
/>
- 標準のHTMLの
<input>要素を返却 - 入力種別や名前、プレースホルダ、スタイルなどをPropsで動的に制御
-
placeholderはi18nextのt()により翻訳文字列として表示
B. 子コンポーネント
-
無し
- 単一の
<input>タグのみで構成されており、子コンポーネントは含まない
- 単一の
まとめ
本記事では、以下のポイントを中心にReactフォームの構造を整理しました：
- Reactコンポーネントを構造で理解する（関数定義〜JSX構成）
- i18nextを活用した多言語対応の実装方法
- 子コンポーネント化による再利用性の向上