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.