テック

React Compiler を導入したら、useMemo だらけのコードから解放された話

React Compiler を実際に仕事のプロジェクトに導入してみたら、手動で書いていた useMemo・useCallback の大半が不要になりました。導入手順とハマった点をまとめています。

Astro 6 にアップグレードしたら、Live Content Collections で開発体験がかなり変わった話

このブログでも使っている Astro を v5 系から v6 系にアップグレードしたところ、Live Content Collections の安定化と dev サーバーの改善で、コンテンツまわりの体験がかなり変わりました。

MSW（Mock Service Worker）でAPIモックを導入したら、フロントエンド開発がかなり捗った話

バックエンドの実装待ちで詰まっていたフロントエンド開発に MSW を導入したところ、APIモックの管理が一気に楽になり、テストも書きやすくなりました。

shadcn/ui を React プロジェクトに導入したら、UIコンポーネント開発がかなり楽になった話

React プロジェクトに shadcn/ui を導入したところ、デザインの一貫性を保ちながらコンポーネントを自由にカスタマイズできて、UIの実装速度がかなり上がりました。

Prisma ORM を導入したら型安全なDB操作がかなり楽になった話

TypeScriptプロジェクトにPrisma ORMを導入した体験談。スキーマから型が自動生成される仕組みや、マイグレーション管理がどう変わったかをまとめます。

Bun をNode.jsの代わりに使い始めたら、スクリプト実行がかなり速くなった話

Node.js の代替として Bun を使い始めたところ、パッケージインストールと TypeScript の実行速度がかなり改善され、個人開発の作業効率が上がりました。

CSS Container Queries を使い始めたら、コンポーネントのレスポンシブ対応がかなり楽になった話

CSS の @container ルールを使い始めたところ、ビューポートではなくコンテナのサイズに基づいてスタイルを変えられるようになり、コンポーネント単位のレスポンシブ対応がかなりシンプルになりました。

Laravel SanctumでSPA向けAPI認証を実装したら、セッション管理がかなりスッキリした話

LaravelでReact SPAのバックエンドAPIを作る際の認証にSanctumを使ったところ、Passportと比べてセットアップがかなり軽く、CSRFトークンの扱いも含めてスムーズに実装できました。

TypeScript 7.0でビルドが最大10倍速くなったので試してみた話

TypeScript 7.0がGoネイティブコンパイラへの全面移植によってフルビルドが8〜10倍高速化。大規模プロジェクトで実際に触ってみた所感と移行時のポイントをまとめました。

MySQLのN+1問題を解消したら、APIの応答速度がかなり改善した話

LaravelのEloquentでN+1問題が起きていたAPIにEager Loadingを導入したところ、クエリ数が大幅に減り、応答速度がかなり速くなりました。その手順と感想をまとめます。

TypeScript 5.5 で Array.filter() が型を自動で絞り込んでくれるようになった話

TypeScript 5.5 でコールバック型述語の推論が改善され、filter() の戻り値型が自動で絞り込まれるようになりました。型ガード関数を別に書かなくても済む場面が増えて、かなり楽になりました。

Vite 6 の Rolldown ネイティブビルドに切り替えたら、開発サーバーの起動がかなり速くなった話

Vite 6 で導入された Rolldown ビルドモードを試したところ、中規模プロジェクトで開発サーバーの起動が体感できるほど速くなりました。切り替え手順と率直な感想をまとめます。

Docker Compose の watch モードを使い始めたら、開発中のコンテナ再起動が不要になった話

開発中にファイルを変更するたびにコンテナを手動で再起動していたのが、Docker Compose の watch モードで自動同期できるようになり、開発体験がかなり改善されました。設定方法と実際の感想をまとめます。

TypeScript の Template Literal Types でAPI のイベント名を型安全にした話

WebSocket のイベント名や API パスを string 型で渡していたコードに Template Literal Types を導入したところ、補完が効くようになりタイポによるバグがかなり減りました。

Husky + lint-stagedでpre-commit時にコード品質を自動チェックする仕組みを作った話

コミット後のCIでフォーマット崩れや lint エラーが頻発していたプロジェクトに Husky と lint-staged を導入し、コミット前に自動チェックする仕組みを整えました。

pnpm に切り替えたら node_modules のサイズが激減した話

npm から pnpm に移行したところ、node_modules のディスク使用量が半分以下になり、インストール速度もかなり速くなりました。モノレポ対応や切り替え手順、使ってみた感想をまとめます。

ESLint v9 の flat config に移行したら、設定ファイルがかなりスッキリした話

.eslintrc.* で複数ファイルに分散していた ESLint の設定を eslint.config.js（flat config）に移行したところ、構成が1ファイルにまとまり管理がかなり楽になりました。移行手順と感想をまとめます。

Drizzle ORM を使い始めたら、SQL と TypeScript の型が自然につながった話

Prisma から Drizzle ORM に乗り換えたところ、SQL に近い直感的な書き心地と TypeScript の型推論精度の高さに驚きました。セットアップ手順と実際に使ってみた感想をまとめます。

TanStack Query v5 でサーバー状態の管理を整えたら、コードがかなりスッキリした話

