WEBアプリにおいてどのようにサイトが表示されるの？

はじめに

WEBアプリケーションは実際にどのように表示されて反映されているのか。
よくフロントエンド技術の仕方によって移り変わる画面を表示することは多いかなと思います。
今回は簡潔にどのような表示の仕方があるのか簡潔にまとめていきます。

使用するフロントエンド技術によって表示が変わる

WEBアプリケーションにおけるコンテンツの表示方法は、使われるフロントエンド技術で変わります。
静的コンテンツだけで構成される静的なサイトではWEBサーバからのhttpレスポンスを受けて(Javascriptのエンジンが起動し）コンテンツが表示されることがあります。

また動的サイトでは、APサーバーとDBサーバーのやり取りにより取得された動的コンテンツが静的コンテンツとともに表示されていきます。

また近年ではAjaxやWebSocketといったデータ送受信技術を使った非同期でのWebサーバーとのやり取りにより、画面遷移せずに画面を切り替えることも可能になっています。
さらに、SPA(single page application)という表示方式を遣えば、ページ全体を表示するのは初回のみで、2回目以降は必要な個所(コンテンツ）のみが切り替え表示されます。

これによりWEBサイト表示の高速化、高度なWEB表現、WEBアプリのスマホアプリとしての提供などが可能になります。
このようにWEBアプリケーションでは、表示速度を上げつつ、コンテンツ表示を豊かにするために、フロントエンド開発の名インドが上がっています。

静的なサイト・動的サイトの比較

★静的なサイト

html、CSS画像で構成される単純なサイトである

★動的なサイト

現在、多くのサイトがこの3階層モデルによってサイトを表示している。

静的サイトのメリット・デメリット

• 静的のメリット

1. パフォーマンスの最適化が容易─「動的な」部分が少ないため、簡単にパフォーマンスを最適化することができます。うまく構築すれば、無駄な要素を最小限に抑えることができ、読み込みも高速化されます。
2. ホスティング費用が安価─趣味のプロジェクトやポートフォリオ用であれば、GitHub PagesやCloudflare Pagesなどのホスティングサービスを利用して、無料で運用することも可能です。プロフェッショナルなプロジェクトでは、Kinstaのアプリケーションホスティングなどの有料サービスを利用することも。
3. シンプルなサイトの立ち上げが非常に簡単─データベースなどの専門知識が求められる設定がないため、簡単に素早く構築することができます。

• 静的サイトのデメリット
  1.コンテンツやデザインの更新が複雑─変更や更新を行うたびにサイトの再デプロイが必要に（たとえナビゲーションメニューの項目を変更するだけでも）。定期的に更新が必要になるサイトの場合は、特に手間がかかります。　
  2.機能の実装に専門知識が求められる─WordPressのような動的CMSでは、サイトに機能を追加するには、プラグインをインストールするだけで済みます
  3.コンテンツ管理の機能がやや劣る─静的サイトジェネレーターは一般的に、コンテンツの管理には長けていないため、何千ものコンテンツやタクソノミーを持つ大型サイトでは厄介になる可能性があります。一部の静的サイトジェネレーターには、この懸念を解消するような様々な工夫も。

動的サイトのメリット・デメリット

• 動的サイトのメリット
  1.サイト（コンテンツとデザイン）の更新が容易─動的サイトでは、コンテンツやデザインの更新が容易。管理画面で変更を加えれば、本番サイトに即座に反映され、静的サイトで必要になるサイト全体の再デプロイは不要です。
  2.プラグインやアプリケーションによる機能の追加が容易─動的サイトをWordPressで作成すれば、プラグインをインストールするだけで機能を追加することができます。
  3.規模に応じた強力なコンテンツ管理機能─動的CMSでは、コンテンツ管理に長けています。例えば、何千ものローカルビジネスのディレクトリを構築する場合は、動的サイトを構築するのが賢明です。

• 動的サイトのデメリット
  1.ホスティング費用が比較的高価─サーバーサイドの処理には、多くのリソースが必要になるため、必然的にホスティング費用が高くなる傾向にあります。
  2.セキュリティの確保が難しい─動的サイトは、静的サイトよりも攻撃対象になりやすく、高度なセキュリティの確保がやや難しくなります。例えば、動的サイトでは、SQLインジェクションに対する脆弱性が懸念されるのに対して、静的サイトにはデータベースがないため、心配はありません。
  3.パフォーマンスの最適化に手間がかかる─フロントエンドとバックエンド両方のパフォーマンスを考慮しなければならいため、パフォーマンスの最適化が複雑に。例えば、静的サイトでは簡単に行えるのに対し、動的サイトではデータベースクエリとパフォーマンスの最適化にかなり手間がかかる可能性があります。

AjaxやWebSocketによるサイト表示

• Ajaxによる表示
  
  Ajaxでは、非同期でWEBサーバーから変更要素を取得する

• Websocketによる表示
  
  WebSocketでは、コネクション確立後、Webサーバーと双方向通信する

■カジュアル面談受付中
下記からスケジュール設定可能となります。
https://t.co/TfUrQzPhQr

↓↓↓こちらのセミナーもご検討ください↓↓↓

▼【Engineer Meetup #１】エンジニア交流会▼
　《9/13（水）18:00～21:00 場所:AKKODiS本社オフィス》
https://job.axol.jp/jn/c/akkodis_career/entry_cxJl3n0N64LU04LVg/input

▼～キャリア変遷・年収推移全公開！～年収600万のインフラエンジニアが年収1,200万越えのデータサイエンティストになるまで▼
《9/15（金）19:00～21:00 オンライン開催》
https://techplay.jp/event/917353

★Twitterもやってますので、是非フォローお願いします★
https://twitter.com/A831SS336O