🅰️

Reactでボタンをコンポーネントを作る

2024/08/13に公開

React

TypeScript

styled-components

tech

コンポーネントとは？

英語を直訳すると...

構成要素。部品。
- コンピュータ機器やソフトウェアの部品。
- ステレオで、チューナー・アンプ・プレーヤー・スピーカーなどの単独の機器。コンポ。

ボタンを部品化してみた。styled-componentsを使っているので、MUIやTailWindCSSなど他のFWを使いたい人はそちらでやってみてください。

styled-componentsの良かったところは、同じファイルに、普通のCSSを書いてどの部品に、スタイルを適用しているか判断できるところですかね。コードの保管機能がないのが辛いですが😅

import styled from 'styled-components'

const Button = styled.button`
  display: inline-block;
    width: 300px;
    max-width: 100%;
    padding: 20px 10px;
    background-color: #e25c00;
    border: 2px solid transparent;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 16);
    color: #fff;
    font-size: 1.125rem,;
    text-align: center;
    text-decoration: none;
    transform: 25s;

    &:hover {
        background-color: #ff6a00;
    }
}
`

interface ButtonProps {
  onClick: () => void;
  title: string;
}

const ButtonComponent = ({ onClick, title }: ButtonProps) => {

  return (
    <div>
        <Button onClick={onClick}>{title}</Button>
    </div>
  )
}

export default ButtonComponent

インターフェースを定義します。これをPropsの引数のデータ型に使います。そうすると、void型のfunctionと、stringのテキストを渡せるようになります。

interface ButtonProps {
  onClick: () => void;
  title: string;
}

使うときは、こんな感じでシンプルすぎますが、functionとタイトルの文字を渡せます。Flutterの経験者の感覚だと、voidCallbackのメンバー変数とStringのメンバー変数があるクラスのコンポーネントに渡すのと同じ感覚ですね。

import ButtonComponent from "./ui-component/ButtonComponent";
const onButtonClick = () => {
  alert('ボタンがクリックされました');
}

function App() {
  return (
    <div className="App">
      <ButtonComponent onClick={onButtonClick} title={"ボタン"} />
    </div>
  );
}

export default App;

まとめ

ざっくりとですが、関数もコンポーネントに渡すのを解説してみました。Reactは趣味でしか書いてなかったので、仕事で使うことになったから、理解を深めていきたい。

コンポーネントとは？

まとめ

Discussion