Writing / Archive

Article archive.

Notes on frontend engineering, interface design, browser behavior, and lessons found while building.

14 entries

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