【入門編】 外部ライブラリ（DOM操作系）の統合 – React実践ガイド

こんにちは。Reactの世界へようこそ。

Reactを触り始めると、必ずと言っていいほど「壁」にぶつかる瞬間があります。それが「Reactの外側」との付き合い方です。

D3.jsでグラフを描いたり、Google Mapsで地図を表示させたり……。こうしたライブラリは、Reactとは別のルールでDOM（画面上の要素）を直接触りたがります。Reactが「僕が管理するから触らないで！」と言っているのに、横から手を出されるようなものですね。

この「お互いの領域侵犯」を安全に仲裁してくれるのが、`useEffect`という魔法の道具です。今日は、この付き合い方を「アパートの入居と退去」になぞらえて解説します。

—

1. なぜ「useEffect」が必要なの？

Reactは、画面を常に最新の状態に保つために、自分自身でDOMをせっせと書き換えています。一方で、D3.jsのようなライブラリは「ここに線を引け！」「この色に塗れ！」と、Reactとは無関係にDOMを操作します。

ここで喧嘩が起きないように、Reactはこう言います。
「わかった。君たちが仕事をするタイミングは僕が教えるから、それまでは待っていてね」

これが`useEffect`の正体です。

—

2. 「入居」と「退去」のイメージで理解する

`useEffect`の中身を書き始めるとき、一番大切なのは「準備（セットアップ）」と「片付け（クリーンアップ）」のペアを意識することです。

例えば、あなたがアパートに入居するときのことを想像してみてください。

1. 入居（セットアップ）： 鍵をもらって、家具を配置する。
2. 退去（クリーンアップ）： 次の人のために家具を片付けて、鍵を返して掃除する。

Reactで外部ライブラリを使うときも、これと同じです。「コンポーネントが表示されたら地図を読み込み、コンポーネントが消えるときは地図を破棄する」。このサイクルを守らないと、メモリの中に地図が何枚も重なってしまい、画面がカクついたり、思わぬバグを生んだりします。

—

3. 実践！地図ライブラリをラップしてみよう

では、実際にGoogle Mapsのようなライブラリを読み込む時のコードを見てみましょう。ポイントは「依存配列（`[]`）」の使い方です。

import React, { useEffect, useRef } from ‘react’;

function MapComponent() {
// 1. DOMの場所を指定するための「目印（ref）」を作ります
const mapRef = useRef(null);

useEffect(() => {
// — 2. 【入居】 ここでライブラリを動かします —
console.log(“地図の読み込みを開始します！”);
const map = new window.google.maps.Map(mapRef.current, {
center: { lat: 35.68, lng: 139.76 },
zoom: 8,
});

// — 3. 【退去】 ここが超重要！クリーンアップ関数です —
return () => {
console.log(“コンポーネントが消えるので、地図も綺麗に片付けます！”);
// ここでライブラリを初期化したり、イベントを解除したりします
map.unbindAll();
};
}, []); // 空の配列は「最初の一回だけ実行」という合図です

// 4. refをdivに渡すことで、Reactに「ここが地図の場所だよ」と伝えます
return