はじめに
Reactで画像を表示する際、単純なタグではなく、
**再利用しやすく・拡張性が高い「画像コンポーネント」**を作ることで
開発効率やデザイン統一性が大きく向上します。
本記事では、実務で本当に使えるReact画像コンポーネントの実装パターンと
注意点、よく使うCSS・propsの設計ノウハウまで一気にまとめます。
- 最もシンプルな画像コンポーネント
tsx
type ImageProps = {
src: string;
alt: string;
};
const Image = ({ src, alt }: ImageProps) => (
);
export default Image;
ここから発展させるポイント
サイズ変更
スタイル追加
ラウンド処理（角丸）
インラインstyleやclassNameの拡張対応
- サイズ（width/height）の柔軟な対応
px/%, remなど様々な単位をサポート
tsx
type ImageProps = {
src: string;
alt: string;
width?: number | string; // px, rem, %
height?: number | string;
};
const getSize = (value?: number | string, fallback = "100px") => {
if (typeof value === "number") return ${value}px;
if (typeof value === "string") return value;
return fallback;
};
const Image = ({
src,
alt,
width,
height,
style,
...rest
}: ImageProps & { style?: React.CSSProperties }) => (
<img
src={src}
alt={alt}
style={{
width: getSize(width),
height: getSize(height),
...style,
}}
{...rest}
/>
);
export default Image;
HTML属性のwidth/heightはpxのみ対応なので、styleで渡すのがポイント
%やremなど自由に指定可能
- 角丸・ラウンド（border-radius）対応
tsx
const Image = ({
src,
alt,
width,
height,
borderRadius = "14px",
style,
...rest
}: ImageProps & { borderRadius?: string; style?: React.CSSProperties }) => (
<img
src={src}
alt={alt}
style={{
width: getSize(width),
height: getSize(height),
borderRadius,
...style,
}}
{...rest}
/>
);
Figmaなどデザインツールの「Corner radius: 14」は → CSSのborder-radius: 14pxと同じ
- よく使うimgのCSSプロパティ
border-radius: 角丸、アバター・カード画像に
object-fit: cover: 比率キープ＆トリミング
box-shadow: 影
max-width: 100%: レスポンシブ
filter: グレースケールやぼかし
aspect-ratio: アスペクト比固定(最新)
transition: hover時アニメーション
css
.image {
width: 100px;
height: 100px;
border-radius: 14px;
object-fit: cover;
box-shadow: 0 4px 12px rgba(0,0,0,0.13);
max-width: 100%;
transition: box-shadow 0.2s;
}
.image:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.19);
}
5. クラス/スタイルの柔軟な拡張
classNameもpropsで受け取り合成可能に
styleも外部から上書きできると自由度UP
tsx
const Image = ({
src,
alt,
width,
height,
borderRadius = "14px",
className = "",
style,
...rest
}: ImageProps & { borderRadius?: string; style?: React.CSSProperties; className?: string }) => (
<img
src={src}
alt={alt}
className={image ${className}}
style={{
width: getSize(width),
height: getSize(height),
borderRadius,
...style,
}}
{...rest}
/>
);
6. 注意点まとめ
width/heightをHTML属性で渡す場合は「pxのみ」対応
rem/%/vwなどを使うならstyleで渡す
border-radius等の見た目プロパティはstyle/classNameで自由に拡張
外部CSS, モジュールCSS, Tailwindなど全て対応可能
インラインstyleが最優先、次にclassName(CSS)、最後にHTML属性順で適用
まとめ
「画像コンポーネント」と一口に言っても、
props設計
style/classNameの合成・優先順位
CSSプロパティの選定
など、実務では意外と奥が深いです。
本記事のサンプルをベースに、
あなたのチーム/サービスのデザインシステムや要件に合わせて拡張してみてください！
おまけ:
FigmaのCorner radius = CSSのborder-radius (px単位)でOK！