フロントエンドアーキテクチャ＠フロントエンドアーキテクチャ¶
はじめに¶
本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。
01. MVCアーキテクチャ¶
MVCアーキテクチャとは¶
記入中...
UIレンダリングパターンとの関係性¶
以下のUIレンダリングパターンを使用している場合、MVCアーキテクチャで構築することになる。
- SSR
Nuxt.jsを参考に考える¶
Nuxt.jsとAtomic Designのレイヤーは以下の様に対応する。
| Nuxt.jsのディレクトリ | Atomic Designのレイヤー |
|---|---|
| components | Atoms、Molecules、Organisms |
| pages | Pages |
| layouts | Templates |
02. Feature Sliced Design (機能スライス設計)¶
.
├─ app/ # レイヤー
│ ├─ routes/
│ └─ analytics/
│
├─ pages/ # レイヤー
│ ├─ home/ # スライス
│ ├─ article/ # スライス
│ │ ├─ ui/ # セグメント
│ │ └─ api/
│ │
│ └─ settings/
│
└─ shared/ # レイヤー
├─ ui/
└─ api/
03. クリーンアーキテクチャ¶
フロントエンドアプリケーションにはビジネスロジックがないため、クリーンアーキテクチャを採用する意義がない。
やめましょう。
04. マイクロフロントエンド¶
UI部品合成とは¶
静的ファイル (例：html ファイル、css ファイル、画像、動画、メールなど) のコンポーネントを、各マイクロサービスに対応するように分割する設計方法。
ビルド時合成パターン¶
▼ ビルド時合成パターンとは¶
フロントエンドアプリケーションのビルド時に合成する。
クライアントサイド合成パターン¶
▼ クライアントサイド合成パターンとは¶
クライアント側 (ブラウザ上) で、静的ファイル (例：html ファイル、css ファイル、画像、動画、メールなど) を合成する。
▼ iframeタグ¶
ページへコンポーネントに対応する iframe タグを組み込む。
各 iframe タグが表示したいコンポーネントのURLを src タグで指定する。
▼ script タグ¶
▼ webコンポーネント¶
エッジサイド合成パターン¶
▼ エッジサイド合成パターンとは¶
サーバーサイド合成パターン¶
▼ サーバーサイド合成パターンとは¶
サーバーサイド側 (ブラウザ上) で、静的ファイル (例：html ファイル、css ファイル、画像、動画、メールなど) を合成する。