インストール

このページは tsParticles メイン README のインストールマトリクスを反映しています。

公式リファレンス: https://github.com/tsparticles/tsparticles/blob/main/README.md#library-installation

導入パスを選ぶ

高速デフォルト: @tsparticles/engine + @tsparticles/slim
より軽いカスタム runtime: @tsparticles/engine + 必要な plugins のみ
用途別 API: @tsparticles/particles、@tsparticles/confetti、@tsparticles/fireworks
全機能入り: @tsparticles/all

ホスティング / CDN

以下のプロバイダーを利用できます（またはビルド済みファイルを self-host）。

jsDelivr

cdnjs

https://cdnjs.com/libraries/tsparticles

unpkg

package manager でインストール

npm

bash

npm install @tsparticles/engine

yarn

bash

yarn add @tsparticles/engine

pnpm

bash

pnpm add @tsparticles/engine

import と require

const tsParticles = require("@tsparticles/engine");

// or

import { tsParticles } from "@tsparticles/engine";

最小 runtime セットアップ（`@tsparticles/slim`）

import { tsParticles } from "@tsparticles/engine";
import { loadSlim } from "@tsparticles/slim";

await loadSlim(tsParticles);

await tsParticles.load({
  id: "tsparticles",
  options: {
    particles: {
      move: {
        enable: true,
      },
      number: {
        value: 60,
      },
    },
  },
});

legacy 互換

既存の particles.js 統合を移行する場合は、互換パッケージを利用してください。

インストール ​

導入パスを選ぶ ​

ホスティング / CDN ​

jsDelivr ​

cdnjs ​

unpkg ​

package manager でインストール ​

npm ​

yarn ​

pnpm ​

import と require ​

最小 runtime セットアップ（@tsparticles/slim） ​

関連ページ ​

legacy 互換 ​

インストール

導入パスを選ぶ

ホスティング / CDN

jsDelivr

cdnjs

unpkg

package manager でインストール

npm

yarn

pnpm

import と require

最小 runtime セットアップ（`@tsparticles/slim`）

関連ページ

legacy 互換