[React] Reactの基本 - コンポーネントとJSX

1. Reactとは？

Reactの概要

Reactは、UIを効率的に作成するためのJavaScriptライブラリです。特に、コンポーネント指向という思想を採用しており、UIの各部分を再利用可能な小さな部品として管理します。これにより、複雑なUIでも、シンプルに扱えるようになります。

Reactは仮想DOMを使って、効率的にUIを更新します。これにより、画面の再描画を最小限に抑えることができ、アプリケーションのパフォーマンスを向上させます。

Reactの特徴

  • 宣言的：状態が変わると、自動的にUIが更新される。
  • コンポーネントベース：UIを小さなコンポーネントに分けて再利用できる。
  • 効率的な更新：仮想DOMを使用して、最小限の更新で済む。

2. コンポーネントとは？

Reactでは、コンポーネントがUIを構成する基本単位です。コンポーネントは、UIの一部であり、データ（props）を受け取って描画します。

関数型コンポーネント

Reactのコンポーネントは、主に関数型コンポーネントで作成されます。これにより、シンプルで効率的なコードが書けます。

const Greeting = () => {
  return <h1>Hello, React!</h1>;
};

このコンポーネントは、<h1>Hello, React!</h1>というHTMLを表示します。関数型コンポーネントは、Reactの基本的なコンポーネントとして使用されます。

クラス型コンポーネント

Reactには、クラス型コンポーネントという古い書き方もありますが、現在は関数型コンポーネントが主流です。クラス型コンポーネントでは、renderメソッドを使ってUIを返します。

class Greeting extends React.Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}

3. JSXとは？

JSXは、JavaScript内でHTMLライクなコードを記述するための構文です。JSXはブラウザに直接解釈されるわけではなく、React.createElementという関数を通じて実際のHTMLに変換されます。

const element = <h1>Hello, world!</h1>;

JSXでは、JavaScript内でHTML要素を直接書けるため、非常に直感的でわかりやすいコードが書けます。

JSXの特徴

  • HTMLに似た構文を使って、React要素を作成できる。
  • JSX内で動的なデータを埋め込むことができる（{}）。
  • 属性はキャメルケース（例えば、classではなくclassName）。
const name = "React";
const element = <h1>Hello, {name}!</h1>;

JSXの注意点

  • JSXは、JavaScriptの式の中にHTMLを埋め込むため、{}を使って動的な値を埋め込むことができます。
  • JSXのタグは必ず閉じる必要があります（例：<img />、<br />）。

4. Props（プロパティ）の使い方

Propsは、コンポーネント間でデータを受け渡すための仕組みです。
親コンポーネントから子コンポーネントにデータを渡す際に使います。

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

<Greeting name="React" />;

この例では、nameというプロパティを子コンポーネントで受け取り、それを表示しています。Propsは、親コンポーネントから子コンポーネントに渡すデータです。

Propsの特徴

  • 読み取り専用であり、子コンポーネントで変更することはできません。
  • 親コンポーネントから子コンポーネントへ一方向にデータが流れます。

5. State（状態）の使い方

Reactでは、コンポーネント内部で状態を持つことができます。
これをstateと言います。stateはコンポーネント内で変更されるデータを管理するためのものです。

Reactで状態を管理するためには、useStateというフックを使います。

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

useStateは、初期状態（この例では0）を受け取り、状態の現在の値（count）と、その状態を更新する関数（setCount）を返します。

Stateの特徴

  • コンポーネントの状態を保持するため、ユーザーの入力やボタンのクリックなどで動的に更新されます。
  • 状態が変わると、コンポーネントが再レンダリングされ、UIが更新されます。

6. コンポーネントのライフサイクル

Reactでは、コンポーネントがマウント（生成） され、更新 され、アンマウント（破棄） されるというライフサイクルがあります。
関数型コンポーネントでそのライフサイクルを扱うためには、useEffectフックを使用します。

import React, { useState, useEffect } from "react";

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds + 1);
    }, 1000);

    return () => clearInterval(interval); // クリーンアップ
  }, [seconds]);

  return <p>Time passed: {seconds}s</p>;
};

useEffectは、コンポーネントがレンダリングされた後に実行される副作用を扱います。また、クリーンアップ関数を返すことで、コンポーネントがアンマウントされる際に不要な処理をキャンセルできます。

7. まとめ

この記事では、Reactの基本的な概念と、コンポーネント、JSX、Props、State、そしてライフサイクルについて深堀しました。

次回は、イベントハンドリングやフォームの管理について、さらに進んだ内容を扱います。

過去記事