記事：2024/6/3-

ルールなど

とりあえず全部開く

2,3分で読めそうなやつはすぐ読んじゃう
その他はgptに要約してもらってからメモ取りながら読む
土曜日中に読めなかったものは諦めるか、読みたければ繰り越す

今週分

~~https://2ality.com/2024/05/proposal-promise-with-resolvers.html~~
~~https://medium.com/@Luna-Rojas/nodejs-21-is-here-features-that-will-blow-your-mind-fd996c8f0365~~
~~https://codingbeautydev.com/blog/best-es9-javascript-features/~~
~~https://zenn.dev/team_soda/articles/99b4449f962fb4~~
~~https://qiita.com/Sicut_study/items/79838a4b8ec36bc3a961~~

kzk4043

繰越

~~https://zenn.dev/cybozu_frontend/articles/ts-explicit-type-annotation~~

~~https://zenn.dev/cybozu_frontend/articles/react-aria-component-design~~
~~https://storybook.js.org/blog/portable-stories-for-playwright-ct/~~
https://ui.dev/why-react-query

kzk4043

チラ見

https://blog.tinect.jp/?p=86582

kzk4043

地味に大変だったからうれしい。
クラシックの場合のみ領域確保。
stable both-edgesで両端に確保される。

kzk4043

app router

static rendering: 従来の SSG や ISR 相当で、build 時や revalidate 実行後にレンダリング
- revalidate なし: SSG 相当
- revalidate あり: ISR 相当
dynamic rendering: 従来の SSR 相当で、リクエストごとにレンダリング

kzk4043

これらが1つのHTTPレスポンスで完結し、レスポンスのHTMLに<PostFeed>や<Weather>のHTMLが含まれるのでSEO観点もフォローしていることが大きな特徴です。

これちょっとよくわからん…あとから送られるのに1つってどういうこと…？

kzk4043

PPRはStreaming SSRをさらに進化させた技術で、ページをstatic renderingとしつつ、部分的にdynamic renderingにする

やっぱAstroアイランドちゃうん…？
って思ったけどちがうわ…Astroは結局SSG/SSRをページ単位で選択できるだけで、＋でアイランドはクライアントでも動作できるよって話だから、PPRのベースはSSGして部分的にSSRだよ、とは別ものか。

SSG+Client fetch/Streaming SSR

これがAstroアイランドか

kzk4043

ただんけいさん…？

kzk4043

、PPR以降はより細粒度な「どこまでをstaticに、どこからをdynamicにするか」という議論へとシフト

kzk4043

Storybook provides built-in testing capabilities through the play function and its own Playwright-based test-runner. This enables you to verify how a component reacts to user interactions such as clicks, typing, and mouse inputs. This is our recommended stack for testing components.
However, there are plenty of reasons why you might consider Playwright CT instead. It is fast, has an incredible VSCode integration, and other cool features like a test generator and a trace viewer.

kzk4043

--isolatedDeclarations オプションつけようかなあ…型は明示した方がレビュしやすい気がするし

kzk4043

Cache-Controlヘッダーのno-storeを外す
Ajaxでデータを取得した時にHistory APIのreplaceStateを実行する
- なんでこれでいけるのかBFキャッシュの仕様がわからん

kzk4043

gpt

•   React v19 betaの紹介: React 18との比較で多くのユーザーフレンドリーなAPIが追加されたが、基本的な原則は大きく変わっていない。
•   JSXとcreateElement: JSXはJavaScriptでDOMを管理するために使われ、ブラウザでは理解されないため、JSXはJavaScriptに変換される。React.createElementがコアとなる。
•   レンダリングの簡素版: 自作の簡素なReactの実装では、JSXをリアルDOMにレンダリングする方法を解説。
•   Fiberアーキテクチャと並行モード: 高優先度なタスク（ユーザー入力やアニメーション）をタイムリーに処理するための設計。小さな単位に分けてメインスレッドを開放。
•   requestIdleCallback: ブラウザがアイドル状態のときに実行するコールバック。すべてのブラウザでサポートされているわけではないが、非同期の割り込み処理をサポートするためのベーシックな実装方法を解説。
•   アルゴリズム: Fiberノードのデータ構造と、それを使ったレンダリングと非同期更新の具体的な実装手法について説明。
•   状態更新のトリガー: Reactで一般的なトリガーであるuseStateの基本的な更新メカニズムの実装方法を紹介。Fiberエンジンを動かすトリガーとして機能。
•   結論: コメントと型を除くと400行未満のコードで、非同期および割り込み可能な更新をサポートする最小限のReactモデルを実装する方法。

今週分

繰越

同僚のおすすめ記事より

チラ見