React18でparticles.jsで動くホームを作成した話

要約

この記事では、Reactを使ってホームページにparticles.jsを導入し、動く背景を作成する方法を説明します。特に、Reactとparticles.jsのバージョンの依存関係についても触れ、初学者にもわかりやすいように順序立てて説明します。備忘録としての記載なのでご了承ください。

概要

今回、Reactで動くHOMEを作成するために、particles.jsを導入することにしました。以下のサイトを参考にしました。

https://vincentgarreau.com/particles.js/#default

https://particles.js.org/samples/index.html#Emitter

これらを使用して、ホームに動く背景を表示させることを決意しました。Reactやparticlesのバージョンの依存関係で上手くいかない場合があるため、その点も含めて備忘録として記載します。誰かの役に立てば一石二鳥です。

環境

今回使用するパッケージのバージョンは以下の通りです。

{
"@types/node": "^20.12.2",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"react-tsparticles": "^2.12.2",
"tsparticles-slim": "^2.12.0",
"typescript": "^4.9.5"
}

方法

1.デザインの作成とダウンロード

まず、以下のサイトで好みのデザインを作成し、particlesjs-config.jsonをダウンロードしてください。

https://vincentgarreau.com/particles.js/#default

https://particles.js.org/samples/index.html#Emitter

2.パッケージのインストール

以下のコマンドを使用して必要なパッケージをインストールします。

npm install react-tsparticles
npm install tsparticles-slim

(※yarn を使用している場合はnpm install の箇所をyarn add に置き換えてください)

3.コードサンプルの作成

次に、Reactコンポーネントを作成します。以下は基本的なApp.tsxのサンプルコードです。

App.tsx

import { useCallback } from "react";
import type { Container, Engine } from "tsparticles-engine";
import Particles from "react-tsparticles";
import { loadSlim } from "tsparticles-slim";

const App = () => {
    const particlesInit = useCallback(async (engine: Engine) => {
        await loadSlim(engine);
    }, []);

    const particlesLoaded = useCallback(async (container: Container | undefined) => {
        await console.log(container);
    }, []);

    return (
        <Particles
            id="tsparticles"
            init={particlesInit}
            loaded={particlesLoaded}
            options={{
                background: {
                    color: {
                        value: "#0d47a1",
                    },
                },
                fpsLimit: 120,
                interactivity: {
                    events: {
                        onClick: {
                            enable: true,
                            mode: "push",
                        },
                        onHover: {
                            enable: true,
                            mode: "repulse",
                        },
                        resize: true,
                    },
                    modes: {
                        push: {
                            quantity: 4,
                        },
                        repulse: {
                            distance: 200,
                            duration: 0.4,
                        },
                    },
                },
                particles: {
                    color: {
                        value: "#ffffff",
                    },
                    links: {
                        color: "#ffffff",
                        distance: 150,
                        enable: true,
                        opacity: 0.5,
                        width: 1,
                    },
                    move: {
                        direction: "none",
                        enable: true,
                        outModes: {
                            default: "bounce",
                        },
                        random: false,
                        speed: 6,
                        straight: false,
                    },
                    number: {
                        density: {
                            enable: true,
                            area: 800,
                        },
                        value: 80,
                    },
                    opacity: {
                        value: 0.5,
                    },
                    shape: {
                        type: "circle",
                    },
                    size: {
                        value: { min: 1, max: 5 },
                    },
                },
                detectRetina: true,
            }}
        />
    );
};

export default App;

上記のコードでnpm startを実行すると、公式のサンプルが画面に表示されます。

4.カスタムデザインの適用

先ほどダウンロードしたparticlesjs-config.jsonをsrc/assets/配下に配置し、以下のようにファイルをインポートしてカスタムデザインを適用します。

App.tsx（修正後）

import { useCallback } from "react";
import type { Container, Engine } from "tsparticles-engine";
import Particles from "react-tsparticles";
import { loadSlim } from "tsparticles-slim";
import template from "./assets/particlesjs-config.json";

const App = () => {
  const params = template as typeof template;
  const particlesInit = useCallback(async (engine: Engine) => {
    await loadSlim(engine);
  }, []);

  const particlesLoaded = useCallback(async (container: Container | undefined) => {
    await console.log(container);
  }, []);

  return (
    <Particles
      id="tsparticles"
      init={particlesInit}
      loaded={particlesLoaded}
      options={params as any}
    />
  );
};

export default App;

まとめ

今回の手順に従うことで、Reactでparticles.jsを使った動く背景を簡単に作成できるようになりました。特に初学者の方でも理解しやすいように順序立てて説明しましたので、ぜひ試してみてください。これであなたのホームページも一層魅力的になることでしょう。お疲れ様でした！