💅
TypeScriptを用いたButtonコンポーネントの作り方
TypeScriptとstyled-componentsを使用して、カスタマイズ可能で再利用性の高いボタンコンポーネントを作成する方法を紹介します。
完成はこのようなボタンになります
まず、完成したButtonコンポーネントの基本的なコード構造を見てみましょう。
コンポーネントのコード
PrimaryBtn.tsx
import styled from "styled-components";
import React, { ButtonHTMLAttributes, ReactNode } from "react";
const PrimaryBtn = ({
children,
...props
}: ButtonHTMLAttributes<HTMLButtonElement> & { children: ReactNode }) => {
return <SPrimaryBtn {...props}>{children}</SPrimaryBtn>;
};
const SPrimaryBtn = styled.button`
background-color: #ff8d06;
color: #fff;
border: none;
font-weight: bold;
cursor: pointer;
padding: 8px 16px;
border-radius: 4px;
`;
export default PrimaryBtn;
コンポーネントの解説
Propsの構造
PrimaryBtn.tsx
const PrimaryBtn = ({
children,
...props
}: ButtonHTM.....
PrimaryBtnコンポーネントは、親のpropsをchildrenとその他のpropsを...propsとして分けています。
こうすることによってchildrenと...propsを区別して使用することができるようになります
コンポーネントの型
PrimaryBtn.tsx
children,
...props
}: ButtonHTMLAttributes<HTMLButtonElement> & { children: ReactNode }) => {.....
ButtonHTMLAttributes<HTMLButtonElement>とchildrenという2つの型を組み合わせています。これにより、標準のHTMLボタン要素が持つすべての属性をサポートし、さらにReactの子要素も受け取ることができます。
スプレッド構文の活用
PrimaryBtn.tsx
return <SPrimaryBtn {...props}>{children}</SPrimaryBtn>;
SPrimaryBtnタグ内で{...props}を使用することで、PrimaryBtnに渡されたすべてのプロパティ（例えばtype="button"など）をSPrimaryBtnに渡します。これにより、標準のHTMLボタン要素の属性をそのままカスタムボタンに適用することができます。
スタイリング
PrimaryBtn.tsx
const SPrimaryBtn = styled.button`
background-color: #ff8d06;
color: #fff;
border: none;
font-weight: bold;
cursor: pointer;
padding: 8px 16px;
border-radius: 4px;
`;
styled.buttonを使ってSPrimaryBtnというスタイルが適用されたボタンを定義しています。このスタイル定義により、背景色、テキスト色、境界線の有無、フォントの太さ、カーソルの形状、パディング、ボーダーラジウスなどが設定されています。
コンポーネントの使用例
このコンポーネントは以下のように使用できます。
App.tsx
<PrimaryBtn type="button">ボタン</PrimaryBtn>
完成版のコードです
Discussion