---

@wcstack/stateとは｜フレームワークなしのリアクティブHTML

@wcstack/stateは、HTMLファイル1つで「値が変わったらDOMが自動で更新される」リアクティブな仕組みを実現する軽量ライブラリです。ReactもVueもビルドツールも設定ファイルも不要で、CDN経由で即座に使い始めることができます。

主な特徴

• CDN1行で動作：npm installもvite.config.jsも不要
• ビルドツール不要：HTMLファイルをそのままブラウザで開くだけで動く
• data-wcs属性でDOM連結：状態とUIを疎結合に保つ設計
• ES Proxyによる変更検知：パス単位で状態を監視し、該当DOMのみを直接更新
• 仮想DOMなし：diff計算を行わないため高速かつシンプル
• 外部依存ゼロ：単体で完結する

内部の仕組み

【内部の仕組み】
ES Proxy で状態オブジェクトを監視
→ data-wcs が設定された DOM 要素のみを直接更新
→ 仮想 DOM の diff 計算なし → 高速かつシンプル

---

セットアップ方法｜CDN1行を追加するだけ

結論：<script type="module">を1行追加するだけで使い始められます。npmもWebpackもViteも一切不要です。

---

基本の書き方｜wcs-stateタグとdata-wcs属性

@wcstack/stateの基本パターンは2ステップです。

1. wcs-stateタグ内に状態（data）とメソッドを定義する
2. data-wcs属性でDOMと状態のパスを連結する

カウンターの実装例

  
  





  




+1
-1

---

双方向バインディング｜input要素との連携

data-wcs="value: 変数名"と指定するだけで、inputへの入力が状態に自動反映され、状態の変化がinputにも自動反映される双方向バインディングが有効になります。

  



こんにちは、{{ name }}さん！

テンプレート構文{{ }}による埋め込み

現在のカウント：{{ count }}
ユーザー名：{{ name }}

---

リスト表示（for）｜templateタグで繰り返し

<template data-wcs="for: 配列名">を使うと、配列の要素数だけDOMを自動生成します。*（アスタリスク）が「現在のループ要素」を指すため、手動でインデックスを管理する必要はありません。

---

条件分岐（if/elseif/else）｜templateタグで表示切り替え

条件が偽のとき、要素はdisplay:noneになるのではなく、DOMから物理的に削除されます。これによりアクセシビリティ的に正しい挙動が保証されます。

  


+1
現在のカウント：{{ count }}

---

フィルタ｜組み込み40種類の変換・判定関数

フィルタは|フィルタ名の形式で状態パスに連結して使います。条件分岐や表示変換など幅広い用途に対応しています。

カテゴリ	フィルタ	説明
比較	|gt(n)	nより大きいか（greater than）
比較	|lt(n)	nより小さいか（less than）
比較	|eq(n)	nと等しいか
比較	|gte(n)	n以上
比較	|lte(n)	n以下
文字列	|uppercase	大文字に変換
文字列	|lowercase	小文字に変換
文字列	|trim	前後の空白を削除
数値	|toFixed(2)	小数点2桁に丸める
その他	|not	否定（true→false）
その他	|length	配列/文字列の長さ
その他	|isEmpty	空かどうか

【使用例】

---

Alpine.js・React・Vueとの比較

@wcstack/stateの位置づけを理解するために、代表的なライブラリ・フレームワークと比較します。

特徴	@wcstack/state	Alpine.js	React	Vue
CDN1行で動作	✅	✅	❌	❌
ビルドツール不要	✅	✅	通常必要	通常必要
仮想DOM	❌（Direct DOM）	❌	✅	✅
状態の定義場所	wcs-stateタグ	x-dataタグ	useState	data()
バンドルサイズ	超小型	小型	中〜大	中型
JSX/SFC	❌	❌	JSX	SFC
型サポート	限定的	限定的	強力	強力

Alpine.jsとの設計上の違い

Alpine.jsは既存のDOM要素に状態を直接埋め込む設計（x-data/x-bind）です。一方、@wcstack/stateはwcs-stateタグで状態を独立させ、data-wcsでパスのみを連結します。状態とUIがお互いの実装を知らない疎結合な設計が特徴です。

@wcstack/stateが向いているシーン

• 静的HTMLページに少量のインタラクティブを追加したい
• WordPressのページに動的要素を埋め込みたい
• プロトタイプを素早く作りたい
• ビルド環境なしで動かす必要がある環境

---

実践例｜TODOリストの実装

for・if・双方向バインディングを組み合わせた実践的なTODOリストの例です。

  
  
  




  


TODOリスト


追加

---

---

よくある質問（FAQ）

本番環境での利用は大丈夫ですか？

比較的新しいライブラリのため、小規模プロジェクト・静的ページへの動的要素追加・プロトタイプ用途には十分適しています。大規模プロダクションやチーム開発では、React/Vue/Svelteなど成熟したエコシステムを持つフレームワークを選択する方が安全です。

TypeScriptは使えますか？

@wcstack/stateは純粋なHTMLとJavaScriptで動作するため、TypeScriptのトランスパイルが必要な場合はビルド環境が必要になります。型安全性を重視する場合は、TypeScriptサポートが充実したReact/Vue/Svelteを選択することをお勧めします。

WordPressで使えますか？

はい。WordPressのテーマやページにCDN読み込みのscriptタグを追加するだけで使えます。問い合わせフォームのバリデーション表示や動的なコンテンツ切り替えなどに活用できます。wp_enqueue_scriptsでCDN URLを読み込むのが正規の方法です。

状態を複数のwcs-stateタグに分割できますか？

ページ内に複数のwcs-stateタグを配置することで、コンポーネントごとに状態を分割して管理できます。各wcs-stateの状態はスコープが独立しているため、名前の衝突を気にせず設計できます。

配列の要素を更新しても画面が更新されない場合は？

ES Proxyはネストされたオブジェクトのプロパティ変更を直接検知できないケースがあります。配列を操作した後に this.tasks = [...this.tasks] のように配列を再代入することで、変更を確実に通知できます。TODOリストの実装例のtoggleDoneメソッドがこのパターンを示しています。

---

まとめ

• @wcstack/stateはCDN1行で動作するHTML向けリアクティブ状態管理ライブラリ。ビルドツール・フレームワーク不要。
• 基本構造：wcs-stateタグで状態を定義 → data-wcs属性でDOMと連結 → 状態変更でDOM自動更新。
• 双方向バインディング：data-wcs="value: 変数名"でinput要素と状態を双方向に連結。
• リスト表示：<template data-wcs="for: 配列名">で繰り返し。*がループの現在要素を指す。
• 条件分岐：if/elseif/elseで要素をDOMから物理的に追加・削除して表示を制御。
• フィルタ：|gt(n)|isEmptyなど40種類の組み込みフィルタで比較・変換が可能。
• 向いているシーン：静的HTML・WordPress・プロトタイプ・ビルドレス環境への軽量なインタラクティブ追加。

ReactやVueが不要なシンプルなプロジェクトで「少しだけ動的な動作を追加したい」という場面で、@wcstack/stateは非常に有力な選択肢です。まずCDN1行追加してカウンターを動かすところから試してみましょう。

---

WithCodeを体験できる初級コース公開中！