ReactJSでID参照：Context API、カスタムフック、データ属性、stateとpropsも活用！

2024-05-20

ReactJS の index.js ファイルと index.html ファイルにおける ID 参照

DOM 参照

index.html ファイルで定義された HTML 要素の ID を、index.js ファイルで JavaScript コードを使って直接参照する方法です。

例:

<div id="my-element">コンテンツ</div>

// index.js
const myElement = document.getElementById('my-element');
// myElement を操作するコード

利点:

シンプルで分かりやすい

コードが冗長になる
テストが難しくなる

React コンポーネントに ref 属性を付与することで、そのコンポーネントインスタンスを index.js ファイルで取得できます。

// MyComponent.js
import React from 'react';

const MyComponent = () => {
  return <div ref={(el) => this.myElement = el}>コンテンツ</div>;
};

export default MyComponent;

// index.js
import MyComponent from './MyComponent';

const App = () => {
  const myComponentRef = React.createRef();
  return (
    <div>
      <MyComponent ref={myComponentRef} />
      {/* myComponentRef.current を操作するコード */}
    </div>
  );
};

export default App;

DOM 参照よりも複雑

状況によって使い分ける必要があります。

シンプルで分かりやすいコードが必要な場合は、DOM 参照が適しています。
コードの簡潔性とテストの容易さを重視する場合は、React コンポーネントの ref 属性が適しています。

ReactJS で ID 参照を行うサンプルコード

DOM 参照

index.html

<!DOCTYPE html>
<html>
<head>
  <title>DOM 参照</title>
</head>
<body>
  <div id="my-element">コンテンツ</div>
  <script src="index.js"></script>
</body>
</html>

index.js

const myElement = document.getElementById('my-element');
console.log(myElement.textContent); // コンテンツを出力

説明:

index.html ファイルで、my-element という ID の HTML 要素を定義します。
index.js ファイルで、document.getElementById() 関数を使って my-element 要素を取得します。
取得した要素の textContent プロパティにアクセスして、要素の内容を出力します。

React コンポーネントの ref 属性

MyComponent.js

import React from 'react';

const MyComponent = () => {
  return <div ref={(el) => this.myElement = el}>コンテンツ</div>;
};

export default MyComponent;

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

const App = () => {
  const myComponentRef = React.createRef();
  return (
    <div>
      <MyComponent ref={myComponentRef} />
      <button onClick={() => console.log(myComponentRef.current.textContent)}>
        コンテンツを出力
      </button>
    </div>
  );
};

export default App;

MyComponent.js ファイルで、ref 属性を付与した React コンポーネントを定義します。
index.js ファイルで、MyComponent コンポーネントを ref 属性を使ってインスタンス化します。
ボタンをクリックしたときに、myComponentRef.current.textContent にアクセスして、要素の内容を出力します。

どちらのサンプルコードも、package.json ファイルに react と react-dom パッケージをインストールする必要があります。

{
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

これらのサンプルコードを参考に、状況に合った方法で ReactJS で ID 参照を行ってください。

ReactJS で ID 参照を行うその他の方法

Context API を使用して、ID と参照したい要素をコンポーネント間で共有することができます。

// context.js
import React from 'react';

const MyContext = React.createContext({
  id: '',
  element: null,
});

export const MyContextProvider = ({ id, element, children }) => {
  return (
    <MyContext.Provider value={{ id, element }}>
      {children}
    </MyContext.Provider>
  );
};

export const useMyContext = () => {
  const context = React.useContext(MyContext);
  return context;
};

// MyComponent.js
import React from 'react';
import { useMyContext } from './context';

const MyComponent = () => {
  const { id, element } = useMyContext();
  // id と element を操作するコード
};

export default MyComponent;

// useElementRef.js
import React, { useState, useRef } from 'react';

const useElementRef = (id) => {
  const elementRef = useRef(null);
  const [isMounted, setIsMounted] = useState(false);

  if (!isMounted) {
    const element = document.getElementById(id);
    elementRef.current = element;
    setIsMounted(true);
  }

  return elementRef;
};

// MyComponent.js
import React from 'react';
import useElementRef from './useElementRef';

const MyComponent = () => {
  const elementRef = useElementRef('my-element');
  // elementRef.current を操作するコード
};

export default MyComponent;

データ属性

HTML 要素にデータ属性を使用して ID を保存し、JavaScript コードでデータ属性にアクセスすることができます。

<div data-id="my-element">コンテンツ</div>

const myElement = document.querySelector('[data-id="my-element"]');
console.log(myElement.textContent); // コンテンツを出力

state と props

親コンポーネントから子コンポーネントに ID と参照したい要素を props として渡すことができます。

// ParentComponent.js
import React from 'react';
import MyComponent from './MyComponent';

const ParentComponent = () => {
  const element = document.getElementById('my-element');
  return <MyComponent id="my-element" element={element} />;
};

export default ParentComponent;

// MyComponent.js
import React from 'react';

const MyComponent = ({ id, element }) => {
  // id と element を操作するコード
};

export default MyComponent;

それぞれの方法の利点と欠点

方法	利点	欠点
DOM 参照	シンプルで分かりやすい	コードが冗長になる
React コンポーネントの `ref` 属性	コードが簡潔になる	複雑になる
Context API	コンポーネント間で簡単に共有できる	複雑になる
カスタムフック	再利用性が高い	複雑になる
データ属性	シンプルで分かりやすい	コードが冗長になる
state と props	コンポーネント間で柔軟に共有できる	コードが煩雑になる