Vite と Firebase を組み合わせた高速 SPA 構築

2025年7月24日

Vite

現代の Web 開発において、開発速度とパフォーマンスの両立は永遠の課題です。Vite と Firebase の組み合わせは、この課題を解決する最強のツールセットとして注目を集めています。

Vite の驚異的な開発サーバー起動速度と、Firebase のスケーラブルなバックエンドサービスが融合することで、開発者は高速な開発体験と本番レベルの機能を同時に手に入れることができます。

この記事では、実際の開発現場で使える実践的なアプローチで、Vite と Firebase を組み合わせた高速 SPA の構築方法を詳しく解説していきます。初心者の方でも安心して取り組めるよう、段階的に進めていきましょう。

Vite による高速開発環境の構築

Vite の特徴と従来ツールとの比較

Vite は、Evan You（Vue.js の作者）によって開発された次世代のフロントエンドビルドツールです。従来の Webpack や Parcel と比較して、驚くべき速度の違いを体験できます。

従来ツールとの比較表

項目	Webpack	Parcel	Vite
開発サーバー起動	30-60 秒	15-30 秒	1-3 秒
ホットリロード	遅い	普通	即座
設定の複雑さ	高	低	中
学習コスト	高	低	中

Vite の最大の特徴は、ES Modules を活用した開発サーバーの実装にあります。従来のツールがバンドルベースで動作していたのに対し、Vite は必要なモジュールのみを即座に変換して提供します。

プロジェクトの初期設定と基本構成

まず、新しい Vite プロジェクトを作成しましょう。TypeScript と React を使用した構成で進めていきます。

bash# Vite プロジェクトの作成
yarn create vite my-vite-firebase-app --template react-ts

# プロジェクトディレクトリに移動
cd my-vite-firebase-app

# 依存関係のインストール
yarn install

プロジェクトが作成されたら、基本的なディレクトリ構造を確認しましょう。

bash# プロジェクト構造の確認
tree -L 2 -I node_modules

期待される出力：

arduinomy-vite-firebase-app/
├── public/
├── src/
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

次に、開発に必要な追加パッケージをインストールします。

bash# ルーティングとFirebase用のパッケージを追加
yarn add react-router-dom firebase

# 開発用の型定義を追加
yarn add -D @types/node

開発サーバーの起動とホットリロード

Vite の開発サーバーを起動して、その高速性を体験してみましょう。

bash# 開発サーバーの起動
yarn dev

起動すると、以下のような出力が表示されます：

arduino  VITE v4.4.5  ready in 234 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

この驚異的な起動速度（234ms）が、Vite の真価です。従来の Webpack では数分かかることもあった起動時間が、わずか 1 秒未満で完了します。

よくあるエラーと解決方法

開発サーバー起動時に以下のエラーが発生した場合の対処法です：

bash# エラー: EADDRINUSE: address already in use :::5173
# 解決方法：ポートを変更して起動
yarn dev --port 3000

bash# エラー: Cannot find module 'vite'
# 解決方法：依存関係を再インストール
rm -rf node_modules yarn.lock
yarn install

Firebase の統合と認証システム

Firebase プロジェクトの作成と設定

Firebase プロジェクトを作成し、Vite アプリケーションと統合していきます。

まず、Firebase Console でプロジェクトを作成した後、Web アプリケーションを追加します。設定情報は以下のような形式で提供されます。

typescript// src/firebase/config.ts
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'your-api-key',
  authDomain: 'your-project.firebaseapp.com',
  projectId: 'your-project-id',
  storageBucket: 'your-project.appspot.com',
  messagingSenderId: '123456789',
  appId: 'your-app-id',
};

// Firebase アプリの初期化
const app = initializeApp(firebaseConfig);

// 認証とFirestoreの初期化
export const auth = getAuth(app);
export const db = getFirestore(app);

重要なセキュリティ注意点

Firebase の設定情報は、環境変数として管理することを強く推奨します。

typescript// .env.local ファイルを作成
VITE_FIREBASE_API_KEY = your - api - key;
VITE_FIREBASE_AUTH_DOMAIN = your - project.firebaseapp.com;
VITE_FIREBASE_PROJECT_ID = your - project - id;
VITE_FIREBASE_STORAGE_BUCKET = your - project.appspot.com;
VITE_FIREBASE_MESSAGING_SENDER_ID = 123456789;
VITE_FIREBASE_APP_ID = your - app - id;

typescript// 環境変数を使用した設定
const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env
    .VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env
    .VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
};