React プロジェクトで TanStack Query（旧 React Query）v5 を導入したところ、非同期データの取得・キャッシュ・ローディング状態の管理が一本化されて、コードがだいぶ整理されました。

Node.js 24 で TypeScript がそのまま動く時代になってた話（tsx いらずで快適）

Node.js 22 で追加された型除去（strip-types）機能が Node.js 24 ではデフォルトになりました。tsx や ts-node なしで .ts ファイルを直接実行できる環境がどれだけ快適か、試してみた体験を書きます。

TanStack Query でサーバー状態管理を任せたら、データ取得コードがかなりシンプルになった話

React プロジェクトのデータ取得に TanStack Query（旧 React Query）を導入したところ、useEffect + fetch の手書きコードがほぼなくなり、ローディングやキャッシュ管理がかなり楽になりました。

tRPC でフロント・バック間の型を共有したら、API 通信がかなり安全になった話

tRPC を導入することでバックエンドとフロントエンドで同じ TypeScript 型定義を共有でき、型ズレによるランタイムエラーがかなり減って開発体験が向上しました。Next.js プロジェクトへの導入手順と感想をまとめます。

husky と lint-staged でコミット前に Linter とフォーマットを自動実行するようにした話

husky と lint-staged を導入してコミット前に ESLint と Prettier を自動実行するようにしたら、コードレビューでフォーマット系の指摘がほぼゼロになりました。セットアップ手順と使ってみた感想をまとめます。

git bisect でバグがどのコミットで入ったか特定できた話、知らなかったら損してた

いつのまにか混入していたバグをgit bisectで追跡したら、数十のコミットを手動で確認する手間がなくなりました。コマンドの使い方と実際の体験をまとめます。

React のグローバル State を Zustand に切り替えたら、useContext のボイラープレートが消えた話

複数コンポーネントで共有する State を useContext で管理していたプロジェクトに Zustand を導入したところ、Provider の入れ子が消え、コードがかなりスッキリしました。

CSS Container Queries でメディアクエリを卒業したら、コンポーネントの再利用性がかなり上がった話

ビューポート幅に依存した @media クエリを CSS Container Queries に置き換えたところ、コンポーネント単体でレスポンシブ対応が完結するようになり、管理がかなり楽になりました。

Tailwind CSS v4 に移行したら、設定ファイルが消えてかなりスッキリした話

Tailwind CSS v4 へ移行したところ、tailwind.config.js が不要になり設定がCSSに集約されました。@tailwindcss/upgrade で移行もスムーズで、プロジェクトの見通しがよくなりました。

BiomeでESLint + Prettierを一本化したら、管理がかなり楽になった話

ESLint と Prettier の設定が増えて管理が面倒になっていたプロジェクトに Biome を導入したところ、設定ファイルが1つにまとまり、リントと整形の速度もかなり速くなりました。

Hono で軽量 API サーバーを書いたら、シンプルさと型安全さに驚いた話

TypeScript フレームワーク Hono を個人開発の API に導入してみたところ、型付きルーティングの書き心地がかなり良く、Cloudflare Workers にもそのまま乗せられました。

Turborepo でモノレポを整理したら、CI のビルドが劇的に速くなった話

複数パッケージを管理するモノレポに Turborepo を導入したところ、変更のないパッケージのビルドがキャッシュされ、CI の実行時間がかなり短縮されました。その設定と効果をまとめます。

VitestでJestからユニットテストを乗り換えたら、テスト実行がかなり速くなった話

Jestで動いていたユニットテストをVitestに移行したところ、設定が簡潔になりテスト実行速度がかなり上がりました。移行手順と感想をまとめます。

PlaywrightでE2Eテストを書き始めたら、フロントの壊れに気づくのが早くなった話

フロントエンドに手動確認が多かったプロジェクトにPlaywrightを導入してみたら、デプロイ後の確認コストがかなり減りました。その構成と感想をまとめます。

Zod でAPIレスポンスのバリデーションを整えたらエラー周りがキレイになった話

外部APIのレスポンスを as でキャストしていたコードに Zod を導入したところ、実行時エラーが減り、型の信頼度がかなり上がりました。その手順と感想をまとめます。

GitHub Actions で npm キャッシュを設定したら CI の待ち時間がかなり短くなった話

毎回 npm install を走らせていた CI ワークフローを actions/cache でキャッシュするようにしたところ、実行時間がかなり短縮されました。その設定と手順をまとめます。

Docker の multi-stage build でイメージを一気に軽量化した話

開発用 Dockerfile のまま本番にデプロイしていたイメージを multi-stage build で整理したら、サイズが大幅に減りました。その手順と考え方をまとめます。

TypeScript の strict モードを本番コードに有効化してみた話

tsconfig.json に strict: true を追加したら大量のエラーが出ました。何が起きたのか、どう対処したかをまとめます。

Laravelの paginate() をやめて simplePaginate() にしたら劇的に速度改善した話

商品一覧の遅さを調べる中で、Laravel の paginate() が発行する COUNT クエリが原因候補だと判明しました。simplePaginate() に切り替えた結果と考え方をまとめます。