シングルページアプリケーション用のJavaScriptのルーティングシステム

? SPA 用のバニラ JavaScript でのシンプルなルーティング システムの構築

シングル ページ アプリケーション (SPA) の世界では、フレームワークなしでルートを管理するのは困難に思えるかもしれません。しかし、Vanilla JavaScript を使用すると、シンプルでありながら強力なルーティング システムを作成できます。 ?

---

開始するためのクイックガイドは次のとおりです:

1️⃣ ルーティングの基本を理解する

SPA でのルーティングには、URL を特定のビューまたはコンテンツにマッピングすることが含まれます。ページをリロードする代わりに、アプリは URL に基づいてコンテンツを動的に更新します。

2️⃣ コアコンセプト

• ハッシュベースのルーティング: window.location.hash (例: /#/home) を使用します。シンプルでサーバー設定は必要ありません。
• History API: よりクリーンな URL (/home など) のために PushState と Popstate を活用します。

3️⃣ 構築手順

ステップ 1: HTML 構造を設定する

<div>



<h3>
  
  
  <strong>Step 2: Create the Router</strong>
</h3>



<pre class="brush:php;toolbar:false">class Router {
  constructor(routes) {
    this.routes = routes;
    this.init();
  }

  init() {
    window.addEventListener("hashchange", () => this.handleRouteChange());
    this.handleRouteChange();
  }

  handleRouteChange() {
    const currentPath = window.location.hash.slice(1);
    const route = this.routes[currentPath];
    if (route) {
      route();
    } else {
      this.routes["/404"]();
    }
  }
}

// Usage
const router = new Router({
  "/": () => (document.getElementById("root").innerHTML = "Home Page"),
  "/about": () => (document.getElementById("root").innerHTML = "About Page"),
  "/404": () => (document.getElementById("root").innerHTML = "404 Page"),
});

4️⃣ 機能強化

• URL をよりクリーンにするには、History API を使用します。
• パフォーマンスを向上させるために、コンテンツまたはテンプレートを遅延読み込みします。
• ユーザー エクスペリエンスを向上させるために 404 ルートとフォールバック ルートを追加します。

なぜこれを自分で構築するのでしょうか?

• 深い理解: ルーティングの背後にある仕組みを学びます。
• 柔軟性: ライブラリの制約を受けることなく、ニーズに合わせてカスタマイズできます。
• パフォーマンス: 外部依存関係のオーバーヘッドを回避します。

---

? プロのヒント: より大きなアプリを構築している場合は、コードをモジュール化し、クエリ パラメーターやネストされたルートなどのエッジ ケースを処理することを検討してください。

独自のルーティング システムを構築したことがありますか?コメントであなたの経験を共有してください！ ?