12/23
2025/12/23
パフォーマンス
ServiceWorker
JSからキャッシュの制御や通知、オフラインを制御できる。
WebWorkerの一種で、メインスレッドとは別で動作し、JSの実行に影響を与えない。
一言で言うと「ページとサーバーの間にあるプロキシ」。
大体はWorkboxというライブラリを使うらしい。
PWA、奥が深そう。web.devを見ながらやることになるかな。
この本が終わったら日記帳で試したい。
Service Workerとデフォルトキャッシュとの違い
swでindex.htmlとかをキャッシュするコードを見たが、あれ、デフォルトでもキャッシュてできるよな、違いって...?と思い、AIに質問。
間違ってるかもしれないが、今は以下の理解で進める
項目 | HTTP キャッシュ(デフォルト) | Service Worker Cache API |
|---|---|---|
制御 | ブラウザが自動管理 | 開発者が明示的に制御 |
オフライン対応 | なし(ネットワーク必須) | あり(完全オフライン可) |
キャッシュ戦略 | HTTP ヘッダー依存 | カスタムロジック可能 |
更新制御 | ブラウザ任せ | 開発者が完全制御 |
永続性 | ブラウザ設定依存 | 明示的に管理 |
Three.js
シャドウ
球体をバウンドさせ、それに合わせて影の透明度を変えるというかなり初期のチュートリアルをしたが、発見あり。
sphereMesh.position.y = とやるより、MathUtils.lerp()を使ったほうがよい。
前者だと透明度が0-1ならまだ大丈夫だが、0.5-1の範囲にしたい時、計算が少しややこしくなるが、
後者だと単純。
どんな値でも、変更されるようなものはlerpを使うとよいかも。
layers
21.shadowでsetScissorで画面分割し、layersを使って見えるものを分けた。
layersを使ったの初めて...かな?おそらく。
ここも要復習。
両方のカメラに適用する場合camera.layers.enable()
directionalLightの向き
ライトの向きを変える時、targetのsetだけでなく、sceneへの追加の必要あり。微妙に覚えていて良かった。
light.target.position.set(0,100,0);
scene.add(light.target);DirectionalLightのヘルパー
ライトのヘルパーということでlightHelper使いがち(使おうとした)だが、範囲を見せてくれない。
CameraHelperを使う。
const cameraHelper = new THREE.CameraHelper(light.shadow.camera);
scene.add(cameraHelper);所感
人生初めて、電気シェーバーをポチった。時期的に自分へのクリスマスプレゼントみたいになった。
たまたまセールやっていたから買ったけど、他の品も買いたい。amazonのセールまだかな。
最近ながら見でやる頻度が増えた。旅行帰りは全く見なかったのに。まあしゃあないとは思うが、旅行帰りはタブレットとか本当に寝るときしか見なくて、やる気が漲っていた。
ちゃんとしている方が気持ちがいい I feel better when I am being productive とか日記に書いていたくらい。
明日はなるべく動画とかみずにやる日にしよう。
Tomorrow, I'll try not to watch videos as much.