Reactハンズオン「自動見出しコンポーネント」

2024-2025 Shunsuke Watanabe

このハンズオンはReact入門チュートリアルの内容を前提にしています。

このハンズオンではページの見出しを自動で作成するコンポーネントを作ります。

このコンポーネントの作成を通じて以下の知識の確認をします。

useState
useEffect
useRef
StrictMode

1. コンポーネントでやりたいこと

ページの h2 タグをもとに自動で目次をつくる
各 h2 タグにリンク用のハッシュをつける
フローティングTOCで h2 タグにすぐ飛べるようにする

2. プロジェクト初期化

初期化

1
npm create vite@latest auto-toc

ライブラリのインストール

1
cd auto-toc
2
npm i;
3
npm i -D prettier tailwindcss @tailwindcss/vite daisyui;

vite.config.ts に tailwindcss を追加

1
import { defineConfig } from 'vite'
2
import react from '@vitejs/plugin-react-swc'
3
import  tailwindcss  from '@tailwindcss/vite';
4

5
// https://vite.dev/config/
6
export default defineConfig({
7
  plugins: [react(), tailwindcss()],
8
})

index.css の中身を消して、tailwindcssとdaisyuiで置き換え

1
@import "tailwindcss";
2
@plugin "daisyui" {
3
    themes: abyss --default;
4
};

App.tsx の中身をダミーテキストで置き換え

ダミーテキスト

1
<>
2
    <h1>日本の四季とその魅力</h1>
3
    <p>日本は四季がはっきりしており、それぞれの季節に特徴的な風景や文化があります。春には桜が咲き誇り、夏には祭りが賑わい、秋には紅葉が美しく色づき、冬には雪景色が広がります。これらの変化は日本人の生活や文化に深く根付いており、季節ごとの楽しみ方も豊富です。本記事では、日本の四季の魅力を詳しく紹介していきます。</p>
4

5
    <h2>春：桜と新しい始まり</h2>
6
    <p>春は、日本の象徴的な季節の一つです。特に桜の花が咲く時期には、多くの人々が公園や河川敷で花見を楽しみます。桜の開花は短く、満開の時期を迎えると数日で散ってしまうため、その儚さが日本人の心に響きます。また、春は新しい生活の始まりの季節でもあり、入学式や新社会人のスタートといった重要なイベントが多くあります。</p>
7

8
    <h3>春の風物詩</h3>
9
    <ul>
10
        <li><strong>桜の開花前線</strong>：日本各地で異なる開花時期を楽しめる</li>
11
        <li><strong>入学式と新生活</strong>：学校や企業で新たなスタート</li>
12
        <li><strong>春の味覚</strong>：筍や菜の花などの旬の食材</li>
13
    </ul>
14

15
    <h3>春の楽しみ方</h3>
16
    <ul>
17
        <li>お花見：家族や友人とともに桜を楽しむ</li>
18
        <li>ハイキング：山や公園で春の景色を満喫する</li>
19
        <li>春祭り：全国各地で開催される春の祭りに参加する</li>
20
    </ul>
21

22
    <h2>夏：祭りと海</h2>
23
    <p>夏は暑く湿度が高いものの、日本各地で多くの祭りや花火大会が開催されるため、活気に満ちています。特に、京都の祇園祭や青森のねぶた祭は全国的に有名です。また、海水浴やキャンプなどのアウトドアアクティビティも人気があります。</p>
24

25
    <h3>夏の楽しみ方</h3>
26
    <ul>
27
        <li>海水浴とアウトドア：沖縄の美しいビーチやキャンプ</li>
28
        <li>花火大会：夜空を彩る大輪の花</li>
29
        <li>冷たい食べ物：かき氷や冷やし中華</li>
30
    </ul>
31

32
    <h3>日本の夏祭り</h3>
33
    <ul>
34
        <li>青森ねぶた祭：巨大なねぶた（灯籠）が街を練り歩く</li>
35
        <li>仙台七夕祭り：美しい七夕飾りが街を彩る</li>
36
        <li>徳島阿波踊り：踊り手たちがリズムに合わせて踊る</li>
37
    </ul>
38

39
    <h2>秋：紅葉と実りの季節</h2>
40
    <p>秋は気温が下がり、空気が澄んで過ごしやすい季節です。山々が赤や黄色に染まり、紅葉狩りが楽しめます。また、新米や果物など、食べ物が一層美味しくなる季節でもあります。</p>
41

42
    <h3>秋の風景</h3>
