「単一の情報源」とはどういう意味ですか？

Question

Accepted Answer

**単一の情報源**とは、各データが**正確に1つの場所に**保存され、それが必要なものはすべてそこから読み込むことを意味します。同期が外れる可能性がある複数のコピーを保持するのではなく。

## 重複した相互に矛盾する状態が生じる問題

```jsx
// ❌ the same data stored in two places → they can disagree
function Profile() {
  const [user, setUser] = useState({ name: "Ann" });
  const [displayName, setDisplayName] = useState("Ann"); // a COPY of user.name

function rename(newName) {
    setUser({ ...user, name: newName }); // updated user...
    // ...but forgot to update displayName → now they're out of sync! 🐛
  }
}
```

同じ事実が2つの状態に存在する場合、すべての更新で両方を変更することを覚えておく必要があります。そして必然的に1つが見落とされ、UIに矛盾した値を表示するバグが生じます。

## 修正：1つの情報源、残りは派生させる

```jsx
// ✅ user.name is the single source; displayName is DERIVED, not stored
function Profile() {
  const [user, setUser] = useState({ name: "Ann" });
  const displayName = user.name.toUpperCase(); // computed on render — always in sync

function rename(newName) {
    setUser({ ...user, name: newName }); // one update, everything stays consistent
  }
}
```

正規の値を1回保存し、そこから派生できるものはすべてその場で計算します。同期を保つものは何もありません。

## この原則が適用される場所

```text
✓ Don't copy props into state (the prop is the source)
✓ Don't store derived values (compute them: totals, filtered lists, formatted text)
✓ Global stores (Redux/Pinia): one store is the source for shared data
✓ Server data: cache it once (React Query) rather than copying into many components
✓ URL as source: filters/page in the URL, read from there
```

## なぜ重要なのか

単一の情報源は信頼性の高い状態管理の基本的な原則です。重複したデータが異なってしまうことが原因で発生するバグの全類を排除します。

これが値を保存するのではなく派生させる理由、propsを状態にコピーするのを避ける理由、グローバルストアが共有データを集約する理由です。

データが1つの信頼できるホームを持ち、すべてがそこから読み込む場合、UIは構造上一貫性が保たれます。