Archive

書きためたもの。

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

entries

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