概要
- モダンWebとは「バックエンド処理に比重を置いた従来のWeb技術」と一線を画すWeb技術である。
- 機能としては以下挙げられる
- SPAを利用した高速データ表示機能
- Service Worker(Webブラウザ内臓)を利用したオフライン表示機能
- Webストレージ、URLパラメータ等を利用した前回表示画面の復元機能
- Intersection Observer API等を利用した無限スクロール機能
- PWA（Progressive Web Apps）の特徴であるネイティブアプリライクなWebアプリ構築
- デザイン面では以下挙げられる
- レスポンシブデザイン
- UXデザイン
- はっきりとした定義が有る訳ではないので、上記が全てではない。
- 従来型Webと区別する際に使う対義語と捉えるのが適切と考える
機能例
SPAを利用した高速データ表示機能
- 従来型Webにおいてはユーザーがフロントエンドで操作の度、バックエンドにリクエストを行い画面データを作成しフロントエンドに画面データをレスポンスとして返し、画面表示する仕組みである。
- モダンWebにおいては、極力フロントエンド側で画面データを作成して表示することにより高速データ表示を可能としている。
- 以下の仕組みを持つ事で、高速可能なページ表示を可能としている
- SPA、UXページデザインにより、1ページ辺り必要最小限のデータを取得する仕組み
- 画面表示後も、バックグラウンド通信で事前予測したデータをバックエンドから先読み取得する仕組み
Service Worker(Webブラウザ内臓)を利用したオフライン表示機能
- ネットワーク切断されたオフライン状態でもオンライン時と同様にページ表示、ページ移動、ボタン操作が可能な機能である。
- 以下の仕組みにより、オフライン表示が可能となる
- Webサイト接続時にWebサイトのデータをローカルにダウンロード（遅延ダウンロード）
- オフライン時にService WorkerがWebサーバーの代替となりユーザーのリクエスト処理の応答を担う
- オンライン切替わり時にインターネット上Webサーバーにユーザーから受け取っていたリクエスト処理を渡す
Webストレージ、URLパラメータ等を利用した前回表示画面の復元機能
- 従来型Webでは、Web入力画面で途中まで入力したが、ブラウザを閉じた場合に途中入力データは失われることがデフォルトである。（Webアプリ機能で「一時保存」ボタン等を明示的に実装している例は除く）
- モダンWebにおいては、途中までの入力データ、URLパラメータ等をWebストレージに保存しておく事で再度ログイン時に前回表示画面を復元することが可能となる
ブラウザでストレージ？ Web Storageを使いこなそう
Intersection Observer API等を利用した無限スクロール機能
- 従来型Webにおいては、大量データの一覧表示はページング処理で実現することが多い
- モダンWebにおいては、Google 画像検索ページのように、ページ末尾にスクロールすると自動的に次ページを検索表示する仕組みを持っている
- 無限スクロール機能により、スムーズに検索結果を表示することが可能となる
- 仕組みとしては、バックグラウンド通信と分割ダウンロードを組み合わせて実現している
- 無限スクロール機能については、フッターが見えない等のデメリットも有るので、Webサイトの特徴を考えて、適切に検討する必要が有ると考える
まとめ
- モダンWebについては明示的に定義されているものではない
- 従来型Webに無い機能を提供することによりUXを向上させる事が出来る
- 従来より素晴らしい体験をユーザーに提供出来る
- モダンWebを実現するにはjQueryの様なレガシーなフレームワークでは難しいのではないか
- 3大フレームワーク(React, Angular, Vue.js)、HTML5、ES6(2015)以降の知識と幅広くフロントエンド周りを抑えておくことが必要ではないかと考える
参考サイト
https://wakka-inc.com/blog/1937/
https://kinsta.com/jp/blog/web-application-architecture/
https://qiita.com/hrkt/items/71c951082c6d90c7cd78
https://laboradian.com/create-offline-site-using-sw/