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