フロントエンドアーキテクチャ＠アーキテクチャ¶
はじめに¶
本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。
01. アーキテクチャ¶
歴史¶
- SST
- Ajax
- CSR
- SSR
- SSG
- ISR
共通する仕組み¶
▼ ビルド¶
フロントエンドに関するファイルは、ブラウザで実行しやすい状態に変換される (コンパイルではなく) 。
- bundleによって、ファイル間で分割された実装をマージする
- transpileによって、新しい実装規格をブラウザが対応可能な古い規格に変換する
- minifyによって、インデントやコメントを取り除く
02. SST：Server Side Templating¶
サーバーサイドのアプリがテンプレートエンジンを使用してHTMLを生成する。
このHTMLをブラウザにレンダリングする。
サーバーサイドのフレームワークを使用して単純なアプリを作る場合、まだまだ現役の技術である。
03. Ajaxによるアプリケーション¶
1つのWebページの中で、サーバーとデータを非同期通信し、ブラウザ側で部分的に静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) を作成する。
Ajaxの仕組みで作成したアプリはSPAである (CSRとはSPA内部の仕組みが異なる) 。
Ajaxの仕組みで作成したアプリはSPAである。
クライアント側でレンダリングを実行するため、SSRと比較してCSR：Client Server side Renderingともいう。
| ブラウザレンダリングのステップ | 実行者 |
|---|---|
| Loading | ブラウザ |
| Scripting | ブラウザ |
| Rendering | ブラウザ |
| Paiting | ブラウザ |
非同期通信は、Ajaxの手法を使用して実現される。
また、静的ファイルの部分的な作成は、MVVMアーキテクチャによって実現する。
CSRでは、ページ全体の静的ファイルをリクエストするのは最初のみで、それ以降はページ全体をリクエストすることはない。
２回目以降は、ページ部分的にリクエストを行い、サーバー側からJSONを受け取っていく。
04. CSR：Client Side Rendering¶
CSRとは¶
ブラウザ側で静的ファイルを作成する。
CSRの仕組みで作成したアプリはSPAである (AjaxとはSPA内部の仕組みが異なる) 。
最初に取得するhtmlファイルはほぼ空で、ブラウザ上でjavascriptファイルを実行し、htmlファイルを全てを作成する。
その後、クライアントの操作で部分的にデータをリクエストし、htmlファイルを部分的に変更する。
大きなjavascriptファイルを最初に読み込むため、初回の読み込み時間が長くなる。
CSRの実装方法¶
▼ MVVMアーキテクチャ¶
View層とModel層の間にViewModel層を配置し、View層とViewModel層の間で双方向にデータをやり取り (双方向データバインディング) する。
これによって、View層とModel層の間を疎結合にする。
Vue.jsでは、意識せずにMVVMアーキテクチャで実装できるようになっている。
詳しくは、以下のリンクを参考にせよ。
CSRによるSPAと従来MPAの比較¶
▼ 処理速度¶
MPAと比較して、データを非同期的に通信できるため、1つのWebページの中で必要なデータのみを通信すればよく、レンダリングが速い。
▼ SEO¶
CSRは、Googleのクローラーがページを認識しにくく、Webページがインデックスされない可能性がある。
適するアプリ¶
- SEOが重要なアプリ
- リアルタイム性の優先度が低いアプリ
05. SSR：Server Side Rendering¶
広義のSSRとは¶
ブラウザ側ではなくサーバー側で静的ファイルを作成する。
フレームワークのテンプレートエンジンやCGIを使用して、サーバー側で静的ファイルを作成すること、も含まれる。
| ブラウザレンダリングのステップ | 実行者 |
|---|---|
| Loading | サーバー |
| Scripting | サーバー |
| Rendering | サーバー |
| Paiting | ブラウザ |
狭義のSSRとは¶
広義のSSRにCSRを取り入れた方法のこと。
ブラウザ側ではなくサーバー側で静的ファイルを作成する。
広義のSSRと異なる点は、ブラウザ側にレンダリングされた後、アイソモーフィックJavaScriptという仕組みでCSRとして動作する。
- https://qiita.com/rita0222/items/66fec6e7be5987bace3c
- https://qiita.com/kyrieleison/items/4ac5bcc331aee6394440#%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%83%89%E3%81%A8%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E5%85%B1%E6%9C%89
適するアプリ¶
- SEOが重要なアプリ
- リアルタイム性の優先度が低いアプリ
06. SSG：Static Site Generation¶
SSGとは¶
事前にビルドを行って静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) を作成しておく。
そして、これをレンダリングし、静的サイトとして稼働させる。
動的な要素 (例：ランダム表示) を含む静的ファイルについては、該当の部分でAjaxを使用できるようにしておく。
適するアプリ¶
記入中...
07. ISR：Incremental Static Regeneration¶
ISRとは¶
SSGの発展型。
SSGとは異なり、事前にビルドせず、静的ファイル (例：htmlファイル、cssファイル、画像、動画、メールなど) を作成しない。
その代わり、クライアントからリクエストがあって初めて、そのWebページのみビルドが実行され、レンダリングされる。
クライアントから一回でもリクエストがあったWebページでは、初回時にビルドされた静的ファイルがその都度レンダリングされる。
08. 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 |
09. クリーンアーキテクチャ風¶
- Viewレイヤー
- State Managementレイヤー
- API Clientレイヤー
10. マイクロフロントエンド¶
UI部品合成とは¶
静的ファイルのコンポーネントを、各マイクロサービスに対応するように分割する設計方法。
ビルド時合成パターン¶
▼ ビルド時合成パターンとは¶
フロントエンドアプリのビルド時に合成する。
クライアントサイド合成パターン¶
▼ クライアントサイド合成パターンとは¶
クライアント側 (ブラウザ上) で、静的ファイルを合成する。
▼ iframeタグ¶
ページにコンポーネントに対応するiframeタグを組み込むする。
各iframeタグが表示したいコンポーネントのURLをsrcタグで指定する
▼ scriptタグ¶
▼ webコンポーネント¶
エッジサイド合成パターン¶
▼ エッジサイド合成パターンとは¶
サーバーサイド合成パターン¶
▼ サーバーサイド合成パターンとは¶
サーバーサイド側 (ブラウザ上) で、静的ファイルを合成する。