SPA + API構成

# Viteの公式テンプレートを使用してプロジェクトを作成
npm create vite@latest my-svelte-spa -- --template svelte-ts

# プロジェクトディレクトリに移動
cd my-svelte-spa

# 依存関係をインストール
npm install

# SPAルーターパッケージをインストール
npm install svelte-spa-router

// src/routes.ts
import Home from './routes/Home.svelte';
import About from './routes/About.svelte';
import NotFound from './routes/NotFound.svelte';

// ルートパスとコンポーネントのマッピング
export const routes = {
  '/': Home,           // ホームページ
  '/about': About,     // アバウトページ
  '*': NotFound        // 404ページ（マッチしないすべてのルート）
};

<!-- src/App.svelte -->
<script lang="ts">
  import Router from 'svelte-spa-router';
  import { routes } from './routes';
</script>

<!-- ルーターコンポーネントがルートに応じて適切なコンポーネントをレンダリング -->
<Router {routes} />

// src/stores/app.svelte.ts
// Svelte 5のRunesを使用したストアクラス
class AppStore {
  // $stateでリアクティブな状態を定義
  user = $state<User | null>(null);     // 現在のユーザー情報
  loading = $state(false);               // ローディング状態
  
  // ログイン処理
  async login(email: string, password: string) {
    this.loading = true;
    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      });
      
      if (response.ok) {
        // レスポンスからユーザー情報を取得し、状態を更新
        this.user = await response.json();
      }
    } finally {
      this.loading = false;
    }
  }
  
  // ログアウト処理
  logout() {
    this.user = null;
    // 必要に応じてlocalStorageやセッションをクリア
  }
}

// シングルトンインスタンスとしてエクスポート
export const appStore = new AppStore();

// src/lib/api.ts
class ApiClient {
  // 環境変数からAPIのベースURLを取得（デフォルト: localhost:3000）
  private baseUrl = import.meta.env.VITE_API_URL || 'http://localhost:3000';
  private token: string | null = null;
  
  // 認証トークンを設定し、localStorageに保存
  setToken(token: string) {
    this.token = token;
    localStorage.setItem('auth_token', token);
  }
  
  // 汎用的なリクエストメソッド（ジェネリクスで型安全性を確保）
  async request<T>(
    endpoint: string,
    options: RequestInit = {}
  ): Promise<T> {
    const url = `${this.baseUrl}${endpoint}`;
    
    // デフォルトのヘッダー設定
    const headers: HeadersInit = {
      'Content-Type': 'application/json',
      ...options.headers  // カスタムヘッダーをマージ
    };
    
    // 認証トークンがある場合は Authorization ヘッダーを追加
    if (this.token) {
      headers['Authorization'] = `Bearer ${this.token}`;
    }
    
    // fetchリクエストを実行
    const response = await fetch(url, {
      ...options,
      headers
    });
    
    // エラーレスポンスの場合は例外をスロー
    if (!response.ok) {
      throw new Error(`API Error: ${response.statusText}`);
    }
    
    // JSONレスポンスを型付きで返す
    return response.json();
  }
  
  // GETリクエスト用のヘルパーメソッド
  get<T>(endpoint: string) {
    return this.request<T>(endpoint, { method: 'GET' });
  }
  
  // POSTリクエスト用のヘルパーメソッド
  post<T>(endpoint: string, data: any) {
    return this.request<T>(endpoint, {
      method: 'POST',
      body: JSON.stringify(data)
    });
  }
  
  // 必要に応じてPUT、DELETE、PATCHメソッドも追加可能
}

// シングルトンインスタンスとしてエクスポート
export const api = new ApiClient();

// src/types/api.ts

// ユーザー情報の型定義
export interface User {
  id: string;           // ユニークID
  email: string;        // メールアドレス
  name: string;         // 表示名
  avatar?: string;      // アバター画像URL（オプショナル）
}

