プログラミング

Reactの基本と実践ガイド

最終更新： 28/03/2025
1 分の読み

Reactは、ユーザーインターフェイス（UI）を構築するためのJavaScriptライブラリで、Facebookによって開発され、現在は広く使われています。特に、シングルページアプリケーション（SPA）の構築において非常に強力で、効率的なツールです。このガイドでは、Reactの基本的な概念から実践的な使い方まで、段階的に学んでいきます。

1. Reactとは何か？

Reactは、コンポーネントベースのライブラリです。コンポーネントは、UIの小さな部品で、これを組み合わせることでアプリケーション全体を構築します。Reactの特徴的なポイントは、状態管理と仮想DOM（Virtual DOM）による高速な更新処理です。

関連記事

2. Reactの基本的な仕組み

Reactの基本的な仕組みを理解するには、以下の2つの概念が重要です。

2.1 コンポーネント

ReactではUIを「コンポーネント」という単位で構築します。コンポーネントは、HTMLやCSS、JavaScriptのコードを1つのファイルでまとめて扱うことができる「JSX（JavaScript XML）」という記法を用いて作成します。

jsx
import React from 'react';

function HelloWorld() {
  return <h1>Hello, World!h1>;
}

export default HelloWorld;

この例では、HelloWorldというコンポーネントを作成し、その中にh1タグで「Hello, World!」と表示しています。Reactでは、コンポーネントを再利用して、効率的にUIを作成することができます。

2.2 JSX（JavaScript XML）

JSXは、HTMLとJavaScriptを組み合わせた構文です。Reactでは、JSXを使ってコンポーネントの構造を定義します。JSXは見た目がHTMLに似ていますが、実際にはJavaScriptのコードであるため、動的に要素を生成したり、変数を埋め込んだりすることができます。

jsx
const name = 'React';
const element = <h1>Hello, {name}h1>;

上記のコードでは、{name}が変数を埋め込んでおり、「Hello, React」と表示されます。

3. Reactの状態管理（State）

Reactでの状態管理は、コンポーネントが動的に変化する要素を保持するために非常に重要です。状態（State）は、コンポーネント内で変更されるデータを格納するためのものです。例えば、ボタンをクリックするとカウントが増えるようなアプリケーションを作成することができます。

jsx
import React, { useState } from 'react';

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

  return (
    <div>
      <p>カウント: {count}p>
      <button onClick={() => setCount(count + 1)}>カウントを増やすbutton>
    div>
  );
}

export default Counter;

useStateはReactのフック（Hooks）で、状態変数を作成し、それを更新するための関数setCountを提供します。ボタンがクリックされるたびに、countが更新され、UIが再描画されます。

4. Reactのイベントハンドリング

Reactでは、HTMLのイベントリスナーをJavaScriptで設定する代わりに、Reactのイベントハンドラーを使います。例えば、ボタンをクリックしたときに関数を実行する場合、onClickプロパティを使って処理を記述します。

jsx
function MyButton() {
  const handleClick = () => {
    alert('ボタンがクリックされました');
  };

  return <button onClick={handleClick}>クリックして！button>;
}

5. Reactのライフサイクル

Reactコンポーネントにはライフサイクルがあり、特定のタイミングでコードを実行することができます。クラスコンポーネントを使用している場合、ライフサイクルメソッド（例えばcomponentDidMountなど）を使って処理を行うことができます。しかし、現在では関数コンポーネントとフック（useEffectなど）を使って、ライフサイクル管理を行うことが主流です。

jsx
import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('コンポーネントがマウントされました');
  }, []); // 空の配列を指定すると、初回マウント時のみ実行されます。

  return <div>コンポーネントdiv>;
}

6. React Routerでのルーティング

Reactで複数ページのアプリケーションを作成する場合、React Routerを使用してページ遷移を管理します。React Routerは、URLに基づいて適切なコンポーネントを表示するためのライブラリです。

bash
npm install react-router-dom

基本的な使用方法は次の通りです。

jsx
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
      Switch>
    Router>
  );
}

BrowserRouterを使って、アプリケーションのルーティングを管理します。Routeコンポーネントでは、特定のURLパスに対して表示するコンポーネントを指定します。

7. Reactのフック（Hooks）

Reactのフック（Hooks）は、関数コンポーネントで状態や副作用を扱うための新しい方法です。代表的なフックとして、useStateやuseEffectがあります。

7.1 useState

useStateは状態変数を管理するためのフックで、前述したように状態を追加するために使います。

7.2 useEffect

useEffectは副作用（APIの呼び出しやイベントリスナーの設定など）を扱うためのフックです。例えば、コンポーネントがマウントされた後にデータを取得する処理を行いたい場合に使います。

jsx
import React, { useState, useEffect } from 'react';

function FetchData() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空の配列を指定すると、最初のレンダリング時のみ実行されます。

  if (!data) return <p>データを読み込み中...p>;

  return <div>{JSON.stringify(data)}div>;
}

8. コンポーネントの状態とプロパティ

Reactのコンポーネントは「状態（State）」と「プロパティ（Props）」を使ってデータを管理します。propsは親コンポーネントから子コンポーネントに渡されるデータで、stateはコンポーネント内部で管理される動的なデータです。

jsx
function Greeting(props) {
  return <h1>{props.message}h1>;
}

function App() {
  return <Greeting message="こんにちは、React!" />;
}

Greetingコンポーネントは、親コンポーネントAppからmessageをpropsとして受け取り、それを表示します。

9. Reactの最適化

Reactでは、パフォーマンスを最適化するためにいくつかの技術があります。例えば、React.memoを使ってコンポーネントの再描画を最適化したり、useMemoやuseCallbackを使って不要な再計算を避けたりします。

jsx
const MemoizedComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}div>;
});

React.memoは、コンポーネントが同じpropsで再レンダリングされないようにするための高階コンポーネントです。

10. Reactのデバッグ

React開発者ツールを使うことで、Reactのコンポーネントツリーを視覚的に確認したり、状態を管理したりすることができます。また、コンソールにエラーメッセージが表示されるので、開発中にバグを素早く修正できます。

結論

Reactは非常

最終更新： 28/03/2025
1 分の読み
Back to top button