カスタムコンポーネントと JSX で HTML を拡張：React、TypeScript、TSX を使った実践ガイド

2024-04-27

ReactJS、TypeScript、TSX を用いて HTML 要素を拡張し、props を保持する方法

概要

なぜ HTML 要素を拡張するのか？

HTML 要素は、Web アプリケーションの基盤となるものです。しかし、標準の HTML 要素では、常に必要な機能が提供されているわけではありません。そのような場合、HTML 要素を拡張することで、アプリケーションに必要な機能を追加することができます。

HTML 要素を拡張するには、以下の 2 つの方法があります。

カスタムコンポーネントは、HTML 要素を再利用可能なテンプレートとして定義するものです。カスタムコンポーネントを使用すると、HTML 要素に props を渡したり、状態を管理したりすることができます。

JSX で拡張する

JSX は、JavaScript に似ている拡張マークアップ言語です。JSX を使用すると、HTML 要素にカスタム属性を追加したり、JavaScript コードを埋め込んだりすることができます。

props を保持する方法

HTML 要素を拡張する際には、props を保持することが重要です。props は、コンポーネントにデータを渡すための方法です。

props を明示的に渡すには、<MyComponent> タグに props 属性を追加する必要があります。

<MyComponent props={{ name: 'John Doe', age: 30 }} />

props をデフォルト値で設定するには、MyComponent コンポーネントの defaultProps プロパティを使用する必要があります。

MyComponent.defaultProps = {
  name: 'John Doe',
  age: 30,
};

例

以下は、MyButton というカスタムコンポーネントを作成し、label と onClick props を保持する方法を示した例です。

import React from 'react';

interface MyButtonProps {
  label: string;
  onClick: () => void;
}

const MyButton: React.FC<MyButtonProps> = ({ label, onClick }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};

export default MyButton;

import React from 'react';
import MyButton from './MyButton';

const App: React.FC = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <MyButton label="Click me" onClick={handleClick} />
    </div>
  );
};

export default App;

ReactJS、TypeScript、TSX を使用して、HTML 要素を拡張し、props を保持する方法について説明しました。この方法は、Web アプリケーションの開発において非常に役立ちます。

サンプルコード：ReactJS、TypeScript、TSX を用いて HTML 要素を拡張し、props を保持する

MyButton.tsx

import React from 'react';

interface MyButtonProps {
  label: string;
  onClick: () => void;
}

const MyButton: React.FC<MyButtonProps> = ({ label, onClick }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};

export default MyButton;

App.tsx

import React from 'react';
import MyButton from './MyButton';

const App: React.FC = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <MyButton label="Click me" onClick={handleClick} />
    </div>
  );
};

export default App;