Authentication の実装

Firebase Authentication を使用して、ユーザー認証機能を実装します。

typescript// src/hooks/useAuth.ts
import { useState, useEffect } from 'react';
import {
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
  User,
} from 'firebase/auth';
import { auth } from '../firebase/config';

export const useAuth = () => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setUser(user);
      setLoading(false);
    });

    return unsubscribe;
  }, []);

  const signIn = async (
    email: string,
    password: string
  ) => {
    try {
      const result = await signInWithEmailAndPassword(
        auth,
        email,
        password
      );
      return { success: true, user: result.user };
    } catch (error: any) {
      return { success: false, error: error.message };
    }
  };

  const signUp = async (
    email: string,
    password: string
  ) => {
    try {
      const result = await createUserWithEmailAndPassword(
        auth,
        email,
        password
      );
      return { success: true, user: result.user };
    } catch (error: any) {
      return { success: false, error: error.message };
    }
  };

  const logout = () => signOut(auth);

  return { user, loading, signIn, signUp, logout };
};

認証コンポーネントの実装例：

typescript// src/components/AuthForm.tsx
import { useState } from 'react';
import { useAuth } from '../hooks/useAuth';

export const AuthForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isSignUp, setIsSignUp] = useState(false);
  const { signIn, signUp } = useAuth();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    const result = isSignUp
      ? await signUp(email, password)
      : await signIn(email, password);

    if (!result.success) {
      alert(`認証エラー: ${result.error}`);
    }
  };

  return (
    <form onSubmit={handleSubmit} className='auth-form'>
      <input
        type='email'
        placeholder='メールアドレス'
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <input
        type='password'
        placeholder='パスワード'
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        required
      />
      <button type='submit'>
        {isSignUp ? '新規登録' : 'ログイン'}
      </button>
      <button
        type='button'
        onClick={() => setIsSignUp(!isSignUp)}
      >
        {isSignUp
          ? 'ログインに切り替え'
          : '新規登録に切り替え'}
      </button>
    </form>
  );
};

よくある認証エラーと対処法

typescript// エラー: Firebase: Error (auth/user-not-found)
// 原因：存在しないユーザーでログインを試行
// 対処法：ユーザー登録を先に実行

// エラー: Firebase: Error (auth/wrong-password)
// 原因：パスワードが間違っている
// 対処法：パスワードリセット機能の実装

// エラー: Firebase: Error (auth/email-already-in-use)
// 原因：既に登録済みのメールアドレスで新規登録
// 対処法：ログインフローに誘導

セキュリティルールの設定

Firestore のセキュリティルールを設定して、データの安全性を確保します。

javascript// firestore.rules
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // ユーザーは自分のデータのみアクセス可能
    match /users/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }

    // 公開データは誰でも読み取り可能
    match /public/{document=**} {
      allow read: if true;
      allow write: if request.auth != null;
    }

    // 管理者のみがアクセス可能なデータ
    match /admin/{document=**} {
      allow read, write: if request.auth != null &&
        request.auth.token.admin == true;
    }
  }
}

セキュリティルールのデプロイ

bash# Firebase CLI のインストール
yarn global add firebase-tools

# Firebase にログイン
firebase login

# プロジェクトの初期化
firebase init firestore

# セキュリティルールのデプロイ
firebase deploy --only firestore:rules

データベース連携とリアルタイム機能

Firestore の基本操作

Firestore を使用してデータの基本的な CRUD 操作を実装します。

typescript// src/services/firestore.ts
import {
  collection,
  doc,
  getDocs,
  getDoc,
  addDoc,
  updateDoc,
  deleteDoc,
  query,
  where,
  orderBy,
} from 'firebase/firestore';
import { db } from '../firebase/config';

// データの型定義
export interface Post {
  id?: string;
  title: string;
  content: string;
  authorId: string;
  createdAt: Date;
  updatedAt: Date;
}

// データの作成
export const createPost = async (
  postData: Omit<Post, 'id' | 'createdAt' | 'updatedAt'>
) => {
  try {
    const docRef = await addDoc(collection(db, 'posts'), {
      ...postData,
      createdAt: new Date(),
      updatedAt: new Date(),
    });
    return { success: true, id: docRef.id };
  } catch (error: any) {
    return { success: false, error: error.message };
  }
};

