TypeScriptでReactのrefを正しく型定義する方法を徹底解説

ReactとTypeScriptを組み合わせることで、堅牢で型安全なアプリケーションを構築することができます。しかし、DOM操作やコンポーネントへの直接的なアクセスが必要な場面で使用されるrefについて、正しい型定義ができていないと、エラーや予期しない挙動に繋がることがあります。本記事では、TypeScriptでReactのrefを正しく型定義するための方法を初心者にもわかりやすく解説し、実際のプロジェクトで役立つ知識を身につけるサポートをします。

Reactのrefとは何か

ref（reference）は、Reactにおいて特定のDOM要素やクラスコンポーネントへの直接的なアクセスを可能にする仕組みです。通常、Reactは仮想DOMを介してUIを管理しますが、refを使用することで、以下のような特定の場面で直接操作が必要なケースを補完できます。

refの主な用途

DOM要素へのアクセス
フォームの入力フィールドやボタンなどのDOM要素に直接アクセスして操作を行う場合に使用します。例えば、フォーカスを設定したり、スクロール位置を調整する場合です。
非制御コンポーネントのデータ取得
フォームデータを取得する際、refを使用することで非制御コンポーネントから値を簡単に取得できます。
カスタムコンポーネントへのアクセス
クラスコンポーネントやカスタムの関数コンポーネントにアクセスして、その内部メソッドや状態を操作する際に使用します。

Reactでのrefの基本的な使い方

Reactでrefを使用するには、以下の2つの方法があります。

1. createRefを使用

クラスコンポーネントで主に使用される方法です。

import React, { createRef, Component } from 'react';

class MyComponent extends Component {
  private myRef = createRef<HTMLDivElement>();

  componentDidMount() {
    if (this.myRef.current) {
      this.myRef.current.style.backgroundColor = "lightblue";
    }
  }

  render() {
    return <div ref={this.myRef}>Hello, ref!</div>;
  }
}

2. useRefを使用

関数コンポーネントで使用されるフックです。

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

const MyComponent = () => {
  const myRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (myRef.current) {
      myRef.current.style.backgroundColor = "lightgreen";
    }
  }, []);

  return <div ref={myRef}>Hello, useRef!</div>;
};

refは便利な反面、乱用するとReactの「宣言的UI」という設計思想を損なう可能性があります。そのため、必要な場面でのみ慎重に使用することが重要です。

TypeScriptでrefの型を定義する基礎

TypeScriptとReactを組み合わせる際、refを正しく型定義することで、型安全で予測可能なコードを実現できます。特に、DOM要素やカスタムコンポーネントへのアクセスにおいて、型定義は重要な役割を果たします。ここでは、TypeScriptでrefを型定義する基礎について解説します。

useRefを使用した型定義

useRefを使用する場合、refに型を明示的に指定することで、TypeScriptに正しい情報を提供できます。

HTML要素への型定義

特定のHTML要素をターゲットにする場合、HTMLXXXElement型を使用します。

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

const MyComponent = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return <input ref={inputRef} placeholder="Type here" />;
};

このコードでは、inputRefにHTMLInputElement型を指定することで、TypeScriptが適切な型チェックを行い、誤った操作を防ぎます。

カスタム型の使用

refをオブジェクトやカスタムクラスに適用する場合、任意の型を指定できます。

import React, { useRef } from 'react';

class CustomClass {
  doSomething() {
    console.log("Action performed!");
  }
}

const MyComponent = () => {
  const customRef = useRef<CustomClass>(new CustomClass());

  const handleClick = () => {
    customRef.current?.doSomething();
  };

  return <button onClick={handleClick}>Click Me</button>;
};

createRefを使用した型定義

クラスコンポーネントでは、createRefを使用して型定義を行います。

import React, { createRef, Component } from 'react';

class MyComponent extends Component {
  private divRef = createRef<HTMLDivElement>();

  componentDidMount() {
    if (this.divRef.current) {
      this.divRef.current.textContent = "Hello, world!";
    }
  }

  render() {
    return <div ref={this.divRef}></div>;
  }
}

ここでは、divRefにHTMLDivElement型を指定しており、TypeScriptがDOM操作を適切に補完します。