// ブログ投稿の型定義
export interface Post {
  id: string;           // 投稿ID
  title: string;        // タイトル
  content: string;      // 本文
  author: User;         // 投稿者（User型でネスト）
  createdAt: Date;      // 作成日時
}

// API レスポンスの汎用型
// ジェネリクスを使用して様々なデータ型に対応
export interface ApiResponse<T> {
  data: T;              // 実際のデータ
  message?: string;     // 成功/エラーメッセージ
  error?: string;       // エラー詳細
}

// 型定義を使用したAPI呼び出し
const response = await api.get<ApiResponse<User[]>>('/users');
// response.data は User[] 型として推論される

// package.json
{`{
  "scripts": {
    "dev": "vite",                          // 開発サーバー起動
    "build": "vite build",                  // プロダクションビルド
    "preview": "vite preview",              // ビルド結果のプレビュー
    "deploy": "npm run build && netlify deploy --prod"  // ビルド後にNetlifyへデプロイ
  }
}`}

// src/config/env.ts
// 環境変数を一元管理するコンフィグオブジェクト
export const config = {
  // APIエンドポイント
  apiUrl: import.meta.env.VITE_API_URL,
  
  // Firebase設定（必要に応じて）
  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,
    // その他の設定...
  },
  
  // 環境判定フラグ（Viteが自動提供）
  isDevelopment: import.meta.env.DEV,   // 開発環境かどうか
  isProduction: import.meta.env.PROD     // 本番環境かどうか
};

# .env.local（開発環境）
VITE_API_URL=http://localhost:3000
VITE_FIREBASE_API_KEY=your-dev-api-key

# .env.production（本番環境）
VITE_API_URL=https://api.example.com
VITE_FIREBASE_API_KEY=your-prod-api-key

// src/lib/error-handler.ts

// カスタムエラークラス（APIエラー用）
export class ApiError extends Error {
  constructor(
    public status: number,        // HTTPステータスコード
    message: string,              // エラーメッセージ
    public data?: any            // 追加のエラーデータ
  ) {
    super(message);
    this.name = 'ApiError';
  }
}

// 汎用エラーハンドリング関数
export function handleError(error: unknown): string {
  // ApiErrorの場合
  if (error instanceof ApiError) {
    // ステータスコードに応じた処理も可能
    if (error.status === 401) {
      // 認証エラーの場合はログイン画面へリダイレクト等
      return '認証が必要です';
    }
    return error.message;
  }
  
  // 通常のErrorの場合
  if (error instanceof Error) {
    return error.message;
  }
  
  // 予期しないエラーの場合
  console.error('Unknown error:', error);
  return '予期しないエラーが発生しました';
}

// src/lib/seo.ts

// メタタグを動的に更新する関数
export function updateMetaTags(data: {
  title?: string;        // ページタイトル
  description?: string;   // ページ説明
  image?: string;        // OGP画像
}) {
  // タイトルの更新
  if (data.title) {
    document.title = data.title;
  }
  
  // メタタグを設定/更新するヘルパー関数
  const setMeta = (name: string, content: string) => {
    let element = document.querySelector(`meta[name="${name}"]`);
    
    // メタタグが存在しない場合は新規作成
    if (!element) {
      element = document.createElement('meta');
      element.setAttribute('name', name);
      document.head.appendChild(element);
    }
    
    // コンテンツを更新
    element.setAttribute('content', content);
  };
  
  // descriptionメタタグの更新
  if (data.description) {
    setMeta('description', data.description);
    // OGP用のメタタグも同時に更新
    setMeta('og:description', data.description);
  }
  
  // OGP画像の更新
  if (data.image) {
    setMeta('og:image', data.image);
    setMeta('twitter:image', data.image);
  }
}

// 使用例：ルート変更時にメタタグを更新
// updateMetaTags({
//   title: '商品詳細 | My Shop',
//   description: 'この商品の詳細説明...',
//   image: 'https://example.com/product.jpg'
// });