【React基礎学習2】ReactのComponentについて解説

JavaScript
2021.06.23

こんにちは、かつコーチです。

ReactはComponentベースで開発されています。

Reactのコンポーネントは、UIを独立した再利用可能な部品（部品やパーツ）として

構築する基本単位です。

コンポーネントは、アプリケーションの特定の機能やUIの部分を表現します。

Reactアプリケーションは複数のコンポーネントを組み合わせて構築されており、

それぞれのコンポーネントが特定の責務を持ち、必要に応じてデータを受け渡しながら連携します。

コンポーネントの種類

Reactには主に以下の2種類のコンポーネントがあります：

  1. 関数コンポーネント（Functional Component）
    • こちらはReactの推奨される方法で、JavaScriptの関数としてコンポーネントを定義します。Hooksを利用することで状態管理や副作用（例：API呼び出しなど）を簡単に扱うことができます。
  2. クラスコンポーネント（Class Component）
    • 古くからある方法で、JavaScriptのクラスを使ってコンポーネントを定義します。関数コンポーネントにHooksが導入されるまでは、状態管理やライフサイクルメソッドを扱うためにクラスコンポーネントが必要でしたが、現在ではあまり推奨されていません。

関数コンポーネントの基本構造

まずは、関数コンポーネントの基本構造を見てみましょう。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

上記のWelcomeコンポーネントは単純な関数です。

この関数はpropsという入力を受け取り、Hello, {props.name}という文字列を返します。

このように、Reactのコンポーネントは関数としてUIを定義するものです。

JSX（JavaScript XML）

Reactのコンポーネントでは、通常のJavaScriptコードに加えてJSXという構文を使用します。

JSXは、HTMLに似た記法でUIの見た目を定義できるため、

視覚的にわかりやすいという利点があります。

JSXはJavaScript内でHTMLライクな要素を直接書けるのが特徴です。

コンポーネントの例

1. Buttonコンポーネント

まず、シンプルなボタンを表示するButtonコンポーネントを作ってみましょう。

function Button(props) {
  return <button>{props.label}</button>;
}

このButtonコンポーネントは、labelというprops（外部から渡される値）を受け取って、

その値をボタンに表示します。使うときには次のように書きます：

<Button label="Click Me" />

この例では、「Click Me」というラベルがボタンに表示されます。

2. クリックイベント付きのボタン

次に、ボタンがクリックされたときに何かを行うようなボタンを作ってみます。

function ButtonWithAction(props) {
  return <button onClick={props.onClick}>{props.label}</button>;
}

このボタンコンポーネントは、クリックされたときにonClickという関数を呼び出します。使用例：

function App() {
  function handleClick() {
    alert("Button clicked!");
  }

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

この場合、ボタンがクリックされるとアラートが表示されます。

Reactでは、このようにしてユーザーインタラクションを簡単に扱うことができます。

3. 入力フィールドコンポーネント

次に、テキスト入力フィールドを扱うコンポーネントを見てみましょう。

function TextInput(props) {
  return (
    <div>
      <label>{props.label}</label>
      <input type="text" value={props.value} onChange={props.onChange} />
    </div>
  );
}

このTextInputコンポーネントは、labelでラベルを表示し、valueを使って入力値を管理します。

また、入力が変更されたときにonChange関数を呼び出します。

使用例：

function App() {
  const [name, setName] = React.useState("");

  return (
    <div>
      <TextInput
        label="Your Name: "
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>Hello, {name}</p>
    </div>
  );
}

この例では、ユーザーが入力フィールドに名前を入力すると、

その名前が画面にリアルタイムで表示されます。

4. カードレイアウトのコンポーネント

次に、少し複雑なコンポーネントとして、カードレイアウトを作成してみます。

カードはよくUIの中で使われるもので、情報を整理して表示する際に便利です。

function Card(props) {
  return (
    <div style={{ border: "1px solid #ccc", padding: "16px", borderRadius: "8px" }}>
      <h2>{props.title}</h2>
      <p>{props.content}</p>
    </div>
  );
}

このCardコンポーネントは、titleとcontentという2つのpropsを受け取って、

簡単な情報をカード形式で表示します。

使用例：

function App() {
  return (
    <div>
      <Card title="React Basics" content="Learn how to use React to build UIs." />
      <Card title="Component Reusability" content="Build reusable components in React." />
    </div>
  );
}

この場合、2つのカードが表示され、それぞれ異なるタイトルと内容を持っています。

5. リストを表示するコンポーネント

次に、リストアイテムを表示するためのコンポーネントを見てみます。

function ItemList(props) {
  return (
    <ul>
      {props.items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

このItemListコンポーネントは、itemsという配列を受け取り、その配列の内容をリスト表示します。

使用例：

function App() {
  const fruits = ["Apple", "Banana", "Cherry"];

  return (
    <div>
      <h1>Fruit List</h1>
      <ItemList items={fruits} />
    </div>
  );
}

この場合、”Apple”, “Banana”, “Cherry”の3つのアイテムがリストとして表示されます。

6. モーダルダイアログコンポーネント

最後に、より実用的なコンポーネントとして、モーダルダイアログを作成してみます。

function Modal(props) {
  if (!props.isVisible) {
    return null;
  }

  return (
    <div style={{ position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)", backgroundColor: "#fff", padding: "20px", zIndex: 1000 }}>
      <h2>{props.title}</h2>
      <p>{props.content}</p>
      <button onClick={props.onClose}>Close</button>
    </div>
  );
}

このModalコンポーネントは、isVisibleがtrueのときだけ表示されるようになっており、

タイトルと内容を表示します。

また、”Close”ボタンをクリックするとモーダルが閉じられます。

使用例：

function App() {
  const [isModalVisible, setModalVisible] = React.useState(false);

  return (
    <div>
      <button onClick={() => setModalVisible(true)}>Show Modal</button>
      <Modal
        isVisible={isModalVisible}
        title="Important Information"
        content="This is the modal content."
        onClose={() => setModalVisible(false)}
      />
    </div>
  );
}

この場合、”Show Modal”ボタンをクリックするとモーダルが表示され、”Close”ボタンを押すと閉じます。

結論

Reactのコンポーネントは、UIを小さく分割し、それぞれが独立して動作することで、

コードの再利用性やメンテナンス性を高めることができます。

コンポーネントは、それぞれが他のコンポーネントと協力して機能し、UI全体を構築します。

今回紹介したボタン、入力フィールド、カード、リスト、モーダルなどは、

ReactでのUI構築の基本的な例ですが、これを応用して複雑なUIも簡単に実現できます。

タイトルとURLをコピーしました