any型の使用は避ける

refを型定義する際、any型を使用すると型安全性が失われます。代わりに、具体的な型を明示することで、意図しないエラーを防ぐことができます。

型定義を正しく行うことで、コードの可読性と保守性が向上し、開発者間での統一したスタイルを確立できます。

特定のHTML要素を対象とした型定義

Reactのrefを使用する際、特定のHTML要素をターゲットにする場合があります。TypeScriptでは、HTMLXXXElement型を用いてそれぞれのHTML要素に対応する型を明確に指定することで、型安全なコードを実現できます。以下では、よく使用されるHTML要素を対象とした型定義の方法を解説します。

基本的なHTML要素の型定義

Reactのrefを特定のHTML要素に型定義するには、useRefフックに適切なHTML要素型を指定します。

ボタン要素の型定義

ボタン要素にアクセスし、その状態を操作する場合の例です。

import React, { useRef } from 'react';

const ButtonComponent = () => {
  const buttonRef = useRef<HTMLButtonElement>(null);

  const handleClick = () => {
    if (buttonRef.current) {
      buttonRef.current.disabled = true;
      buttonRef.current.textContent = "Clicked!";
    }
  };

  return <button ref={buttonRef} onClick={handleClick}>Click Me</button>;
};

ここでは、buttonRefにHTMLButtonElement型を指定しています。この型により、TypeScriptがボタン要素の特性を認識し、コード補完と型チェックを提供します。

入力フィールドの型定義

フォームの入力フィールドを操作する場合、HTMLInputElement型を使用します。

import React, { useRef } from 'react';

const InputComponent = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleFocus = () => {
    inputRef.current?.focus();
  };

  return (
    <div>
      <input ref={inputRef} placeholder="Type here" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

この例では、inputRefがHTMLInputElement型に限定されることで、型エラーを防ぎつつコード補完を活用できます。

特殊なHTML要素の型定義

特定の状況では、通常のHTML要素以外の型が必要になる場合があります。

Canvas要素の型定義

Canvas要素にアクセスして描画操作を行う場合、HTMLCanvasElement型を使用します。

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

const CanvasComponent = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (canvasRef.current) {
      const ctx = canvasRef.current.getContext('2d');
      if (ctx) {
        ctx.fillStyle = "red";
        ctx.fillRect(10, 10, 50, 50);
      }
    }
  }, []);

  return <canvas ref={canvasRef} width={200} height={100}></canvas>;
};

このコードでは、Canvas要素に特化したHTMLCanvasElement型を指定し、描画操作を安全に行っています。

複数の要素を扱う場合の型定義

同じコンポーネント内で複数のHTML要素を扱う場合、それぞれのrefに適切な型を設定することが推奨されます。

import React, { useRef } from 'react';

const MultiRefComponent = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  const divRef = useRef<HTMLDivElement>(null);

  const handleClick = () => {
    if (inputRef.current) inputRef.current.value = "Updated!";
    if (divRef.current) divRef.current.style.backgroundColor = "yellow";
  };

  return (
    <div>
      <input ref={inputRef} placeholder="Type here" />
      <div ref={divRef}>This is a div</div>
      <button onClick={handleClick}>Update</button>
    </div>
  );
};

ここでは、inputRefとdivRefそれぞれに対応するHTML要素型を設定しています。

まとめ

特定のHTML要素に対して型を適切に設定することで、コードの型安全性が向上し、意図しないエラーを防ぐことができます。TypeScriptの型システムを活用することで、より信頼性の高いReactアプリケーションを構築できます。

カスタムコンポーネントへのrefの型定義

Reactではカスタムコンポーネントを作成し、それにrefを渡すことで内部のDOMや関数にアクセスすることが可能です。しかし、TypeScriptでこれを実現するには、適切に型定義を行う必要があります。ここでは、カスタムコンポーネントへのrefの型定義方法を解説します。

forwardRefを使用したカスタムコンポーネント

ReactのforwardRefを使用することで、親コンポーネントから子コンポーネントにrefを渡すことができます。このとき、TypeScriptではReact.Ref型を用いて型定義を行います。

基本的なforwardRefの型定義

以下は、単純なカスタムコンポーネントでforwardRefを使用する例です。