// データの取得（単一）
export const getPost = async (id: string) => {
  try {
    const docRef = doc(db, 'posts', id);
    const docSnap = await getDoc(docRef);

    if (docSnap.exists()) {
      return {
        success: true,
        data: { id: docSnap.id, ...docSnap.data() },
      };
    } else {
      return {
        success: false,
        error: 'ドキュメントが見つかりません',
      };
    }
  } catch (error: any) {
    return { success: false, error: error.message };
  }
};

typescript// データの取得（複数）
export const getPosts = async (authorId?: string) => {
  try {
    let q = collection(db, 'posts');

    if (authorId) {
      q = query(q, where('authorId', '==', authorId));
    }

    q = query(q, orderBy('createdAt', 'desc'));
    const querySnapshot = await getDocs(q);

    const posts = querySnapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
    }));

    return { success: true, data: posts };
  } catch (error: any) {
    return { success: false, error: error.message };
  }
};

// データの更新
export const updatePost = async (
  id: string,
  updateData: Partial<Post>
) => {
  try {
    const docRef = doc(db, 'posts', id);
    await updateDoc(docRef, {
      ...updateData,
      updatedAt: new Date(),
    });
    return { success: true };
  } catch (error: any) {
    return { success: false, error: error.message };
  }
};

// データの削除
export const deletePost = async (id: string) => {
  try {
    const docRef = doc(db, 'posts', id);
    await deleteDoc(docRef);
    return { success: true };
  } catch (error: any) {
    return { success: false, error: error.message };
  }
};

リアルタイムリスナーの実装

Firestore のリアルタイムリスナーを使用して、データの変更を即座に反映させます。

typescript// src/hooks/usePosts.ts
import { useState, useEffect } from 'react';
import {
  collection,
  onSnapshot,
  query,
  orderBy,
  where,
} from 'firebase/firestore';
import { db } from '../firebase/config';
import { Post } from '../services/firestore';

export const usePosts = (authorId?: string) => {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let q = collection(db, 'posts');

    if (authorId) {
      q = query(q, where('authorId', '==', authorId));
    }

    q = query(q, orderBy('createdAt', 'desc'));

    const unsubscribe = onSnapshot(
      q,
      (querySnapshot) => {
        const postsData = querySnapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        })) as Post[];

        setPosts(postsData);
        setLoading(false);
        setError(null);
      },
      (error) => {
        console.error('リアルタイムリスナーエラー:', error);
        setError(error.message);
        setLoading(false);
      }
    );

    return () => unsubscribe();
  }, [authorId]);

  return { posts, loading, error };
};

リアルタイムリスナーの最適化

typescript// パフォーマンス最適化のためのリスナー設定
export const useOptimizedPosts = (
  authorId?: string,
  limit = 10
) => {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let q = collection(db, 'posts');

    if (authorId) {
      q = query(q, where('authorId', '==', authorId));
    }

    // 最新の10件のみを取得
    q = query(
      q,
      orderBy('createdAt', 'desc'),
      limit(limit)
    );

    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      const postsData = querySnapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      })) as Post[];

      setPosts(postsData);
      setLoading(false);
    });

    return () => unsubscribe();
  }, [authorId, limit]);

  return { posts, loading };
};

データの CRUD 操作

実際のコンポーネントで CRUD 操作を実装してみましょう。

typescript// src/components/PostList.tsx
import { useState } from 'react';
import { usePosts } from '../hooks/usePosts';
import {
  createPost,
  updatePost,
  deletePost,
} from '../services/firestore';
import { useAuth } from '../hooks/useAuth';

