React Angular Vueをスムーズに修得するための最新フロントエンド技術入門　備忘録

覚えておきたい

2025/01/03

React Angular Vueをスムーズに修得するための最新フロントエンド技術入門

３年前の本だと頭の片隅に入れつつ。

モダンフロントエンド開発を知りたいと購入。

次世代SPA

  • 待ち時間ゼロの検索機能
  • オフライン機能
  • ログインすると前回終了時の画面復元機能
  • 無限スクロール機能

SPAとは

最初に最低限のHTMLをサーバーがクライアントに渡し、必要に応じて内容を更新することでページ遷移を表現

次世代SPA

SPAに加え、必要なデータをサーバーから事前取得し、フロントのWebストレージに保存する。

初期通信時にhtmlを取得、javascriptを取得したあと、jsがサーバー（バック）とやり取り

利点

バックの処理をフロントが行うため、バック負荷が軽減。インフラコストの削減につながる。

マルチデバイス対応も容易。

フロントエンドの高速化、操作性向上。

バックエンドとの連携（データダウンロード）

クリックしてから通信ではなく、任意のタイミングでjsモジュールが通信可能。

基本：起動時ダウンロード

jsモジュールが読み込まれたときに必要なデータをバックからダウロードしwebストレージに保存。

2回目以降は零タイムだが、初回に待たされるかも

遅延ダウンロード

初回の待ち時間も短縮。

js起動時に最小限のダウンロードをし、ユーザー操作中にバックグラウンド通信。

分割ダウンロード

データが膨大の場合。

例）1万件のリストを最初の10件のみ取る。追加のデータが必要になるたびダウンロード。

不要になったデータは削除。

予測ダウンロード

ユーザーの次の操作を予測してダウンロード

バックエンドとの連携（データアップロード）

送信ボタンを押してからデータがアップロードされるのは従来と同じ。

送信ボタンを押したらjsモジュールがデータを受け取り、すぐ次の画面へ。

データのやり取りはバックグラウンド通信で行われ、完了すると送信完了のポップアップを表示する。

このように待ちを感じさせない方法を遅延通知アップロードという。

フィルター検索などで、チェックボックスのカテゴリをチェックした瞬間検索結果件数を反映する例

従来：検索結果をいちいちバックから取得

モダン：件数と場所だけのテーブルをバックに登録しておき、起動時ダウンロード。件数はjsで一瞬で表示される

検索結果一覧の例

従来：検索ボタンを押したら取得

モダン：エリア、ジャンル、登録件数を確認画面で予測ダウンロードと、分割ダウンロード

詳細情報表示の例

モダン：テキストを先に表示し、写真はダウンロードが完了した時点で表示

画面復元機能

URLで復元

復元用データをバックエンドで管理すれば、別デバイスでの作業復元、他人へ作業継承が可能

オフライン表示機能

  • オフラインになっても訪れていないページへの遷移が可能
  • お問い合わせフォームをオフライン時に送信すると、オンラインになったときに自動で送信される

方法

遅延ダウンロードでフロントエンドにWebサーバーをダウンロードしている。

Service Workerとは

ブラウザがダウンロードして実行するスクリプトで、ウェブブラウザとウェブサーバー間のプロキシとして機能するJavaScriptアセット

typescriptはtsc(typescript compiler)によってjsに変換される

node.js npm

API

  • ブラウザAPI
  • JavaScriptライブラリが提供するAPI
  • フロントフレームワークが提供するAPI
  • Web API

ブラウザAPI

Webブラウザに内蔵されたAPI。1000種類。一覧

フロントエンドフレームワークがやっていることの理解

DOMとは

Webブラウザはサーバーからhtmlをダウンロードすると、htmlのタグや属性1つ1つをオブジェクトに変換する。

その集合体がDOM。それが画面に描画されてる。

DOMはブラウザAPIをとつうじてjsで操作可能。

仮想DOM

オブジェクト。

reactでは最初にDOMのコピーである仮想DOMをつくりだす。UIの変更があったらその変更内容を反映したもう一つの仮想DOMをつくりだす。その差分をDOMへ変更しページを更新する。

データバインド

htmlの値の取得や操作を簡単にする

ルーター

モダンWebではjsがページごと仮想DOMを書き換えて再描画するため、ブラウザのURL表示が変化しない。

URLにページごとの仮想のパスを定義し、それに基づくページの切り替えを可能にする機能。

WEB API

WEBAPIの呼び出しに以下がよく利用される

  • 通信機能を持つブラウザAPI　「Fetch」
  • 通信ライブラリ　「Axios」
  • フレームワーク内臓の通信機能　「HttpClientモジュール」

APIキーで認証

クロスドメインの制約

WebAPIはプログラム同士がバックグラウンドで通信するので、セキュリティ上の観点からデフォルトでは他ドメインと通信ができない仕様となっている。

セキュリティを確保しつつ異なるドメイン間の通信を必要とする場合、CORSという仕組みを理解しておく。

トラブルシューティング

iPhoneで動作不良

AppleでインストールされるChromeではjs実行エンジンがAppleが指定したものになるので動作が異なる恐れがある。

モバイルデバイスで重い

モバイルデバイスにはリソース制約というのがあり、PCでは問題なかったアプリが動作しない例が多い。

性能が低いモバイルデバイスでも動くようにテストする。

DB重複登録

途中で通信エラーが発生したりしてデータの重複登録が起きうる。

データにIDをつける。

起動時ダウンロードの罠

ユーザー認証が必要なアプリの場合、ログイン後の画面表示プログラムをロードするのはセキュリティ的に問題がある。

ログイン前とログイン後のプロジェクト２つに分けて開発

感想

最近Web技術に触ったものからすると、どこまでが最新の技術と呼ばれるもので、どこまでが従来のものかという線引きが曖昧だと思った（WebAPIやWebストレージなど）ので、最近でた技術とはっきりわかったのが良かった。

まあ、３年前の本なので更に技術は進歩しているんだろうなと恐怖ありつつ、MPAで作られている今の現場は時代おくれすぎるのかとか思いつつ、、

更に具体的なダウンロード方式。遅延ダウンロードや分割ダウンロードの実装方法を知るのが楽しみ。