import React, { forwardRef, useRef } from 'react';

type InputProps = {
  placeholder?: string;
};

const CustomInput = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
  return <input ref={ref} placeholder={props.placeholder} />;
});

const ParentComponent = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  const focusInput = () => {
    inputRef.current?.focus();
  };

  return (
    <div>
      <CustomInput ref={inputRef} placeholder="Type here" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

export default ParentComponent;

ここでは、CustomInputにHTMLInputElement型のrefを受け取るように型定義しています。

型のジェネリクスを活用

汎用性を持たせたい場合、ジェネリクスを活用して柔軟な型定義を行えます。

import React, { forwardRef } from 'react';

type GenericInputProps<T> = {
  value?: T;
  onChange?: (value: T) => void;
};

const GenericInput = forwardRef<HTMLInputElement, GenericInputProps<string>>(
  (props, ref) => {
    return <input ref={ref} value={props.value} onChange={(e) => props.onChange?.(e.target.value)} />;
  }
);

ここでは、GenericInputが受け取る値の型をジェネリクスで指定しています。

useImperativeHandleを使用したメソッドの公開

カスタムコンポーネントにrefを使用して特定のメソッドを公開したい場合、useImperativeHandleを使用します。

カスタムメソッドを公開する例

import React, { forwardRef, useRef, useImperativeHandle } from 'react';

type CustomInputHandle = {
  focus: () => void;
  clear: () => void;
};

const CustomInput = forwardRef<CustomInputHandle, {}>((_, ref) => {
  const inputRef = useRef<HTMLInputElement>(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    },
    clear: () => {
      if (inputRef.current) inputRef.current.value = "";
    },
  }));

  return <input ref={inputRef} />;
});

const ParentComponent = () => {
  const inputHandleRef = useRef<CustomInputHandle>(null);

  const handleFocus = () => inputHandleRef.current?.focus();
  const handleClear = () => inputHandleRef.current?.clear();

  return (
    <div>
      <CustomInput ref={inputHandleRef} />
      <button onClick={handleFocus}>Focus</button>
      <button onClick={handleClear}>Clear</button>
    </div>
  );
};

export default ParentComponent;

ここでは、CustomInputがfocusとclearメソッドを公開しており、親コンポーネントから操作可能です。useImperativeHandleを使用して、公開するインターフェースをTypeScriptで明確に型定義しています。

まとめ

カスタムコンポーネントにrefを渡す際には、forwardRefとuseImperativeHandleを適切に使用することが重要です。これにより、カスタムメソッドの公開や型安全な設計が可能になります。TypeScriptを活用して型定義を明確に行うことで、リーダブルで保守性の高いコードを構築できます。

Nullableなrefの型定義の考慮点

Reactのrefは、初期値がnullである場合が多いため、TypeScriptではnullを許容する型を定義する必要があります。これを考慮しないと、コードの安全性や柔軟性が損なわれる可能性があります。ここでは、nullableなrefの型定義におけるポイントとその適切な使用方法を解説します。

useRefでnullableな型を定義する

ReactのuseRefを使用する場合、初期値としてnullを設定する必要があることが多いため、型定義には| nullを含める必要があります。

基本的な例

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

const MyComponent = () => {
  const divRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (divRef.current) {
      divRef.current.style.backgroundColor = "lightblue";
    }
  }, []);

  return <div ref={divRef}>Hello, nullable ref!</div>;
};

この例では、divRefがHTMLDivElement | null型で定義されているため、divRef.currentがnullである可能性を考慮したコードが書けます。

TypeScriptの`strictNullChecks`オプション

TypeScriptのstrictNullChecksが有効になっている場合、nullが含まれる可能性を明示的にチェックする必要があります。

例: Nullableなチェック

const handleAction = () => {
  if (divRef.current) {
    // nullでない場合にのみ処理を実行
    divRef.current.textContent = "Updated content!";
  } else {
    console.warn("Ref is null, no action taken.");
  }
};

このように、nullチェックを必ず行うことで、安全なコードを書くことができます。

Nullable refを使う理由

Reactのライフサイクルでは、refがnullになりうるタイミングが存在するため、初期値を考慮した設計が必要です。

