Dev Note

Web開発の「なぜ」を、
実例で。

フロントエンド、TypeScript、CSS、パフォーマンス、開発ツールについて、実際に手を動かして得た知見を、コード付きで丁寧にまとめています。

カテゴリから探す

フロントエンド

ピックアップ記事

CSS設計

コンテナクエリで親要素の幅に合わせてレイアウトを変える

カードを置く場所によって縦並び・横並びを変えたい。でもメディアクエリは画面幅しか見てくれません。親要素の幅を基準にできるコンテナクエリで、コンポーネント単位のレスポンシブを整理します。

2026年6月26日読了 7分

TypeScript

satisfies演算子で型チェックと推論を両立する

型注釈を付けると推論が広がり、as で縛ると型チェックが効かなくなる。この板挟みを解くのが satisfies です。違いを動くコードで整理します。

2026年6月20日読了 7分

パフォーマンス

next/dynamicで重いコンポーネントを遅延読み込みする

初期表示には不要なのに、最初のバンドルに混ざって重くなっている。そんなコンポーネントは next/dynamic で必要になるまで読み込みを遅らせられます。実例で整理します。

2026年6月15日読了 7分

最新記事

フロントエンド

Web開発の「なぜ」を、実例で。

カテゴリから探す

ピックアップ記事

コンテナクエリで親要素の幅に合わせてレイアウトを変える

satisfies演算子で型チェックと推論を両立する

next/dynamicで重いコンポーネントを遅延読み込みする

最新記事

useEffectで依存配列とクリーンアップを整理する

TypeScriptのユーティリティ型で似た型を手書きしない

FlexboxとCSS Grid、どちらを使うべきか

Next.js App RouterでServer ComponentsとClient Componentsを使い分ける

Core Web Vitals（LCP・CLS・INP）をまず確認する

anyをやめてunknownと型ガードで安全に書く

git rebase -iでコミット履歴を整理する

Tailwind CSSで@applyに頼らずコンポーネントを再利用する

next/imageで画像を最適化するときにつまずいたこと

package.jsonのscriptsでよく使う小技

リストのkeyにindexを使うと何が起きるか

判別可能なユニオン型で状態を安全に表現する

CSSカスタムプロパティでテーマ切り替えを実装する

デバウンスとスロットルでイベントの過剰発火を抑える

git管理から外す：.gitignoreとgit rm --cachedの使い分け

カスタムフックでロジックを切り出すときのメモ

as constで「魔法の文字列」をリテラル型にする

position: stickyが効かない理由と仕組み

React.memo・useMemo・useCallbackの使いどころ

dependenciesとdevDependencies、package-lock.jsonの役割

Web開発の「なぜ」を、
実例で。