43
    <ul>
44
        <li>京都の紅葉：清水寺や嵐山の美しい景色</li>
45
        <li>秋の味覚：栗や柿、サンマなどの旬の食材</li>
46
        <li>芸術の秋：文化祭や読書の時間</li>
47
    </ul>
48

49
    <h3>秋のイベント</h3>
50
    <ul>
51
        <li>紅葉狩り：全国の名所で色づく木々を楽しむ</li>
52
        <li>秋の味覚祭り：新米や秋の果物を堪能する</li>
53
        <li>運動会：学校や地域で開催されるスポーツイベント</li>
54
    </ul>
55

56
    <h2>冬：雪と温泉</h2>
57
    <p>冬は寒さが厳しくなるものの、雪景色や温泉、冬のスポーツを楽しめる季節です。北海道や東北地方では、スキーやスノーボードが人気です。また、温泉地では雪見風呂を堪能できます。</p>
58

59
    <h3>冬の楽しみ</h3>
60
    <ul>
61
        <li>温泉旅行：箱根や草津などの有名な温泉地</li>
62
        <li>冬の味覚：鍋料理やおでんで体を温める</li>
63
        <li>イルミネーション：都市部の華やかな光のイベント</li>
64
    </ul>
65

66
    <h3>冬のイベントと伝統</h3>
67
    <ul>
68
        <li>大晦日とお正月：年越しそばを食べ、初詣に行く</li>
69
        <li>節分：鬼を追い払うために豆まきをする</li>
70
        <li>冬の雪祭り：北海道札幌の雪まつりなど</li>
71
    </ul>
72

73
    <h2>まとめ</h2>
74
    <p>日本の四季は、それぞれ異なる魅力があり、訪れるたびに新しい発見があります。春の桜、夏の祭り、秋の紅葉、冬の雪景色など、どの季節にも特別な魅力があります。日本に訪れる際は、ぜひ季節ごとの風景や文化を楽しんでみてください。</p>
75

76
    <p>あなたのお気に入りの季節はどれですか？</p>
77
</>

開発用サーバ起動

1
npm run dev

index.css に見出しのスタイルを追加

1
 h2 {
2
   margin-top: 4rem;
3
   margin-bottom: 2rem;
4
   font-size: x-large;
5
 }
6

7
 h3 {
8
   margin-top: 2rem;
9
   margin-bottom: 1rem;
10
 }

src/components/AutoTOC.tsx を新規作成

1
export const AutoTOC = () => {
2
  return (
3
    <>
4
      <h2>目次</h2>
5
    </>
6
  )
7
}

App.tsx で AutoTOC.tsx を表示

3. DOMからh2タグを抽出する

AutoTOC.tsx にuseEffectを追加

1
useEffect(() => {
2
  const headings = document.querySelectorAll("h2");
3

4
  const toc = [];
5

6
  [...headings].forEach((heading) => {
7
    // 目次のデータを作る
8
    const hash = `#${encodeURIComponent(heading.innerText)}`;
9
    toc.push({
10
      hash,
11
      text: heading.innerText,
12
    });
13
    // h2にIDとハッシュの追加
14
    const aTag = document.createElement("a");
15
    aTag.innerText = "#";
16
    aTag.href = hash;
17
    heading.id = encodeURIComponent(heading.innerText);
18
    heading.appendChild(aTag);
19
  });
20

21
  console.log("----- toc", toc);
22
}, []);

ハッシュリンクが2つついていることを確認する
StrictModeを外してみる→もどす
useRefを使って一度だけ実行されるようにする

1
const hasExecuted = useRef(false);
2
useEffect(() => {
3
  if(hasExecuted.current) {
4
    return;
5
  }
6
  hasExecuted.current = true;
7

8
  ...
9

10
}, []);

const toc に型をつける

1
export type TOCItem = {
2
  hash: string;
3
  text: string;
4
};
5

6
...
7

8
const toc: TOCItem[] = [];
9

10
...

4. 目次の表示

1
const [toc, setToc] = useState<TOCItem[]>([]);
2

3
...
4

5
useEffect(() => {
6

7
...
8
  setToc(toc)
9
  console.log("----- toc", toc);
10
}, [setToc]);
11

12
return (
13
<div className="my-10">
14
 <h2 id="toc">目次</h2>
15
 <ul>
16
   {toc.map((x, i) => (
17
   <li key={i} className="list-none">
18
     <a href={x.hash}>{x.text}</a>
19
   </li>
20
   ))}
21
 </ul>
22
</div>
23
);