1. 初期値としてのnull

refはコンポーネントがマウントされるまではnullです。これを型として許容することで、エラーを防ぎます。

2. 動的なDOM操作

refを動的に変更する場合、nullに戻る可能性があります。このため、| null型で定義しておくことが推奨されます。

nullable型を持つrefの活用例

以下は、複数のrefを動的に管理するケースです。

import React, { useRef } from 'react';

const DynamicRefs = () => {
  const firstRef = useRef<HTMLDivElement | null>(null);
  const secondRef = useRef<HTMLDivElement | null>(null);

  const toggleHighlight = (target: "first" | "second") => {
    if (target === "first" && firstRef.current) {
      firstRef.current.style.backgroundColor = "yellow";
    } else if (target === "second" && secondRef.current) {
      secondRef.current.style.backgroundColor = "lightgreen";
    }
  };

  return (
    <div>
      <div ref={firstRef}>First Element</div>
      <div ref={secondRef}>Second Element</div>
      <button onClick={() => toggleHighlight("first")}>Highlight First</button>
      <button onClick={() => toggleHighlight("second")}>Highlight Second</button>
    </div>
  );
};

このコードでは、2つのrefがnullを許容する型として定義されています。動的な操作を行う際に、nullチェックを通じて安全性が確保されています。

TypeScriptの型推論とnull許容型

useRefで初期値を設定しない場合、TypeScriptは自動的に| null型を推論します。以下の例では、nullを許容する型が推論されています。

const refWithoutType = useRef<HTMLDivElement>(null); // 推論: HTMLDivElement | null

ただし、初期値を設定する場合は型指定が必要です。

まとめ

ReactのrefをTypeScriptで型定義する際は、nullを許容する設計が重要です。strictNullChecksを利用して明示的にチェックを行うことで、予期しないエラーを防ぎつつ、安全で直感的なコードを書くことが可能になります。nullableな型を適切に管理することで、型安全性を損なうことなく柔軟なアプリケーションを構築できます。

refに関するTypeScriptのエラーハンドリング

Reactでrefを使用する際に、TypeScriptの型チェックによりエラーが発生する場合があります。これらのエラーを理解し、適切に対応することは、型安全なコードを維持する上で重要です。本章では、refに関するよくあるエラーの原因とその解決策を解説します。

1. 型の不一致エラー

TypeScriptでは、refの型と実際に参照する要素の型が一致しない場合にエラーが発生します。

例: 型の不一致エラー

const divRef = useRef<HTMLInputElement | null>(null);

return <div ref={divRef}>This will cause an error</div>;

このコードでは、divRefの型がHTMLInputElementに設定されていますが、実際に参照している要素はdivタグであるため型エラーが発生します。

解決策

divRefの型をHTMLDivElement | nullに変更します。

const divRef = useRef<HTMLDivElement | null>(null);

return <div ref={divRef}>This will work correctly</div>;

型を適切に指定することでエラーを防ぐことができます。

2. 未初期化のrefを参照しようとするエラー

初期化されていないrefを操作しようとすると、TypeScriptがエラーを検出します。

例: 未初期化のrefを参照

const inputRef = useRef<HTMLInputElement>(null);

const handleFocus = () => {
  inputRef.current.focus(); // エラー: 'null'である可能性があります
};

このエラーは、inputRef.currentがnullである可能性を考慮していないために発生します。

解決策

nullチェックを追加して、未初期化の状態をハンドリングします。

const handleFocus = () => {
  if (inputRef.current) {
    inputRef.current.focus();
  }
};

または、TypeScriptのオプショナルチェーン演算子を使用して簡潔に記述できます。

inputRef.current?.focus();

3. forwardRefの型定義エラー

forwardRefを使用する際、型定義が適切でないとエラーが発生することがあります。

例: forwardRefで型を指定していない場合

const CustomInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

このコードでは、refの型が明示されていないため、型エラーが発生する可能性があります。

解決策

forwardRefに適切な型を指定します。

const CustomInput = forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
  (props, ref) => {
    return <input ref={ref} {...props} />;
  }
);

型を明示することで、refとpropsの両方に型安全性を確保できます。

4. refの誤用によるランタイムエラー

