Archive

書きためたもの。

フロントエンドの実装、インターフェースの設計、ブラウザの挙動。つくりながら書いてきたものは、すべてここに置いています。

entries

  1. No.016AIとReactを書くための4つの設計原則AIと一貫したフロントエンドを開発するために、コロケーション、ロジックの境界、UIの規約、コンテキストの渡し方を考えます。frontendreact
  2. No.013Reactの状態を、必要な場所にだけ置く宣言的UIの考え方をもとに、Reactの状態を必要最小限に保ち、影響範囲を小さくする方法を考えます。frontendreact
  3. No.012Reactプロジェクトを、いま始めるならReactフレームワークを選ぶ観点と、不要なEffectを減らして読みやすいコードを書く方法を考えます。frontendtalk
  4. No.011Next.jsの境界をZodで検証するZod 4 のスキーマを、リクエスト、React Hook Form、Server Actions の検証に活用する方法をまとめます。frontendzodnextjs
  5. No.010input[type=number]を使う前に考えることinput[type=number]を使うべき要件と、数字だけで構成される文字列を入力してもらう場合の実装を整理します。frontendnote
  6. No.009Reactアプリケーションで、失敗をどう扱うかJavaScript の例外から React の Error Boundary、型で表す失敗まで、エラーの扱い方を整理します。frontendnote
  7. No.008Astro 3への更新とView Transitionsの落とし穴ブログをAstro v3へ更新した際に必要になった、View Transitionsとダークモードの調整をまとめます。frontendastro
  8. No.007URLSearchParamsでクエリを正しく扱うURLSearchParamsの基本操作と、同じキーを複数持つクエリパラメータをオブジェクトから変換する方法をまとめます。frontendnote
  9. No.006Server Actionsを、フォームの流れから理解するServer ComponentsとServer Actionsの役割、フォーム、保留状態、楽観的更新、キャッシュ更新までを整理します。frontendtalk
  10. No.005デザインのエッジケースとCSSアニメーションを、実装から考えるデザインのエッジケースを協働で解決する方法と、CSSアニメーションのパフォーマンスを計測・改善する方法をまとめます。frontendtalk
  11. No.004コンポーネントテストは、何を確かめるのかStorybook と Playwright を題材に、コンポーネントテストで何を確かめたいのかを整理します。frontendtesting
  12. No.003スクロールバーは、どこまでデザインするべきか標準のscrollbar-widthとscrollbar-colorを中心に、スクロールバーを調整するときの実装と注意点をまとめます。frontend
  13. No.002画像のCLSとLCPを、実装から改善するLighthouseを使った改善で得た知見をもとに、画像によるCLSとLCPの悪化を防ぐ実装をまとめます。frontend
  14. No.001Reactアプリを機能単位で分ける機能単位の構成と依存方向のルールを使い、Reactアプリを変更しやすく保つ方法を考えます。frontendreact