export const PostList = () => {
  const { user } = useAuth();
  const { posts, loading } = usePosts();
  const [newPost, setNewPost] = useState({
    title: '',
    content: '',
  });
  const [editingId, setEditingId] = useState<string | null>(
    null
  );

  const handleCreatePost = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!user) return;

    const result = await createPost({
      title: newPost.title,
      content: newPost.content,
      authorId: user.uid,
    });

    if (result.success) {
      setNewPost({ title: '', content: '' });
    } else {
      alert(`投稿エラー: ${result.error}`);
    }
  };

  const handleUpdatePost = async (
    id: string,
    data: { title: string; content: string }
  ) => {
    const result = await updatePost(id, data);
    if (result.success) {
      setEditingId(null);
    } else {
      alert(`更新エラー: ${result.error}`);
    }
  };

  const handleDeletePost = async (id: string) => {
    if (confirm('本当に削除しますか？')) {
      const result = await deletePost(id);
      if (!result.success) {
        alert(`削除エラー: ${result.error}`);
      }
    }
  };

  if (loading) return <div>読み込み中...</div>;

  return (
    <div className='post-list'>
      {/* 新規投稿フォーム */}
      <form
        onSubmit={handleCreatePost}
        className='post-form'
      >
        <input
          type='text'
          placeholder='タイトル'
          value={newPost.title}
          onChange={(e) =>
            setNewPost({
              ...newPost,
              title: e.target.value,
            })
          }
          required
        />
        <textarea
          placeholder='内容'
          value={newPost.content}
          onChange={(e) =>
            setNewPost({
              ...newPost,
              content: e.target.value,
            })
          }
          required
        />
        <button type='submit'>投稿</button>
      </form>

      {/* 投稿一覧 */}
      <div className='posts'>
        {posts.map((post) => (
          <div key={post.id} className='post'>
            {editingId === post.id ? (
              <PostEditForm
                post={post}
                onSave={(data) =>
                  handleUpdatePost(post.id!, data)
                }
                onCancel={() => setEditingId(null)}
              />
            ) : (
              <div>
                <h3>{post.title}</h3>
                <p>{post.content}</p>
                <div className='post-actions'>
                  <button
                    onClick={() => setEditingId(post.id!)}
                  >
                    編集
                  </button>
                  <button
                    onClick={() =>
                      handleDeletePost(post.id!)
                    }
                  >
                    削除
                  </button>
                </div>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

エラーハンドリングのベストプラクティス

typescript// エラーハンドリング用のカスタムフック
export const useFirestoreError = () => {
  const handleError = (error: any, operation: string) => {
    console.error(`${operation} エラー:`, error);

    // エラーメッセージの日本語化
    const errorMessages: { [key: string]: string } = {
      'permission-denied': '権限がありません',
      'not-found': 'データが見つかりません',
      'already-exists': '既に存在します',
      'resource-exhausted': 'リソースが不足しています',
      'failed-precondition': '前提条件が満たされていません',
      aborted: '操作が中止されました',
      'out-of-range': '範囲外の値です',
      unimplemented: '実装されていません',
      internal: '内部エラーが発生しました',
      unavailable: 'サービスが利用できません',
      'data-loss': 'データが失われました',
      unauthenticated: '認証が必要です',
    };

    return errorMessages[error.code] || error.message;
  };

  return { handleError };
};

パフォーマンス最適化とデプロイ

Vite のビルド最適化

Vite のビルド設定を最適化して、本番環境でのパフォーマンスを向上させます。

typescript// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  build: {
    // ビルド最適化設定
    target: 'es2015',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true, // 本番環境でconsole.logを削除
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        // チャンク分割の設定
        manualChunks: {
          vendor: ['react', 'react-dom'],
          firebase: [
            'firebase/app',
            'firebase/auth',
            'firebase/firestore',
          ],
          router: ['react-router-dom'],
        },
      },
    },
    // アセットの最適化
    assetsInlineLimit: 4096, // 4KB以下のアセットをインライン化
    chunkSizeWarningLimit: 1000, // チャンクサイズ警告の閾値
  },
  // 開発サーバーの設定
  server: {
    port: 3000,
    open: true,
    cors: true,
  },
  // プレビューサーバーの設定
  preview: {
    port: 4173,
    open: true,
  },
});

環境別の設定

typescript// vite.config.ts の環境別設定
export default defineConfig(({ command, mode }) => {
  const isProduction = mode === 'production';

  return {
    plugins: [react()],
    define: {
      // 環境変数の定義
      __DEV__: !isProduction,
    },
    build: {
      // 本番環境での最適化
      ...(isProduction && {
        minify: 'terser',
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true,
          },
        },
      }),
    },
  };
});

コード分割の実装

typescript// src/App.tsx
import { lazy, Suspense } from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
} from 'react-router-dom';

// 遅延読み込みによるコード分割
const Home = lazy(() => import('./pages/Home'));
const Posts = lazy(() => import('./pages/Posts'));
const Profile = lazy(() => import('./pages/Profile'));

export const App = () => {
  return (
    <Router>
      <Suspense fallback={<div>読み込み中...</div>}>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/posts' element={<Posts />} />
          <Route path='/profile' element={<Profile />} />
        </Routes>
      </Suspense>
    </Router>
  );
};

Firebase Hosting へのデプロイ

Firebase Hosting を使用してアプリケーションをデプロイします。

bash# Firebase CLI のインストール（まだの場合）
yarn global add firebase-tools

