Reactの便利なライブラリ

Reactの便利なライブラリをまとめました

はじめに

Reactで開発をしていると「毎回同じような処理を書いているな…」とか
「もっと便利な方法ないのかな？」と思うことはありませんか？

本記事では、私が普段の開発や学習の中で見つけた
React開発をグッと楽にしてくれる便利なライブラリをまとめました。

• UI構築を効率化するライブラリ
• 状態管理をシンプルにするライブラリ
• アニメーションやUXを向上させるライブラリ

など、カテゴリごとに整理しています。
「新しいライブラリを試したい」「定番を押さえておきたい」という方に
役立ててもらえれば幸いです。

---

環境

利用した環境や前提条件を明示します。

• OS / Windows 11
• 言語 /
• フレームワーク / React
• 使用したライブラリやツール
  -Tippy.js
  -react-fast-marquee
  -react-joyride

---

Tippy.js

効果: ツールチップを表示するライブラリ
用途: ホバーやクリック時に説明や補足を表示する

# コマンド例
npm install @tippyjs/react

## サンプルコード
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';

export default function Tooltip() {
  return (
    <div>
    　// ホバー時に表示する文言
      <Tippy content="変更したいセルをダブルクリックして下さい。">
        <button>セル編集方法</button>
      </Tippy>
    </div>
  );
}

---

react-fast-marquee

効果:「ニュース速報」みたいに文字が横に流れるUI
用途: 視線を引きつける情報表示

# コマンド例
npm install react-fast-marquee

## サンプルコード
import Marquee from "react-fast-marquee";

export default function NewsTicker() {
  return (
    <Marquee speed={50} gradient={false}>
      速報！Reactで勤怠管理アプリを完成させる！
    </Marquee>
  );
}

---

react-joyride

効果: ステップごとにツールチップ（モーダル）が出て、画面上の要素を順番にハイライトして説明できる
用途: フローチャートやチュートリアルなど

# コマンド例
npm install react-joyride

## サンプルコード
import React from "react";
import Joyride from "react-joyride";

export default function Tutorial() {
　// targetとclassNameを紐づける
  const steps = [
    {
      target: ".step1",
      content: "ここでセルを編集できます",
    },
    {
      target: ".step2",
      content: "ここで申請ボタンを押します",
    },
    {
      target: ".step3",
      content: "最後に確認して完了です！",
    },
  ];

  return (
    <div>
      <button className="step1">セル編集</button>
      <button className="step2">申請</button>
      <button className="step3">完了</button>

      <Joyride steps={steps} continuous={true} />
    </div>
  );
}