「深掘りしていたら科学に詳しくなる」段階的開示設計
ユーザーが自然に科学知識を深められるよう、情報を3つのレベルに分類して段階的に提供します。
専門用語を使わず、比喩や日常表現で説明。誰でも楽しめる基本情報。
基礎的な科学用語と概念を導入。化学式、反応式、結晶構造など。
学術論文レベルの詳細情報。量子論的解釈、最新研究など。
Zustandによるlayer-storeでレイヤー状態を管理
// src/stores/layer-store.ts
import { create } from 'zustand';
type Layer = 'L1' | 'L2' | 'L3';
interface LayerStore {
currentLayer: Layer;
setLayer: (layer: Layer) => void;
}
export const useLayerStore = create<LayerStore>((set) => ({
currentLayer: 'L1',
setLayer: (layer) => set({ currentLayer: layer }),
}));LayerToggleコンポーネントでL1/L2/L3を切り替え
// LayerToggle component usage
<LayerToggle />
// Conditional rendering
const { currentLayer } = useLayerStore();
{currentLayer === 'L1' && <L1Content />}
{currentLayer === 'L2' && <L2Content />}
{currentLayer === 'L3' && <L3Content />}currentLayerに応じてコンテンツを条件分岐
詳細な実装状況は docs/35_technical_guide/02_LAYER_SYSTEM.md をご参照ください。