Writing / Archive
Article archive.
Notes on frontend engineering, interface design, browser behavior, and lessons found while building.
18 entries
- Reactアプリを機能単位で分ける機能単位の構成と依存方向のルールを使い、Reactアプリを変更しやすく保つ方法を考えます。frontendreact
- 画像のCLSとLCPを、実装から改善するLighthouseを使った改善で得た知見をもとに、画像によるCLSとLCPの悪化を防ぐ実装をまとめます。frontend
- スクロールバーは、どこまでデザインするべきか標準のscrollbar-widthとscrollbar-colorを中心に、スクロールバーを調整するときの実装と注意点をまとめます。frontend
- コンポーネントテストは、何を確かめるのかStorybook と Playwright を題材に、コンポーネントテストで何を確かめたいのかを整理します。frontendtesting
- デザインのエッジケースとCSSアニメーションを、実装から考えるデザインのエッジケースを協働で解決する方法と、CSSアニメーションのパフォーマンスを計測・改善する方法をまとめます。frontendtalk
- Server Actionsを、フォームの流れから理解するServer ComponentsとServer Actionsの役割、フォーム、保留状態、楽観的更新、キャッシュ更新までを整理します。frontendtalk
- URLSearchParamsでクエリを正しく扱うURLSearchParamsの基本操作と、同じキーを複数持つクエリパラメータをオブジェクトから変換する方法をまとめます。frontendnote
- Astro 3への更新とView Transitionsの落とし穴ブログをAstro v3へ更新した際に必要になった、View Transitionsとダークモードの調整をまとめます。frontendastro
- Reactアプリケーションで、失敗をどう扱うかJavaScript の例外から React の Error Boundary、型で表す失敗まで、エラーの扱い方を整理します。frontendnote
- input[type=number]を使う前に考えることinput[type=number]を使うべき要件と、数字だけで構成される文字列を入力してもらう場合の実装を整理します。frontendnote
- Next.jsの境界をZodで検証するZod 4 のスキーマを、リクエスト、React Hook Form、Server Actions の検証に活用する方法をまとめます。frontendzodnextjs
- Reactプロジェクトを、いま始めるならReactフレームワークを選ぶ観点と、不要なEffectを減らして読みやすいコードを書く方法を考えます。frontendtalk
- Reactの状態を、必要な場所にだけ置く宣言的UIの考え方をもとに、Reactの状態を必要最小限に保ち、影響範囲を小さくする方法を考えます。frontendreact
- 悪いコードから始めてもいい早すぎる分割や共通化を避け、まず大きなReactコンポーネントから始める理由と、分割を判断する基準を考えます。poem
- 断片的な知識を、記事と登壇で編み直すブログや登壇を通じて、断片的な知識を体系化する方法を考えます。テーマの定め方、受け手に合わせた情報量、登壇とブログの違いをまとめました。poem
- AIとReactを書くための4つの設計原則AIと一貫したフロントエンドを開発するために、コロケーション、ロジックの境界、UIの規約、コンテキストの渡し方を考えます。frontendreact
- 道具に役割を持たせる。2026年の開発環境セキュリティ、役割分担、ミニマルさを軸に見直した、現在の開発環境とツール選びの考え方を紹介します。development
- AIとプロダクトをつくる。仕様からレビューまでAIと仕様を詰め、Issueを小さく切り、実装・レビュー・保守を反復するプロダクト開発の進め方をまとめます。developmentai