【プログラミング】【フロント】SPA - j-komatsu/myCheatSheet GitHub Wiki

フロントエンドのSPA（Single Page Application）

1. SPAとは？

初学者向け

SPA（Single Page Application）とは、ユーザーがページを遷移せずに動的にコンテンツを更新するWebアプリケーションのことです。

特徴:

  • ページの読み込みが1回だけ（初回アクセス時にすべてのリソースを取得）
  • URLの変更はブラウザの履歴APIを利用
  • 部分的なコンテンツの更新が可能

例:

  • Gmail
  • Facebook
  • Google Maps

専門者向け

SPAは、JavaScriptフレームワーク（React, Vue.js, Angularなど）を活用して、仮想DOMやコンポーネントベースの設計を採用しています。

メリット:

  • サーバー負荷の軽減（API通信が中心）
  • 滑らかなUX（ページ遷移なし）
  • フロントエンドとバックエンドの分離が容易

デメリット:

  • 初回ロードが遅い
  • SEO対策が難しい（SSRやSSGが必要）
  • JavaScriptの処理負荷が増大

2. SPAの仕組み

以下はSPAの動作の流れを示すフロー図です。

graph TD;
  A[ユーザーアクセス] -->|HTML,CSS,JSを取得| B[初回レンダリング];
  B --> C[ルーターでURLを制御];
  C --> D[コンポーネントの更新];
  D -->|データ取得| E[APIサーバー];
  E -->|JSONレスポンス| D;
  D --> F[UI更新];
  F -->|ユーザー操作| C;
Loading

3. SPAの実装例

以下にReactを使用した簡単なSPAの実装例を示します。

3.1 Reactを使用したルーティング

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';

const Home = () => <h2>ホームページ</h2>;
const About = () => <h2>アバウトページ</h2>;

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">ホーム</Link>
        <Link to="/about">アバウト</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

3.2 APIとデータの取得（React）

import React, { useState, useEffect } from 'react';

function DataComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setData(data.slice(0, 5))); // 5件取得
  }, []);

  return (
    <div>
      <h2>データ一覧</h2>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataComponent;

4. SPAの最適化手法

課題 解決策
初回ロードが遅い コード分割、Lazy Load
SEOが難しい SSR（Next.js）、SSG（Gatsby.js）を活用
APIリクエストが多い キャッシュ、GraphQL

5. まとめ

SPAは、高速でスムーズなユーザー体験を提供する一方、SEOや初回ロードの問題があるため、適切なフレームワークや最適化手法を活用することが重要です。

以上、SPAの基本と実装例を紹介しました！

⚠️ **GitHub.com Fallback** ⚠️