テック
Laravel・PHP・TypeScript・MySQL を中心に、実務で試した設定やパフォーマンス改善を書いています。
新しい記事 58件
- テック
Laravel 13.38のPreventStaleDatabaseReadsで保存直後の古いデータ表示を防ぐ！stickyとの違いも
リードレプリカ構成のLaravelで「保存したのに一覧に出ない」を防ぐ、13.38.0の新ミドルウェアPreventStaleDatabaseReads。stickyとの違い、for()での秒数の決め方、ジョブで使うusingWritePdoまでまとめました。
- テック
PHP 8.6の部分関数適用でパイプ演算子のfn包みが消えた！RC3で試したclamp()とハマりどころ
11月19日リリース予定のPHP 8.6を、10月8日公開のRC3で試しました。部分関数適用（?と...）でパイプ演算子のアロー関数が消えた書き方、clamp()でmin・maxの入れ子をやめた話、引数が作成時に評価される落とし穴、上げる前に見ておきたい非推奨をまとめます。
- テック
Vitest 5に上げたらモックの呼び出し履歴が消えた！clearMocksの変更とvi.when・vitest doctorの使い方
Vitest 4.1から5.0に上げたら、beforeAllで記録したモックの呼び出しを見るテストが落ちました。clearMocksの既定値の変更など移行で直したところと、新しく入ったvi.when・vitest doctorの使い方をまとめます。
- テック
Pest 5の--tiaで変わったテストだけ回す！Laravelのテスト待ちを減らした設定とCIで使わない理由
Pest 5のTia（テスト影響分析）を手元のLaravelプロジェクトで使い始めました。--parallel --tiaの動き、PCOVが必要なところ、CIでは使わずに--shardで実行時間ごとに分ける設定まで、v5.3.1時点の情報でまとめています。
- テック
EXPLAIN ANALYZEでLaravelの遅いクエリを実測！loopsの読み方とtoBase()の落とし穴
EXPLAIN の推定だけでは分からなかった遅いクエリを、MySQL の EXPLAIN ANALYZE で実測しました。actual time・rows・loops の読み方と、Laravel のクエリをそのまま流すマクロ、toBase() を挟む理由をまとめます。
- テック
Laravel 13のJsonApiResourceでJSON:API対応が標準に！includeでN+1にしないための組み合わせ
Laravel 13 から標準で入った JsonApiResource で、API のレスポンスを JSON:API の形にしてみました。make:resource --json-api の作り方、$attributes と $relationships の書き方、include と fields の動き、type 名と N+1 のハマりどころ、Spatie の Laravel Query Builder v7 との組み合わせまでまとめています。
- テック
Node.js 26が10月28日にLTS入り！Node 22から24を飛ばして上げる前に確認した5つのこと
Node.js 26 は2026年10月28日に LTS になり、Node 22 のサポートは2027年4月30日で終わります。Laravel＋Vite のプロジェクトで Node 22 から 26 へ上げる前に確認したこと（サポート期限、mise での並行インストール、ネイティブアドオン、undici 8 のヘッダー検証、OpenSSL の鍵長）を、手順つきでまとめています。
- テック
RectorでLaravelの古い書き方を自動で直した話！--max-changesで少しずつPRにする運用
PHPの自動リファクタリングツールRectorとrector-laravelを、Laravel 13のプロジェクトに入れました。withComposerBasedでの設定、2.6.6の--filterと2.6.7の--max-changesでレビューしやすい量に分ける方法、CIでのdry-run、最初にハマった点まで書いています。
- テック
Astroの静的サイトにCloudflare Workers KVで「わかる」ボタンを付けた話！run_worker_firstと無料枠の書き込み1,000回の落とし穴
このブログのエンジニアあるあるに「わかる」ボタンを付けるため、Astroの静的サイトはそのままに、Cloudflare Workersの/api/*だけWorkerを通す構成にしました。run_worker_firstの書き方、KVでのカウントと連打対策、無料枠の書き込み上限と結果整合性のハマりどころをまとめています。
- テック
git rebase --update-refsで積み上げブランチのrebaseが1回で済んだ話！squashマージ後の直し方も
PRを小さく分けて積み上げると、下のブランチを直すたびに上のブランチを1本ずつrebaseし直すのが面倒でした。git rebase --update-refs を使ったら1回のrebaseで全部そろうようになったので、設定とハマった点、GitHubのStacked PRsとの使い分けをまとめます。
- テック
Larastan 3.12 のキュー用ルールを有効にしたら、トランザクション内の dispatch に afterCommit を付け忘れていた話
2026年9月の Larastan 3.12.0 で、キュー済みジョブ向けのオプトインルールが7つ追加されました。phpstan.neon での有効化の仕方、実際に引っかかった afterCommit の付け忘れ、既存プロジェクトに入れるときの baseline の使い方までまとめています。
- テック
Laravel の php artisan dev に乗り換えたら、composer.json の長い concurrently 行を消せた話
Laravel 13.16 で入った php artisan dev を、既存プロジェクトに入れてみました。起動する4つのプロセス、AppServiceProvider での追加・除外・並び順の設定、pail が出てこなかったハマりどころまで、13.34 時点の仕様でまとめています。
- テック
MySQLの使っていないインデックス、いきなり消さずに「不可視」で2週間様子を見てから消すようにした話
Laravel のプロジェクトで増えすぎたMySQLのインデックスを、sys.schema_unused_indexes で洗い出し、INVISIBLE にして様子を見てから削除する手順にしました。統計がリセットされる落とし穴や、外部キーで消せないときの対処も書いています。
- テック
PHP 8.5のパイプ演算子をLaravelで使ってみた！一時変数だらけの整形処理がかなり読みやすくなった話
PHP 8.5 で入ったパイプ演算子 |> を、Laravel の入力整形まわりで試してみました。書き方、最初につまずいたエラー、Str や Collection との使い分けまでまとめます。
- テック
Node.js 26でTemporal APIが標準に！Dateの月末ズレ・夏時間をTemporalで書き直してみた
Node.js 26 から Temporal API がフラグなしで使えるようになりました。Date でハマりがちな月末の加算・日付文字列のパース・夏時間を、Node.js 26.10.0 で Temporal と並べて動かした結果と、TypeScript で型を通す設定をまとめます。
- テック
Laravel 13のPHP属性でモデルとジョブの設定がスッキリ！#[Table]・#[Fillable]の書き方
Laravel 13 で使えるようになった #[Table] や #[Fillable]、ジョブの #[Tries] #[Timeout] などの PHP 属性。既存のモデルとジョブを書き換えてみた感想と、継承でハマった点をまとめます。
- テック
RedisのキャッシュでAPIが別次元に速くなった話！キャッシュの消し方とCache Stampede対策
DBへの問い合わせが増えて遅くなっていたAPIにRedisのキャッシュ層を追加したところ、レスポンス速度が大幅に改善し、DBの負荷もかなり下がりました。
- テック
miseでNode.jsとPHPのバージョン管理を一本化！nvm・phpenvから乗り換えた手順
プロジェクトごとにnvmとphpenvを使い分けていたのをやめて、miseに一本化しました。設定ファイル1つで複数ツールのバージョンを切り替えられるようになって、環境構築がかなり楽になりました。
- テック
pnpmのcatalogでモノレポの依存バージョンを1か所にまとめた話！既存リポジトリの移し方も
pnpm workspace内のバージョン管理機能が強化されたので、モノレポのcatalog機能を見直してみました。パッケージごとにバラバラだった依存バージョンがかなりスッキリしました。
- テック
本番エラーにユーザー報告で気づく状態をやめたくてSentryを入れた話！導入手順とハマった点
本番環境のエラーをユーザー報告で初めて知る状態が続いていたので、Sentryを導入したところ、エラーの検知から原因特定までのスピードがかなり変わりました。
- テック
Laravel OctaneをFrankenPHPで入れたらAPIが別次元に速くなった話！メモリリークっぽい挙動の対処も
Laravelの標準PHP-FPM構成にLaravel Octane（FrankenPHP）を導入したところ、毎リクエストの再起動コストがなくなり、APIの応答速度がかなり改善しました。
- テック
React Compilerを入れたらuseMemo・useCallbackがほぼ消えた話！実際に消えたコードを紹介
React Compiler を実際に仕事のプロジェクトに導入してみたら、手動で書いていた useMemo・useCallback の大半が不要になりました。導入手順とハマった点をまとめています。
- テック
Astro 6にアップグレードしてみた！v5からの移行手順とLive Content Collectionsの使い心地
このブログでも使っている Astro を v5 系から v6 系にアップグレードしたところ、Live Content Collections の安定化と dev サーバーの改善で、コンテンツまわりの体験がかなり変わりました。
- テック
MSWで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のハマりどころ！高さが0になる問題とコンテナクエリ単位の使い方
CSS の @container ルールを使い始めたところ、ビューポートではなくコンテナのサイズに基づいてスタイルを変えられるようになり、コンポーネント単位のレスポンシブ対応がかなりシンプルになりました。
- テック
Laravel SanctumでSPAのAPI認証を実装！401・419が出るときのチェックリストつき
LaravelでReact SPAのバックエンドAPIを作る際の認証にSanctumを使ったところ、Passportと比べてセットアップがかなり軽く、CSRFトークンの扱いも含めてスムーズに実装できました。
- テック
TypeScript 7.0でビルドが最大10倍速くなったので試してみた話【ESLintでハマった点も】
TypeScript 7.0がGoネイティブコンパイラへの全面移植によってフルビルドが8〜10倍高速化。大規模プロジェクトで実際に触ってみた所感と移行時のポイントをまとめました。
- テック
LaravelのN+1問題を解消したらAPIが速くなった話！with()以外の対策も
LaravelのEloquentでN+1問題が起きていたAPIにEager Loadingを導入したところ、クエリ数が大幅に減り、応答速度がかなり速くなりました。その手順と感想をまとめます。
- テック
TypeScript 5.5でArray.filter()の型が自動で絞り込まれるように！型ガード不要になる書き方と例外
TypeScript 5.5 でコールバック型述語の推論が改善され、filter() の戻り値型が自動で絞り込まれるようになりました。型ガード関数を別に書かなくても済む場面が増えて、かなり楽になりました。
- テック
ViteのRolldownビルドに切り替えたら開発サーバーが速くなった話！プラグインでつまずいた点も
Vite 6 で導入された Rolldown ビルドモードを試したところ、中規模プロジェクトで開発サーバーの起動が体感できるほど速くなりました。切り替え手順と率直な感想をまとめます。
- テック
Docker Compose watchでコンテナ再起動いらず！ファイル変更を自動で反映する設定方法
開発中にファイルを変更するたびにコンテナを手動で再起動していたのが、Docker Compose の watch モードで自動同期できるようになり、開発体験がかなり改善されました。設定方法と実際の感想をまとめます。
- テック
TypeScriptのTemplate Literal TypesでAPIのイベント名を型安全にした話
WebSocket のイベント名や API パスを string 型で渡していたコードに Template Literal Types を導入したところ、補完が効くようになりタイポによるバグがかなり減りました。
- テック
pre-commitのLintチェック、チームで入れる前に決めておきたいこと！HuskyとLefthookの比較も
コミット後のCIでフォーマット崩れや lint エラーが頻発していたプロジェクトに Husky と lint-staged を導入し、コミット前に自動チェックする仕組みを整えました。
- テック
npmからpnpmに切り替えたらnode_modulesが半分以下に！乗り換え手順とcatalogの使い方
npm から pnpm に移行したところ、node_modules のディスク使用量が半分以下になり、インストール速度もかなり速くなりました。モノレポ対応や切り替え手順、使ってみた感想をまとめます。
- テック
ESLint v9のflat config移行でハマったこと！.eslintrcからの書き換えと自動移行ツール
.eslintrc.* で複数ファイルに分散していた ESLint の設定を eslint.config.js（flat config）に移行したところ、構成が1ファイルにまとまり管理がかなり楽になりました。移行手順と感想をまとめます。
- テック
PrismaからDrizzle ORMに乗り換えた話！SQLに近い書き心地とTypeScriptの型が気持ちいい
Prisma から Drizzle ORM に乗り換えたところ、SQL に近い直感的な書き心地と TypeScript の型推論精度の高さに驚きました。セットアップ手順と実際に使ってみた感想をまとめます。
- テック
TanStack Query v5の変更点と使い方！queryKeyの決め方を揃えたらキャッシュ管理がラクになった
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でデータ取得のuseEffectが消えた話！prefetchQueryとselectの使い方
React プロジェクトのデータ取得に TanStack Query（旧 React Query）を導入したところ、useEffect + fetch の手書きコードがほぼなくなり、ローディングやキャッシュ管理がかなり楽になりました。
- テック
tRPCでフロントとバックの型を共有したらAPIの型ズレが消えた話！Next.jsでの導入手順と正直な欠点
tRPC を導入することでバックエンドとフロントエンドで同じ TypeScript 型定義を共有でき、型ズレによるランタイムエラーがかなり減って開発体験が向上しました。Next.js プロジェクトへの導入手順と感想をまとめます。
- テック
huskyとlint-stagedでコミット前にLintとフォーマットを自動実行！commitlintの設定も
husky と lint-staged を導入してコミット前に ESLint と Prettier を自動実行するようにしたら、コードレビューでフォーマット系の指摘がほぼゼロになりました。セットアップ手順と使ってみた感想をまとめます。
- テック
git bisectでバグが入ったコミットを一発特定！知らなかったら損してた使い方
いつのまにか混入していたバグをgit bisectで追跡したら、数十のコミットを手動で確認する手間がなくなりました。コマンドの使い方と実際の体験をまとめます。
- テック
useContextのProvider地獄をZustandで解消した話！再レンダリングを増やさない書き方も
複数コンポーネントで共有する 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を1つにまとめた話！biome migrateで既存設定を移す手順も
ESLint と Prettier の設定が増えて管理が面倒になっていたプロジェクトに Biome を導入したところ、設定ファイルが1つにまとまり、リントと整形の速度もかなり速くなりました。
- テック
HonoでAPIサーバーを書いたら型安全さに驚いた話！Hono RPCとzValidatorの使い方
TypeScript フレームワーク Hono を個人開発の API に導入してみたところ、型付きルーティングの書き心地がかなり良く、Cloudflare Workers にもそのまま乗せられました。
- テック
TurborepoでモノレポのCIビルドが劇的に速くなった話！キャッシュが効かないときの確認ポイント
複数パッケージを管理するモノレポに Turborepo を導入したところ、変更のないパッケージのビルドがキャッシュされ、CI の実行時間がかなり短縮されました。その設定と効果をまとめます。
- テック
JestからVitestに乗り換えたらテストがかなり速くなった話！移行手順とUIモードの使い方
Jestで動いていたユニットテストをVitestに移行したところ、設定が簡潔になりテスト実行速度がかなり上がりました。移行手順と感想をまとめます。
- テック
PlaywrightでE2Eテストを始めたら、フロントの壊れにすぐ気づけるようになった話【不安定なテストの直し方も】
フロントエンドに手動確認が多かったプロジェクトにPlaywrightを導入してみたら、デプロイ後の確認コストがかなり減りました。その構成と感想をまとめます。
- テック
ZodでAPIレスポンスを検証したら「型は正しいのにundefined」事故が減った話【v4の変更点も】
外部APIのレスポンスを as でキャストしていたコードに Zod を導入したところ、実行時エラーが減り、型の信頼度がかなり上がりました。その手順と感想をまとめます。
- テック
GitHub Actionsのnpmキャッシュ設定でCIが速くなった話！actions/cacheの使い方と注意点
毎回 npm install を走らせていた CI ワークフローを actions/cache でキャッシュするようにしたところ、実行時間がかなり短縮されました。その設定と手順をまとめます。
- テック
Dockerのmulti-stage buildでイメージを軽量化！Laravelでの書き方とビルド時間の短縮
開発用 Dockerfile のまま本番にデプロイしていたイメージを multi-stage build で整理したら、サイズが大幅に減りました。その手順と考え方をまとめます。
- テック
TypeScriptのstrictモードを本番コードで有効にしたら大量のエラーが出た話！対処の仕方まとめ
tsconfig.json に strict: true を追加したら大量のエラーが出ました。何が起きたのか、どう対処したかをまとめます。
- テック
Laravelのpaginate()が遅い原因はCOUNTクエリ！simplePaginate()で劇的に速くした話
商品一覧の遅さを調べる中で、Laravel の paginate() が発行する COUNT クエリが原因候補だと判明しました。simplePaginate() に切り替えた結果と考え方をまとめます。
