4.5.7が最新版か。下記HTMLで確認できる。5系からはesmしか提供がないようす。
esmを許さないプラットフォームではビルドするかこちらを使うしか方法はなさそう。
利用例とテスト
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zustand UMD Version Test</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 50px auto;
padding: 20px;
background: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
h1 {
color: #333;
margin-bottom: 20px;
}
h2 {
color: #666;
font-size: 20px;
margin-top: 20px;
}
.status {
padding: 10px;
border-radius: 5px;
margin: 10px 0;
}
.success {
background: #e8f5e9;
color: #2e7d32;
}
.error {
background: #ffebee;
color: #c62828;
}
.counter {
font-size: 48px;
text-align: center;
margin: 30px 0;
color: #4CAF50;
font-weight: bold;
}
button {
padding: 12px 24px;
margin: 5px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
background: #4CAF50;
color: white;
}
button:hover {
background: #45a049;
}
.button-group {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>🔍 Zustand UMD バージョンテスト</h1>
<div id="test-results"></div>
</div>
<div class="container" id="demo-container" style="display: none;">
<h1>🎯 動作デモ</h1>
<div class="counter" id="counter">0</div>
<div class="button-group">
<button id="increment">➕ 増やす</button>
<button id="decrement">➖ 減らす</button>
<button id="reset">🔄 リセット</button>
</div>
</div>
<!-- v4.5.0 (試してみる) -->
<script src="https://unpkg.com/zustand@4.5.7/umd/vanilla.production.js"></script>
<script>
const resultsDiv = document.getElementById('test-results');
const demoContainer = document.getElementById('demo-container');
let html = '<h2>読み込み結果:</h2>';
// zustandVanilla をチェック
if (typeof window.zustandVanilla !== 'undefined') {
html += '<div class="status success">✅ window.zustandVanilla が見つかりました!</div>';
html += '<pre>利用可能な関数: ' + Object.keys(window.zustandVanilla).join(', ') + '</pre>';
// デモを表示
demoContainer.style.display = 'block';
const { createStore } = window.zustandVanilla;
// ストアを作成
const store = createStore((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
reset: () => set({ count: 0 })
}));
// DOM要素を取得
const counterElement = document.getElementById('counter');
const incrementButton = document.getElementById('increment');
const decrementButton = document.getElementById('decrement');
const resetButton = document.getElementById('reset');
// 状態が変わったときに画面を更新
store.subscribe((state) => {
counterElement.textContent = state.count;
});
// 初期値を表示
counterElement.textContent = store.getState().count;
// ボタンのイベントリスナーを設定
incrementButton.addEventListener('click', () => {
store.getState().increment();
});
decrementButton.addEventListener('click', () => {
store.getState().decrement();
});
resetButton.addEventListener('click', () => {
store.getState().reset();
});
console.log('✨ Zustand store created!', store.getState());
} else {
html += '<div class="status error">❌ window.zustandVanilla が見つかりません</div>';
html += '<p>このバージョンではUMD版が利用できない可能性があります。</p>';
}
// 他のグローバル変数もチェック
const zustandKeys = Object.keys(window).filter(k => k.toLowerCase().includes('zustand'));
if (zustandKeys.length > 0) {
html += '<h2>Zustand関連のグローバル変数:</h2>';
html += '<pre>' + zustandKeys.join('\n') + '</pre>';
}
resultsDiv.innerHTML = html;
</script>
</body>
</html>
備考：Redux
この記事は以上です。ありがとうございました。
kintoneのプラグイン開発や研修などを行っています。
お仕事のお話はこちらまで。