refを不適切に使用すると、ランタイムエラーが発生する場合があります。例えば、関数コンポーネントに直接refを渡そうとするとエラーになります。

例: 関数コンポーネントにrefを渡す

const CustomComponent = () => {
  return <div>Custom Component</div>;
};

const parentRef = useRef(null);

return <CustomComponent ref={parentRef} />; // エラー: Functional components cannot have refs

解決策

forwardRefを使用してrefをサポートします。

const CustomComponent = forwardRef<HTMLDivElement, {}>((props, ref) => {
  return <div ref={ref}>Custom Component</div>;
});

これにより、関数コンポーネントでrefを正しく使用できます。

5. 汎用的なエラーハンドリングのベストプラクティス

型定義を明確にする: refの対象となる要素やカスタムコンポーネントの型を正確に指定します。
nullを考慮する: 初期値がnullであることを考慮し、必ずnullチェックを行います。
エラーの早期発見: TypeScriptの設定でstrictNullChecksを有効にし、型の不整合を早期に検出します。
forwardRefの使用: 関数コンポーネントでrefをサポートする際はforwardRefを必ず使用します。

まとめ

TypeScriptの型安全性を活かすことで、refに関するエラーを未然に防ぐことができます。正しい型定義とエラーハンドリングを徹底することで、Reactアプリケーションの保守性と安定性を向上させることが可能です。

実際のプロジェクトでの応用例

TypeScriptでReactのrefを正しく型定義することは、実際のプロジェクトにおいて非常に重要です。特に、フォームの管理やアニメーション制御、外部ライブラリとの統合など、さまざまな場面で活用されます。本章では、実際のプロジェクトでのrefの応用例をいくつか紹介します。

1. フォーム入力のフォーカス管理

フォームで特定の入力フィールドにフォーカスを設定するケースはよくあります。useRefを使用して簡単に実現できます。

例: フォーム入力フィールドのフォーカス

import React, { useRef } from 'react';

const LoginForm = () => {
  const usernameRef = useRef<HTMLInputElement | null>(null);

  const focusUsername = () => {
    usernameRef.current?.focus();
  };

  return (
    <div>
      <input ref={usernameRef} placeholder="Username" />
      <button onClick={focusUsername}>Focus Username</button>
    </div>
  );
};

この例では、ボタンをクリックするとusernameRefに関連付けられた入力フィールドがフォーカスされます。

2. アニメーション制御

DOM要素にアニメーションを適用する際にも、refを使用して要素に直接アクセスすることができます。

例: ボタンのアニメーション

import React, { useRef } from 'react';

const AnimatedButton = () => {
  const buttonRef = useRef<HTMLButtonElement | null>(null);

  const animateButton = () => {
    if (buttonRef.current) {
      buttonRef.current.style.transition = "transform 0.3s";
      buttonRef.current.style.transform = "scale(1.2)";
      setTimeout(() => {
        buttonRef.current!.style.transform = "scale(1)";
      }, 300);
    }
  };

  return <button ref={buttonRef} onClick={animateButton}>Click Me</button>;
};

このコードでは、クリック時にボタンが一時的に拡大するアニメーションが適用されます。

3. モーダルの外部クリック検出

モーダルコンポーネントを作成する際、refを使用して外部クリックを検出する方法があります。

例: モーダル外部クリックの検出

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

const Modal = ({ onClose }: { onClose: () => void }) => {
  const modalRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
        onClose();
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [onClose]);

  return (
    <div ref={modalRef} style={{ padding: "20px", background: "white", border: "1px solid black" }}>
      <p>This is a modal. Click outside to close it.</p>
    </div>
  );
};

export default Modal;

この例では、モーダルの外部クリックを検出し、モーダルを閉じる処理を行います。

4. カスタムスクロール処理

スクロール可能な要素の位置を制御するケースにもrefが活用されます。

例: スクロール位置の制御

import React, { useRef } from 'react';

