家

Skill

ウェブ開発

zustand-store-ts

microsoft/skills

TypeScript、subscribeWithSelector ミドルウェア、および適切な状態/アクションの分離を用いて Zustand ストアを作成し、React の状態管理を実現します。

...すべて拡張します

更新された時間 2026年9月13日

# typescript # react # middleware # state management # zustand

Zustand ストア

確立されたパターンに従って Zustand ストアを作成し、適切な TypeScript 型とミドルウェアを使用します。

クイックスタート

assets/template.ts からテンプレートをコピーし、プレースホルダーを置き換えます：

{{StoreName}} → PascalCase のストア名（例：Project）
{{description}} → JSDoc 用の簡潔な説明

常に subscribeWithSelector を使用する

import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';

export const useMyStore = create<mystore>()(
  subscribeWithSelector((set, get) => ({
    // state and actions
  }))
);
</mystore>

状態とアクションを分離する

export interface MyState {
  items: Item[];
  isLoading: boolean;
}

export interface MyActions {
  addItem: (item: Item) => void;
  loadItems: () => Promise<void>;
}

export type MyStore = MyState & MyActions;
</void>

個別のセレクターを使用する

// 良好 - `items` が変更された場合のみ再レンダリング
const items = useMyStore((state) => state.items);

// 避ける - 状態の変更時に常に再レンダリング
const { items, isLoading } = useMyStore();

React 外側で購読する

useMyStore.subscribe(
  (state) => state.selectedId,
  (selectedId) => console.log('Selected:', selectedId)
);

統合手順

src/frontend/src/store/ にストアを作成する
src/frontend/src/store/index.ts からエクスポートする
src/frontend/src/store/*.test.ts にテストを追加する

GitHubで見る

---
name: zustand-store-ts
description: Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state/action separation for React state management.
license: MIT
---

# Zustand Store

Create Zustand stores following established patterns with proper TypeScript types and middleware.

## Quick Start

Copy the template from [assets/template.ts](assets/template.ts) and replace placeholders:
- `{{StoreName}}` → PascalCase store name (e.g., `Project`)
- `{{description}}` → Brief description for JSDoc

## Always Use subscribeWithSelector

```typescript
import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';

export const useMyStore = create<MyStore>()(
  subscribeWithSelector((set, get) => ({
    // state and actions
  }))
);
```

## Separate State and Actions

```typescript
export interface MyState {
  items: Item[];
  isLoading: boolean;
}

export interface MyActions {
  addItem: (item: Item) => void;
  loadItems: () => Promise<void>;
}

export type MyStore = MyState & MyActions;
```

## Use Individual Selectors

```typescript
// Good - only re-renders when `items` changes
const items = useMyStore((state) => state.items);

// Avoid - re-renders on any state change
const { items, isLoading } = useMyStore();
```

## Subscribe Outside React

```typescript
useMyStore.subscribe(
  (state) => state.selectedId,
  (selectedId) => console.log('Selected:', selectedId)
);
```

## Integration Steps

1. Create store in `src/frontend/src/store/`
2. Export from `src/frontend/src/store/index.ts`
3. Add tests in `src/frontend/src/store/*.test.ts`

すべてのファイル

0件のファイル

zustand-store-tsをインストール

スキルファイルをダウンロードして .claude/skills/ ディレクトリに展開してください。

ZIPをダウンロード

リポジトリをクローンし、スキルファイルをプロジェクトにコピーしてください。

git clone https://github.com/microsoft/skills/tree/main/.github/plugins/azure-sdk-typescript/skills/zustand-store-ts # Copy SKILL.md to your .claude/skills/ directory

コピー

クイックセットアップ: スキルフォルダを .claude/skills/ にコピーしてください。Claude はそのスキルを自動的に検出し、使用します。

リポジトリ microsoft/skills