ステップバイステップガイド

tsParticles ガイドセクションへようこそ。Vanilla JS の静的サイト、React や Vue のシングルページアプリケーション、Next.js や Nuxt のフルスタックアプリケーションのいずれを構築する場合でも、これらのステップバイステップチュートリアルでインストール、基本的な使い方、高度な設定、インタラクティブエフェクトを順を追って説明します。

各ガイドは自己完結型で、すぐに始められるコピー＆ペースト可能なコード例が含まれています。

利用可能なガイド

フレームワーク / ラッパー	パッケージ	説明
Vanilla JS	`tsparticles`（CDN または npm）	`tsParticles.load()` を使用した直接 DOM 統合
React	`@tsparticles/react`	フックとコンポーネント API を備えた公式 React ラッパー
Vue 3	`@tsparticles/vue3`	コンポーザブルを備えた公式 Vue 3 プラグイン
Angular	`@tsparticles/angular`	公式 Angular コンポーネントとモジュール
Svelte	`@tsparticles/svelte`	公式 Svelte コンポーネント
Next.js	`@tsparticles/react`（Next.js 使用）	サーバーサイドレンダリングと動的インポート
Nuxt	`@tsparticles/vue3`（Nuxt 使用）	Nuxt プラグインとしての SSR セーフな統合
Solid	`@tsparticles/solid`	公式 SolidJS ラッパー
Preact	`@tsparticles/preact`	Preact 互換コンポーネント
Lit	`@tsparticles/lit`	Lit Web コンポーネントラッパー
Qwik	`@tsparticles/qwik`	Qwik 最適化統合
jQuery	`@tsparticles/jquery`	レガシープロジェクト向け jQuery プラグイン
Astro	`@tsparticles/react`（または任意のラッパー）	クライアントディレクティブを使用したアイランドアーキテクチャ
Web Components	`@tsparticles/webcomponents`	Custom Elements API 統合
Stencil	`@tsparticles/stencil`	Stencil コンポーネントラッパー
Ember	`@tsparticles/ember`	Ember アドオン統合
Riot	`@tsparticles/riot`	Riot.js ラッパー
Inferno	`@tsparticles/inferno`	Inferno 互換コンポーネント
WordPress	プラグイン + `tsparticles`	ブロックエディター / ショートコード統合

ガイドを選ぶ

Happy building!