const ScrollBox = () => {
  const boxRef = useRef<HTMLDivElement | null>(null);

  const scrollToBottom = () => {
    if (boxRef.current) {
      boxRef.current.scrollTop = boxRef.current.scrollHeight;
    }
  };

  return (
    <div>
      <div
        ref={boxRef}
        style={{
          height: "150px",
          overflowY: "scroll",
          border: "1px solid black",
        }}
      >
        {[...Array(50)].map((_, index) => (
          <p key={index}>Item {index + 1}</p>
        ))}
      </div>
      <button onClick={scrollToBottom}>Scroll to Bottom</button>
    </div>
  );
};

このコードでは、スクロールボックスのスクロール位置をボタン操作で調整します。

5. 外部ライブラリとの統合

外部ライブラリをReactと統合する際にもrefが利用されます。例えば、Canvas描画ライブラリやグラフ描画ライブラリを使用する場合、refを通じて特定の要素にアクセスします。

例: Chart.jsを使用したグラフ描画

import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

const ChartComponent = () => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);

  useEffect(() => {
    if (canvasRef.current) {
      new Chart(canvasRef.current, {
        type: 'bar',
        data: {
          labels: ['Red', 'Blue', 'Yellow'],
          datasets: [
            {
              label: 'Votes',
              data: [12, 19, 3],
              backgroundColor: ['red', 'blue', 'yellow'],
            },
          ],
        },
      });
    }
  }, []);

  return <canvas ref={canvasRef}></canvas>;
};

export default ChartComponent;

この例では、Chart.jsライブラリを使用してグラフを描画しています。

まとめ

実際のプロジェクトでは、refを使用してフォーム管理、アニメーション制御、外部クリック検出、スクロール処理、外部ライブラリの統合など、さまざまなユースケースを実現できます。これらの例を参考に、実用的で型安全なReactアプリケーションを構築してください。

学習を深めるための演習問題

TypeScriptを使ったReactのrefの型定義に慣れるためには、実際に手を動かして学習することが重要です。以下に、基礎から応用までの演習問題を提示します。これらの問題を解くことで、refの型定義の理解がさらに深まります。

1. 基本的なrefの型定義

問題:
HTMLのinput要素を操作する簡単なフォームコンポーネントを作成してください。次の要件を満たしてください。

入力フィールドにrefを設定する。
ボタンをクリックすると、入力フィールドにフォーカスする。
TypeScriptで型定義を行い、エラーが発生しないようにする。

期待される動作:
ボタンをクリックすると、入力フィールドにフォーカスが移動します。

2. カスタムコンポーネントへのrefの適用

問題:
以下の条件を満たすカスタムコンポーネントCustomButtonを作成してください。

親コンポーネントからrefを渡してボタン要素を操作できるようにする。
ボタンの背景色を動的に変更するchangeColorという関数を公開する。
TypeScriptを用いて正しく型定義を行う。

期待される動作:
親コンポーネントからchangeColorを呼び出してボタンの背景色を変更します。

3. 複数のrefを持つコンポーネント

問題:
以下の仕様を持つコンポーネントを作成してください。

2つのdiv要素を持つ。
各divにrefを設定し、それぞれ異なる背景色を設定するボタンを用意する。
TypeScriptでrefの型を明確に定義する。

期待される動作:
ボタンをクリックすると、それぞれのdivの背景色が変更されます。

4. モーダルの外部クリック検出

問題:
モーダルコンポーネントを作成し、以下の要件を満たしてください。

モーダル内の要素をrefで管理する。
外部クリックを検出し、モーダルを閉じる処理を実装する。
TypeScriptで型定義を行い、安全なコードを作成する。

期待される動作:
モーダル外部をクリックすると、モーダルが閉じます。

5. Canvas要素を操作するカスタムフック

問題:
useCanvasというカスタムフックを作成してください。このフックは以下の機能を提供します。

Canvas要素をrefで管理する。
描画関数drawを公開し、図形を描画できるようにする。
TypeScriptで適切な型を定義する。

期待される動作:
Canvas要素を親コンポーネントで描画できるようになります。

6. Chart.jsを使ったグラフ描画

問題:
以下の仕様を持つグラフ描画コンポーネントを作成してください。

Canvas要素にrefを設定する。
Chart.jsを使用してグラフを描画する。
TypeScriptでCanvas要素の型を正しく定義する。

期待される動作:
Canvas要素にグラフが描画されます。

7. 動的に生成される要素のref管理