# Firebase プロジェクトの初期化
firebase init hosting

Firebase の設定ファイルを作成します：

json// firebase.json
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000"
          }
        ]
      }
    ]
  }
}

デプロイスクリプトを package.json に追加：

json// package.json
{
  "scripts": {
    "build": "tsc && vite build",
    "deploy": "yarn build && firebase deploy --only hosting",
    "deploy:preview": "yarn build && firebase hosting:channel:deploy preview"
  }
}

デプロイの実行

bash# 本番環境へのデプロイ
yarn deploy

# プレビュー環境へのデプロイ
yarn deploy:preview

よくあるデプロイエラーと解決方法

bash# エラー: Error: ENOENT: no such file or directory, open 'dist/index.html'
# 原因：ビルドが失敗している
# 解決方法：ビルドを先に実行
yarn build

# エラー: Firebase CLI not found
# 原因：Firebase CLI がインストールされていない
# 解決方法：グローバルインストール
yarn global add firebase-tools

# エラー: Project not found
# 原因：Firebase プロジェクトが選択されていない
# 解決方法：プロジェクトを選択
firebase use your-project-id

本番環境でのパフォーマンス監視

Firebase Analytics と Performance Monitoring を使用して、本番環境でのパフォーマンスを監視します。

typescript// src/firebase/analytics.ts
import { getAnalytics, logEvent } from 'firebase/analytics';
import { app } from './config';

const analytics = getAnalytics(app);

// カスタムイベントの記録
export const logCustomEvent = (
  eventName: string,
  parameters?: object
) => {
  logEvent(analytics, eventName, parameters);
};

// ページビューの記録
export const logPageView = (pageName: string) => {
  logEvent(analytics, 'page_view', {
    page_name: pageName,
    page_title: document.title,
  });
};

// ユーザーアクションの記録
export const logUserAction = (
  action: string,
  details?: object
) => {
  logEvent(analytics, 'user_action', {
    action,
    timestamp: new Date().toISOString(),
    ...details,
  });
};

typescript// src/firebase/performance.ts
import {
  getPerformance,
  trace,
} from 'firebase/performance';
import { app } from './config';

const performance = getPerformance(app);

// カスタムトレースの作成
export const createCustomTrace = (traceName: string) => {
  return trace(performance, traceName);
};

// API 呼び出しのパフォーマンス測定
export const measureApiCall = async (
  apiName: string,
  apiCall: () => Promise<any>
) => {
  const customTrace = createCustomTrace(`api_${apiName}`);

  try {
    customTrace.start();
    const result = await apiCall();
    customTrace.stop();
    return result;
  } catch (error) {
    customTrace.stop();
    throw error;
  }
};

// ページ読み込み時間の測定
export const measurePageLoad = (pageName: string) => {
  const customTrace = createCustomTrace(
    `page_load_${pageName}`
  );
  customTrace.start();

  // ページの読み込みが完了したら停止
  window.addEventListener('load', () => {
    customTrace.stop();
  });
};

パフォーマンス監視の実装例

typescript// src/hooks/usePerformance.ts
import { useEffect } from 'react';
import {
  logPageView,
  logUserAction,
} from '../firebase/analytics';
import { measurePageLoad } from '../firebase/performance';

export const usePerformanceMonitoring = (
  pageName: string
) => {
  useEffect(() => {
    // ページビューの記録
    logPageView(pageName);

    // ページ読み込み時間の測定
    measurePageLoad(pageName);
  }, [pageName]);

  const trackUserAction = (
    action: string,
    details?: object
  ) => {
    logUserAction(action, details);
  };

  return { trackUserAction };
};

パフォーマンス最適化のベストプラクティス

typescript// src/utils/performance.ts
// 画像の遅延読み込み
export const lazyLoadImage = (
  imgElement: HTMLImageElement,
  src: string
) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        imgElement.src = src;
        observer.unobserve(imgElement);
      }
    });
  });

  observer.observe(imgElement);
};

// デバウンス関数
export const debounce = <T extends (...args: any[]) => any>(
  func: T,
  wait: number
): ((...args: Parameters<T>) => void) => {
  let timeout: NodeJS.Timeout;

  return (...args: Parameters<T>) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
};

// メモ化によるパフォーマンス最適化
export const memoize = <T extends (...args: any[]) => any>(
  func: T
): T => {
  const cache = new Map();

  return ((...args: Parameters<T>) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }

    const result = func(...args);
    cache.set(key, result);
    return result;
  }) as T;
};