目次も目次に出てしまうのでフィルタする

5. フローティングTOCを作る

AutoTOC.tsx 内に FloatingTOC コンポーネントを作る

1
type FloatingTOCProps = {
2
  toc: TOCItem[];
3
};
4

5
export const FloatingTOC = ({ toc }: FloatingTOCProps) => {
6
  return (
7
    <div
8
      id="floating-toc"
9
      className="fixed right-0 top-[50%] z-10 mr-4 -translate-y-1/2 bg-[var(--color-base-200)] border rounded"
10
    >
11
        <div
12
          className="p-2 transition-all duration-200 ease-out "
13
        >
14
          <MenuIcon />
15
        </div>
16
    </div>
17
  );
18
};
19

20
const MenuIcon = () => (
21
  <svg
22
    xmlns="http://www.w3.org/2000/svg"
23
    width="20"
24
    height="20"
25
    viewBox="0 0 20 20"
26
  >
27
    <path
28
      fill="currentColor"
29
      fillRule="evenodd"
30
      d="M2 8a1 1 0 0 1 1-1h10.308a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1m0-4a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1m0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1m0 4a1 1 0 0 1 1-1h10.308a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1"
31
      clipRule="evenodd"
32
    />
33
  </svg>
34
);

AutoTOC で FloatingTOC を表示する
マウスホバーで表示が切り替わるようにする

1
const FloatingTOC = ({ toc }: FloatingTOCProps) => {
2
  const [isHover, setIsHover] = useState(false);
3

4
  return (
5
    <div
6
      id="floating-toc"
7
      className="fixed right-0 top-[50%] z-10 mr-4 -translate-y-1/2 bg-[var(--color-base-200)] border rounded"
8
    >
9
      {isHover ? (
10
        <div
11
          className="p-4 flex flex-col items-end transition-all duration-200 ease-out"
12
          onMouseLeave={() => setIsHover(false)}
13
        >
14
          {toc.map((x, i) => (
15
            <a key={i} href={x.hash} onClick={() => setIsHover(false)}>
16
              {x.text}
17
            </a>
18
          ))}
19
        </div>
20
      ) : (
21
        <div
22
          className="p-2 transition-all duration-200 ease-out "
23
          onMouseEnter={() => setIsHover(true)}
24
        >
25
          <MenuIcon />
26
        </div>
27
      )}
28
    </div>
29
  );
30
}

6. ロケーションバーのハッシュを変更する

h2 を保持しておくための headingRefs を作成し、DOMへの参照を保存する

1
const headingRefs = useRef<HTMLHeadingElement[]>([]);
2

3
useEffect(() => {
4
  const headings = document.querySelectorAll("h2");
5

6
  const toc = [];
7

8
  [...headings].forEach((heading) => {
9
    // 目次のデータを作る
10
    const hash = `#${encodeURIComponent(heading.innerText)}`;
11
    toc.push({
12
      hash,
13
      text: heading.innerText,
14
    });
15
    // h2にIDとハッシュの追加
16
    const aTag = document.createElement("a");
17
    aTag.innerText = "#";
18
    aTag.href = hash;
19
    heading.id = encodeURIComponent(heading.innerText);
20
    heading.appendChild(aTag);
21
    // refを保存
22
    headingRefs.current.push(heading)
23
  });
24

25
}, []);

IntersectionObserver を使い、スクロールしてH2が表示されたときにブラウザのロケーションバーのハッシュを変更する

1
useEffect(() => {
2
  const observer = new IntersectionObserver(
3
    (entries) => {
4
      if (entries.length > 0 && entries[0].isIntersecting) {
5
        window.history.pushState(null, '', `#${entries[0].target.id}`)
6
      }
7
    },
8
    { threshold: 1 }
9
  )
10

11
  headingRefs.current.forEach((heading) => {
12
    if (heading) observer.observe(heading)
13
  })
14

15
  return () => {
16
    observer.disconnect()
17
  }
18
}, [])

ここで別の useEffect を使っているのは、目次を作っている useEffect が1度目のマウントでしか実行されないからです。

まとめ

状態に応じてコンポーネントを再レンダリングしたいときは useState
コンポーネントを再レンダリングしたくないが、状態を管理したいときは useRef
DOMへの参照を保持するときは useRef
DOM操作をするときは useEffect
StrictMode では、開発環境でのみ、マウント→アンマウント→マウントという動作をシミュレーションする