フロントエンドアーキテクチャ＠フロントエンドアーキテクチャ¶
はじめに¶
本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。
01. MVCアーキテクチャ¶
MVCアーキテクチャとは¶
記入中...
レンダリングパターンとの関係性¶
以下のレンダリングパターンを使用している場合、MVCアーキテクチャで構築することになる。
- SSR
02. MVVMアーキテクチャ¶
MVVMアーキテクチャとは¶
以下の要素からなる。
- View：UIロジック（HTML）
- ViewModel：状態と振る舞いのロジック（JavaScript）
- Model：モデルそのもの（JavaScript）
View層とModel層の間にViewModel層を配置し、View層とViewModel層の間で双方向にデータをやり取り (双方向データバインディング) する。
これによって、View層とModel層の間を疎結合にする。
Vue.jsでは、意識せずにMVVMアーキテクチャで実装できるようになっている。
レンダリングパターンとの関係性¶
以下のレンダリングパターンを使用している場合、MVVMアーキテクチャで構築することになる。
- CSR
03. Atomic Design¶
Atmic Designとは¶
フロントエンドを構成する要素を、5つのレイヤー (Atoms、Molecules、Organisms、Templates、Pages) に分ける設計方法のこと。
Nuxt.jsを参考に考える¶
Nuxt.jsとAtomic Designのレイヤーは以下の様に対応する。
| Nuxt.jsのディレクトリ | Atomic Designのレイヤー |
|---|---|
| components | Atoms、Molecules、Organisms |
| pages | Pages |
| layouts | Templates |
04. クリーンアーキテクチャ¶
フロントエンドにはビジネスロジックがないため、クリーンアーキテクチャを採用する意義がない。
やめましょう。
05. マイクロフロントエンド¶
UI部品合成とは¶
静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) のコンポーネントを、各マイクロサービスに対応するように分割する設計方法。
ビルド時合成パターン¶
▼ ビルド時合成パターンとは¶
フロントエンドアプリケーションのビルド時に合成する。
クライアントサイド合成パターン¶
▼ クライアントサイド合成パターンとは¶
クライアント側 (ブラウザ上) で、静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) を合成する。
▼ iframeタグ¶
ページにコンポーネントに対応するiframeタグを組み込むする。
各iframeタグが表示したいコンポーネントのURLをsrcタグで指定する
▼ scriptタグ¶
▼ webコンポーネント¶
エッジサイド合成パターン¶
▼ エッジサイド合成パターンとは¶
サーバーサイド合成パターン¶
▼ サーバーサイド合成パターンとは¶
サーバーサイド側 (ブラウザ上) で、静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) を合成する。