初心者でも分かる！JavaScriptのgetElementByIdとReactのuseRefの違いと使い分け方

はじめに

HTML要素を操作するための手法として、JavaScriptのgetElementByIdやReactのuseRefが頻繁に使用されます。しかし、これらの手法はどのように異なり、どのように使い分けるべきなのでしょうか。今回は、初心者でも理解できるようにgetElementByIdとuseRefの違いについて解説します。

getElementByIdとは

getElementByIdはJavaScriptの基本的な関数で、特定のID属性を持つHTML要素を取得するために使用されます。

以下に、HTML要素からテキスト内容を取得するシンプルな例を示します。

<div id="myDiv">こんにちは、世界！</div>

let div = document.getElementById('myDiv');
console.log(div.textContent);  // "こんにちは、世界！"が表示されます。

このコードでは、getElementById関数を使用してIDが"myDiv"の<div>要素を取得し、そのテキスト内容をコンソールに表示しています。

getElementByIdのメリット・デメリット

メリット

• getElementByIdは純粋なJavaScriptで、特定のライブラリやフレームワークに依存せずに使えます。
• ID属性が一意であることから、指定した要素を直接取得することができます。

デメリット

• Reactなどのフレームワーク内でgetElementByIdを頻繁に使用すると、フレームワークの「宣言的」なパターンから外れる可能性があります。
• getElementByIdを頻繁に使用すると、直接的なDOM操作が増えるため、コードの管理が難しくなる可能性があります。

useRefとは

useRefはReactのフックで、Reactのコンポーネント内で特定の要素を参照するために使用します。

以下に、ボタンクリック時に特定の要素のテキスト内容をコンソールに表示する例を示します。

import React, { useRef } from 'react';

function MyComponent() {
  const myDivRef = useRef(null);

  const handleClick = () => {
    console.log(myDivRef.current.textContent);
  }

  return (
    <div>
      <div ref={myDivRef}>こんにちは、世界！</div>
      <button onClick={handleClick}>テキストを表示</button>
    </div>
  );
}

export default MyComponent;

このコードでは、useRefフックを使用して<div>要素の参照を作成し、それをmyDivRefに保存しています。そして、ボタンがクリックされたときに、その参照を使用して<div>のテキスト内容をコンソールに表示します。

useRefのメリット・デメリット

メリット

• useRefはReactのフックの一部で、Reactコンポーネント内で使用するのに適しています。
• useRefは参照の保持に使うため、一度設定するとその値は再レンダリング時にも保持されます。

デメリット

• useRefはReact特有の概念であり、その使用はReactのコンテキストに限定されます。
• useRefは主にDOM要素の参照に使用されますが、それ以外の用途（例えば値の保持）に使用するとコードが理解しにくくなる可能性があります。

まとめ

getElementByIdとuseRefの違いを理解することで、具体的な状況や必要性、さらには使用している技術スタック（純粋なJavaScriptかReactなどのフレームワークか）によって適切な手法を選択できるようになります。それぞれの特性を理解し、効率的な開発を進めるために適切に使い分けてみてください。

以上、読んでいただきありがとうございました。この記事があなたの学習に役立つことを願っています。いいねやコメントもお待ちしています！