# React/TypeScriptでプロダクト選択フォームを作成＆カスタマイズしたまとめ
## 概要
今日はReactとTypeScriptを使い、ECサイト向けの「商品選択フォーム」や「数量コントロール」、「ボタン共通コンポーネント」の実装と、細かいスタイル調整方法について学びました。さらに、Gitのpushコマンドの使い方も復習しました。
---
## 1. Inputコンポーネントのカスタマイズ
```tsx
type InputProps = {
...
borderColor?: string
borderWidth?: string
borderRadius?: string
backgroundColor?: string
textAlign?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end'
}
const Input = ({
...,
borderColor = '#edeae2',
borderWidth = '0.094rem', // 1.5px → rem変換
borderRadius = '0.375rem', // 6px → rem変換
backgroundColor = '#f8f6f2',
textAlign,
}: InputProps) => {
return (
<input
style={{
...,
border: `${borderWidth} solid ${borderColor}`,
borderRadius,
backgroundColor,
textAlign
}}
...
/>
)
}
ポイント
-
textAlignやborderColorなどをpropsで渡して自由にカスタマイズできるようにした。
2. ボタン共通コンポーネントの利用とリスト描画
const buttonList = [
{ name: '今すぐに買う', variant: 'buyNow' },
{ name: 'カートに入れる', variant: 'addCart' },
{ name: 'カートへ', variant: 'gotoCart' },
] as const;
<div className={styles.buttonContainer}>
{buttonList.map(btn => (
<Button
key={btn.name}
name={btn.name}
variant={btn.variant}
/>
))}
</div>
-
variantとCSSクラス名を一致させることでスタイリングを統一。
3. CSSのrem単位変換＆box-sizing調整
.container {
width: 10.9375rem; /* 175px */
height: 16.5625rem; /* 265px */
box-sizing: border-box;
...
}
ポイント
-
box-sizing: border-boxでpaddingやborderを含めてサイズ調整がしやすくなった。 - px→remへの変換式：
1px = 0.0625rem
4. 数量コントロール（QuantityControl）のonChange型問題対応
<QuantityControl
...
onChange={value => {
if (typeof value === 'string') {
const n = parseInt(value, 10)
setRating(Number.isNaN(n) ? 1 : n)
} else {
setRating(value)
}
}}
/>
-
onChangeの型がnumber | stringの場合、stringにも対応できるように変換処理を追加。
5. Gitのリモートブランチへのpushコマンド
git push origin feature/ProductSelectionForm:woo_gibeom
- ローカルの
feature/ProductSelectionFormブランチをリモートのwoo_gibeomブランチにpushする方法。
まとめ・感想
React/TypeScriptでのフォームやコンポーネント設計は「柔軟なprops設計」「型安全性」「共通化」が重要だと感じました。
また、CSSのrem統一・box-sizing調整でレイアウト崩れも防げました。
今後も見た目と機能両面から「再利用性」と「保守性」を意識した設計を続けたいと思います。