#developer-experience
16件の記事
-
pnpmのcatalogでモノレポの依存バージョンを1か所にまとめた話!既存リポジトリの移し方も
pnpm workspace内のバージョン管理機能が強化されたので、モノレポのcatalog機能を見直してみました。パッケージごとにバラバラだった依存バージョンがかなりスッキリしました。
-
CSS Container Queriesのハマりどころ!高さが0になる問題とコンテナクエリ単位の使い方
CSS の @container ルールを使い始めたところ、ビューポートではなくコンテナのサイズに基づいてスタイルを変えられるようになり、コンポーネント単位のレスポンシブ対応がかなりシンプルになりました。
-
TypeScript 7.0でビルドが最大10倍速くなったので試してみた話【ESLintでハマった点も】
TypeScript 7.0がGoネイティブコンパイラへの全面移植によってフルビルドが8〜10倍高速化。大規模プロジェクトで実際に触ってみた所感と移行時のポイントをまとめました。
-
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ファイルにまとまり管理がかなり楽になりました。移行手順と感想をまとめます。
-
Node.js 24ならTypeScriptがそのまま動く!tsxいらずになった話と動かない書き方の注意点
Node.js 22 で追加された型除去(strip-types)機能が Node.js 24 ではデフォルトになりました。tsx や ts-node なしで .ts ファイルを直接実行できる環境がどれだけ快適か、試してみた体験を書きます。
-
tRPCでフロントとバックの型を共有したらAPIの型ズレが消えた話!Next.jsでの導入手順と正直な欠点
tRPC を導入することでバックエンドとフロントエンドで同じ TypeScript 型定義を共有でき、型ズレによるランタイムエラーがかなり減って開発体験が向上しました。Next.js プロジェクトへの導入手順と感想をまとめます。
-
huskyとlint-stagedでコミット前にLintとフォーマットを自動実行!commitlintの設定も
husky と lint-staged を導入してコミット前に ESLint と Prettier を自動実行するようにしたら、コードレビューでフォーマット系の指摘がほぼゼロになりました。セットアップ手順と使ってみた感想をまとめます。
-
git bisectでバグが入ったコミットを一発特定!知らなかったら損してた使い方
いつのまにか混入していたバグをgit bisectで追跡したら、数十のコミットを手動で確認する手間がなくなりました。コマンドの使い方と実際の体験をまとめます。
-
Tailwind CSS v4に移行したら設定ファイルが消えた話!移行で見た目が変わるポイントも
Tailwind CSS v4 へ移行したところ、tailwind.config.js が不要になり設定がCSSに集約されました。@tailwindcss/upgrade で移行もスムーズで、プロジェクトの見通しがよくなりました。
-
BiomeでESLintとPrettierを1つにまとめた話!biome migrateで既存設定を移す手順も
ESLint と Prettier の設定が増えて管理が面倒になっていたプロジェクトに Biome を導入したところ、設定ファイルが1つにまとまり、リントと整形の速度もかなり速くなりました。