Closed8

JSer.infoまとめ(2022/1/6)

AVA 4

AVA 4がリリースされました。

Release AVA 4 · avajs/ava

そもそもAVAとは?

https://github.com/avajs/ava

Node.jsのテストランナー。

「Frontend Developer Roadmap 2021」のここら辺。
Jestなどが有名だが、AVAもギリ書いてある。
Image from Gyazo

使い方などの詳しいドキュメントはココから

他のテスティングフレームワークにはJestやcypress、MOCHAなどがあるが、AVAは軽量でシンプルな点が魅力らしい。

Parcel 2.1.0

Parcel 2.1.0がリリースされました。

https://github.com/parcel-bundler/parcel/blob/v2/CHANGELOG.md#210---2021-01-05

parcelとは?

https://github.com/parcel-bundler/parcel

Parcelは、Web用のゼロ構成ビルドツールです。これは、すぐに使用できる優れた開発エクスペリエンスと、プロジェクトを開始したばかりから大規模な本番アプリケーションに移行できるスケーラブルなアーキテクチャを組み合わせたものです。

らしい。

ビルドツールというと「Frontend Developer Roadmap 2021」のここら辺。webpackが似た役割っぽい。
Image from Gyazo

公式doc

https://parceljs.org/features/development/

ちなみに去年のstate of Jsのビルドツールの欄。
そんなには使われていない。

Image from Gyazo

基本的にwebpack。
新しいものとしてesbuildで大丈夫そう。

ちゃんとキャッチアップするならesbuildかなあ

ブラウザバック時の表示を最適化する Yahoo!ニュースの取り組み事例

https://techblog.yahoo.co.jp/entry/2022010530253635/

APIリクエスト

ブラウザバックした際にSSRしていないと、APIリクエストが毎回飛んじゃう。

対策

  • SessionStrageにキャッシュして、ブラウザバック時はSessionStrageから取得している。
    -リロードに対してはキャッシュ破棄をして、APIリクエストを飛ばす。

記事リストから既記事を削除

ブラウザバックして表示された記事一覧で、遷移前に見ていた記事を表示しない。
LocalStrageで記事閲覧履歴を管理して、既読記事は表示しない。

スクロール位置の復元

ブラウザバックでスクロール位置を復元。

Chromeは元々復元してくれる。
他のブラウザは処理を書かなきゃいけない。

ちなみにChromeのスクロール復元を無効にするにはHistory.scrollRestorationというプロパティーにmanualを指定すると出来るらしい。

BFCacheを有効にする

JavaScriptの実行状態をブラウザーが保持し、ブラウザバックでページを表示したときに、JavaScriptの実行状態も復元する機能

らしい。
Yahooの例だと検索用モーダルを開いたままページ遷移したら、戻った時ひらきっぱなしを復元できる。

SafariとFirefoxは既にBFChcheあり、Chromeもversion96からサポートなので、今後は当たり前になりそう。

https://web.dev/bfcache/
このスクラップは2022/01/31にクローズされました
ログインするとコメントできます