最近React Nativeで個人開発してるんですが、今日はZustandっていう状態管理ライブラリを使ってみたので、学んだことをまとめておきます。
🛠️ 今日触った技術
- Zustand (状態管理)
-
TypeScript (
Partial<T>型) - React Native (FlatList、コンポーネント設計)
💡 Zustandがシンプルすぎて感動
状態管理にZustandを採用しました。storeで管理するだけの簡単操作で、めちゃくちゃシンプルで驚きました。
import { create } from 'zustand';
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
// 使う時
const { count, increment } = useStore();
これだけ。
useStateとの使い分けが重要だった
最初は「全部Zustandでいいじゃん」って思ったんですが、適切な使い分けが大事でした。
- useState: そのコンポーネント内だけで使う状態（入力値、表示/非表示など）
- Zustand: 複数画面で共有する状態（ユーザー情報、アプリ全体のデータなど）
例えば入力フォームの場合：
const SomeInput = () => {
const [value, setValue] = useState(''); // ローカル状態
const updateGlobalData = useStore(state => state.updateData); // グローバル状態
const handleChange = (text) => {
setValue(text); // 画面表示用
updateGlobalData(text); // 他の画面でも使う用
};
};
両方を組み合わせることで、最適なUXが実現できるんですね。
🤔 Partial型が予想以上に便利
TypeScriptのPartial<T>型、今まで使ったことがなかったんですが、これがかなり便利でした。
interface User {
id: string;
name: string;
email: string;
}
// Partial<User> だと全てのプロパティがオプショナルに
interface PartialUser {
id?: string;
name?: string;
email?: string;
}
何がいいかって、段階的にデータを構築していく時に型エラーが出ないんです。
// 最初は名前だけ
const user: Partial<User> = { name: "太郎" };
// 後でメール追加
const updatedUser: Partial<User> = { ...user, email: "taro@example.com" };
// 最終的に完成
const completeUser: User = { id: "1", name: "太郎", email: "taro@example.com" };
フォームで「途中段階のデータ」を管理する時に、すごく役立ちそうです。
🚧 今日つまづいたこと
配列の長さ分だけコンポーネントを生成したかったんですが、なぜかうまくいきませんでした。
const count = 5;
{Array.from({ length: count }, (_, index) => (
<SomeComponent key={index} number={index + 1} />
))}
これで5個のコンポーネントが表示されるはずなのに、1個しか表示されない...。
おそらくデータの取得タイミングか、状態の保存で何かミスしてると思います。
明日はデバッグ表示で原因を特定してみます。
📝 FlatListのrenderItemの仕組みも理解
昨日からFlatListで詰まってたんですが、renderItemの仕組みがやっと理解できました。
const data = [{ id: 1 }, { id: 2 }, { id: 3 }];
const renderItem = ({ item, index }) => {
// item: 配列の各要素
// index: 配列のインデックス
return <Text>{item.id}</Text>;
};
// FlatListが内部的に data.map(renderItem) のような処理をしている
要するに「配列の各要素に対してrenderItem関数を実行してコンポーネントを生成する」だけでした。
理解してしまえばシンプルですが、最初は「なんで関数を渡すの？」って混乱してました。
🎯 今日の感想
Zustandは本当に使いやすいです。Reduxより圧倒的にシンプルだし、Context APIより高機能。
個人開発レベルなら十分すぎる性能ですね。
Partial<T>型も、今まで「TypeScriptの型チェックがうるさいな」って思ってた場面で活用できそう。
TypeScriptって、使いこなせると本当に便利ですね。
明日は配列生成の問題を解決して、もう少し複雑な状態管理にチャレンジしてみます。