Tips & Tricks
Claude Codeに1ファイルだけ直させる指示文のつくり方
「もっと良くして」で40行も変えられた失敗から学んだ、触る範囲・検証・戻し方をセットにしたClaude Code用の依頼文テンプレートを紹介します。
Tips & Tricks
Claude Code の権限拒否から復旧する: 止まった理由を次の安全手順に変える
Claude Code のコマンドが拒否されたとき、焦って許可を広げずに、拒否理由、代替手順、証拠コマンド、再試行条件へ分解する方法。
Tips & Tricks
Claude Codeにビルド→スモークテスト→自動修正を回させる足場の作り方
最小スモークテストの選び方、失敗ログを食わせて直させるループ、回数上限と確認ゲートで暴走を止める方法を、コピペで動くコード付きで紹介します。
Tips & Tricks
Claude Code 権限の“はしご”：厳しめから安全に allow を広げる5段
最初は ask/deny 多めで始め、検証が積み上がった操作だけ段階的に allow へ。Claude Code の権限を安全に緩める5段ラダーと、各段の昇格条件を実例で。
Tips & Tricks
小さいPRで信頼を積む：Claude Codeの変更を1目的に刻んでレビューを通す
大きい変更を小さいPRに刻む手順、1PR=1目的の徹底、AIに任せた差分をレビューしやすく見せる証拠（テスト/diff）の添え方を実例で整理。
Tips & Tricks
Claude Codeのコミット前レビューゲート: 壊れた差分を止める5分の型
commit前にClaude Codeで差分・テスト・CTAを一気に点検する型。build失敗、未翻訳本文、壊れたGumroadリンクを公開前に止める実践手順。
Tips & Tricks
Claude Codeの「できました」を信じない: 検証レシートで証拠を残す運用
AIの自己申告は鵜呑みにしない。テスト・コマンド出力・スクショで裏取りし、検証レシートとしてPRに残す手順を、コピペで動くコード付きで紹介します。
Tips & Tricks
Claude Codeに「どこまで任せる」を毎朝5分で決める権限とコストの回し方
Claude Codeのallow/ask/denyとトークン上限を毎朝5分で点検する運用。自動承認の線引き、使いすぎを止める設定、コピペで動く監査スクリプトまで僕の実例で。
Tips & Tricks
効いたプロンプトを使い捨てない：保存・命名・チーム共有とカスタムコマンド化
よく効いたClaude Codeのプロンプトを、保存・命名・チーム共有し、CLAUDE.mdやカスタムコマンドに育てる運用術。陳腐化したプロンプトの棚卸しまで、僕の失敗込みでまとめました。
Tips & Tricks
CLAUDE.mdの雛形をコピペで作る｜最初の30行に何を書くか
Claude Codeの最初のCLAUDE.mdに何を書くか迷う人へ。コピペで使える最小テンプレ、言語別の例、毎セッション説明し直す手間を1枚で減らす育て方を、僕の失敗込みでまとめました。
Tips & Tricks
バグ報告テンプレートの書き方: 「直して」が伝わるissueの型をコピペで
「画面が壊れてる」が伝わらないのは情報不足が原因。タイトル・再現手順・期待と実際・環境・ログの並べ方を、コピペで使えるissueテンプレと自動生成スクリプトで整えます。
Tips & Tricks
CLAUDE.mdに何を書く？ そのまま貼れるテンプレ7本と禁止事項の作り方
個人開発・コンテンツサイト・API・チーム・レガシー向けのCLAUDE.mdテンプレを、僕が事故った話つきで7本まとめました。コピペして禁止事項を3行足すだけ。
Tips & Tricks
Claude Code を毎日安全に回す：承認とsandboxの線引き運用術
allow/ask/denyの境界、plan・acceptEdits・auto・bypassPermissionsの使い分け、dangerously-skip-permissionsの是非、sandboxの使いどころを実務目線で。
Tips & Tricks
Claude Code入門：インストールから最初のコミットまで30分
Claude Codeの始め方を初心者向けに。インストール、ブラウザ認証、最初のプロンプト、最初のコミットまでを30分で。僕が最初につまずいた権限・コンテキスト・CLAUDE.mdの落とし穴も紹介。
Tips & Tricks
REST API入門：初めての最小APIをClaude Codeと60分で動かす
REST API入門。HTTPメソッドとステータスコードの基礎から、Claude CodeでTodo APIをCRUDまで作り、curlとテストで動かす最初の一歩を実体験で解説。
Tips & Tricks
REST API設計でURLとステータスコードを先に決める：エンドポイント命名と冪等性
REST APIのURL設計・HTTPメソッドとステータスコードの使い分け・ページング・バージョニング・冪等性を、実装前に決める手順とコピペで動くコードで。
Tips & Tricks
Claude Code vs Gemini CLI、結局どっち？僕の使い分け基準
Claude CodeとGemini CLIを半年併用した僕の使い分け基準。料金・OSS・Google連携・失敗例から、あなたが選ぶべき方を整理します。
Tips & Tricks
Claude Code と Cursor の違い：2026年の使い分けと併用術
Claude CodeとCursorを実際に両方触った所感で比較。CLIエージェントとエディタ統合の違い、料金の考え方、向いてる人、併用のコツを2026年視点で整理。
Tips & Tricks
処理が遅いNodeを推測で直すな：計測でボトルネックを特定して速くする手順
遅い処理を勘で直すと別の場所を直して終わる。計測でボトルネックを特定し、N+1・直列await・無駄な再計算を潰してサーバー処理を速くする実践手順を、コピペで動くコード付きで。
Tips & Tricks
LLM APIの料金、なぜ高い？トークン課金の仕組みと予算で止める実装
AI APIの請求が読めない人へ。入出力トークン課金の計算、モデル使い分け、プロンプトキャッシュ、予算アラートで止める方法を、コピペで動くコードと一緒に整理しました。
Tips & Tricks
Claude Code に「全部やって」は禁句：暴走を防ぐ安全な指示の書き方
曖昧な一文がClaude Codeの事故を招く。広すぎる削除・本番への適用・秘密の露出を防ぐ依頼文の型、dry-run、権限とフックで機械的に止める設計を実例で。
Tips & Tricks
本番障害の対応手順: 止血→切り分け→復旧→ポストモーテムを崩さない
本番が落ちた瞬間、焦って直すと被害が広がる。検知→止血→原因切り分け→復旧→振り返りの順番を固定し、Claude Codeをログ調査と仮説出しに使う実務手順を、僕のやらかし込みで紹介。
Tips & Tricks
Claude Code 権限設定リファレンス|settings.json の allow/deny/ask 早見表
Claude Code の権限を settings.json で設計するリファレンス。allow/deny/ask の評価順、Bash・Edit・Read・WebFetch のパターン構文、Hooks 自動化をコピペ設定例で。
Tips & Tricks
Claude Code セキュリティ対策の全体像｜6観点で事故を止めるチェックリスト
Claude CodeとAI支援開発の安全対策を1枚で俯瞰。権限・秘密情報・危険コマンド・依存・入力・ログの6観点を、コピペできる設定とチェックリストで。各論は内部リンクへ。
Tips & Tricks
AI生成コードでやらかすセキュリティ事故6パターンと、その潰し方
権限の渡しすぎ、秘密情報のコミット、入力検証の抜け、脆弱な依存。AI支援開発で実際に起きがちな事故を「何が起きた→なぜ→どう防ぐ」で整理し、コピペで使う防御設定まで。
Tips & Tricks
ハーネスエンジニアリングとは？AIエージェントの「足場」を作って安全に任せる方法
AIエージェントが暴走しない理由はモデルの賢さではなく「ハーネス（足場）」。とは何か、なぜ要るのか、safePathの門番から検証ループまで、コピペで動く最小例でやさしく解説。
Tips & Tricks
ObsidianとClaude Codeをつなぐ全体像｜知識ベースをAIの相棒に変える入口
散らかったObsidianのメモをClaude Codeの相棒に変える全体像。何が起きるか、つなぎ方の地図、毎日の回し方、安全の境界線を、入口の1枚として実体験でまとめます。
Tips & Tricks
SaaS API連携で二重課金させた僕が固めた、Webhook署名検証とリトライ冪等の型
外部SaaS APIを自分のアプリへ連携する実装手順。APIキー管理、Webhook署名検証、指数バックオフのリトライ、冪等性、サンドボックス検証をコピペで動くコードで解説。
Tips & Tricks
「たぶん1日」で爆死した僕の、開発見積もりタスク分解術
「入力欄1つ追加で1日」が5日に膨らんだ反省から、タスク分解・3点見積もり・バッファの置き方を実例で。Claude Codeで前提と抜けを洗い出す壁打ち手順つき。
Tips & Tricks
APIキーをGitHubに上げて30分で悪用された。秘密情報を漏らさない手順
APIキー・トークン・DBパスワードを.envと.gitignoreで隔離し、コミット前にgit-secretsで検出、漏れたら即ローテーション。Claude Codeに秘密を渡さない設計まで僕の失敗談つきで。
Tips & Tricks
Claude Codeにエラーを「直して」と言う前に：原因を当てさせる渡し方
Claude Codeにエラーを丸投げすると一般論が返る。ログの整え方、再現手順の作り方、スタックトレースの読み方を僕の失敗込みで具体的に。
Tips & Tricks
git コンフリクト解決の手順：マーカーの読み方からrerereと再発防止まで
git のマージ衝突を直す具体的な手順。コンフリクトマーカーの読み方、ours/theirsの罠、rerereでの自動再利用、衝突を減らす運用、Claude Codeへの頼み方まで実例で。
Tips & Tricks
レビューで止まるPRを減らす：小さく出して自分で説明する型
AIで速く書いたPRほどレビューで止まる。小さく分け、説明を埋め、自己レビューする型をClaude Codeで仕組み化。コピペで動く差分サイズCI付き。
Tips & Tricks
Claude Codeで巨大コードベースを読む: 検索術と依存追跡で迷わない手順
10万行のリポジトリで迷子になった僕が使う、rg検索の段階化・依存の追い方・実行経路の追跡まで。読み進め方を具体コマンドで解説。
Tips & Tricks
エラーメッセージの読み方: スタックトレースのどこから読むと原因に最短で着くか
赤いログを上から全部読むのは遠回り。スタックトレースのどこから読むか、undefined・型・非同期・importの型分類、エラーをClaude Codeに渡して原因を絞るコツを実例で。
Tips & Tricks
Claude Codeのトークンを節約する：/clearと/compactの使い分けでコンテキストを軽くする
Claude Codeの会話が重くなり返答が雑になる原因はコンテキスト圧迫。/clearと/compactの使い分け、CLAUDE.mdを短く保つコツ、読ませる量を絞る依頼で、トークンとコストを下げる方法を実例で。
Tips & Tricks
Claude Code カスタムスラッシュコマンドの作り方: .claude/commands と $ARGUMENTS で自分の型を作る
Claude Codeの自作スラッシュコマンドを最新仕様で。.claude/commands/*.md の書き方、$ARGUMENTS・位置引数、frontmatter、スキル統合、チーム共有まで実例で解説。
Tips & Tricks
Claude CodeのCanvas開発でぼやけ・スマホ崩れを直す実装術
Canvasがスマホで崩れぼやける原因はHiDPIと座標設計。Claude Codeに渡す条件文、コピペで動くコード、Playwright検証まで実体験で解説。
Tips & Tricks
Markdownを変換するなら正規表現は捨てる。remark/rehypeで安全に処理する書き方
MarkdownをHTMLに変換するとき正規表現で見出しやリンクを拾うと事故る。remark/rehypeのパイプライン、rehype-sanitizeでXSS対策、目次生成、MDXとの違いを実コードで。
Tips & Tricks
Claude Codeとペアプロ｜AIを相棒にして任せすぎない開発の型
Claude Codeとペアプログラミングする時の役割分担・基本ループ・プロンプト例を、僕の失敗談つきで紹介。任せすぎて事故らないコツがわかる。
Tips & Tricks
Claude Codeで良いプロンプトを書く5つのコツ｜Before/After付き
「いい感じにして」が通じない理由はモデルじゃなく頼み方。Claude Codeで効く具体性・文脈・出力形式・例示・反復の5コツを、Before/Afterの実例で。
Tips & Tricks
コードレビュー チェックリスト＋Claude Codeで一次レビューを回す方法
正しさ・可読性・セキュリティ・テスト・設計の観点別チェックリストと、CLAUDE.mdに観点を入れてClaude CodeにPRの一次レビューをさせる手順を、僕の失敗込みで紹介します。
Tips & Tricks
Web Audio APIの使い方：音を鳴らす・作る・波形で見せる入門
ブラウザのWeb Audio APIをやさしく解説。AudioContextの起動、Oscillatorで音を作る、Gain/Filterで加工、AnalyserNodeで波形表示、autoplay対策まで、コピペで動くコード付き。
Tips & Tricks
IndexedDBの使い方：idbライブラリで下書き保存とオフライン同期を作る
ブラウザ内DBのIndexedDBをidbライブラリで簡潔に。localStorageとの違い、オブジェクトストアとインデックス、トランザクション、容量と永続化を動くコードで。
Tips & Tricks
レスポンシブCSS設計の考え方：モバイルファースト・clamp・コンテナクエリで崩さない
横スクロールが消えないのは設計順序のせい。モバイルファースト、clamp、コンテナクエリ、画像の出し分けまで、崩れないレスポンシブCSSの考え方を実例で。
Tips & Tricks
ダークモードの最初の一瞬だけ白い。あのちらつきを消す実装手順
ダークモード実装でほぼ全員がハマる「開いた瞬間だけ白くなる」ちらつき。CSS変数・prefers-color-scheme・head内スクリプトで消す手順を、僕の失敗込みで解説。
Tips & Tricks
Claude Codeで開発が速くなった僕の実務Tips：段取り・CLAUDE.md・確認の省力化
Claude Codeで毎日の開発を速くする実務Tips。よく使うワークフロー、CLAUDE.mdの効かせ方、権限の段取り、確認の省力化、つまずきを減らす小ワザを僕の失敗込みで紹介。
Tips & Tricks
husky + lint-staged で「壊れたコードをコミットさせない」門番をつくる
コミット前にESLintとPrettierを変更ファイルだけに走らせる仕組みを、husky + lint-stagedで構築。導入手順、commitlint、CIとの二重化、フックが遅い・効かない時の切り分けまで。
Tips & Tricks
Framer Motionの退場・レイアウトアニメ実装：CSSで詰む動きをReactで足す
リストの並び替えやモーダルの退場はCSSだと詰む。Framer Motion(motion)のAnimatePresenceとlayout、Web Animations APIの使い分けを、コピペで動くReactコードで解説。
Tips & Tricks
ドキュメントが嘘をつく前に：JSDoc→TypeDoc自動生成とREADME・ADRの保守
コメントとコードがズレた瞬間ドキュメントは嘘になる。JSDoc/TSDocからTypeDocでリファレンスを生成し、READMEとADRを陳腐化させない仕組みを、Claude Codeと検証スクリプトで回す手順にまとめました。
Tips & Tricks
Prettier設定の.prettierrcとESLint競合回避を最短で固める
.prettierrcの書き方、eslint-config-prettierでの競合回避、保存時整形、CIのフォーマットチェックまで、コピペで動く設定で順番に固めます。
Tips & Tricks
技術的SEOとAIO最適化のハブ: 構造化データ・Core Web Vitals・内部リンク設計
title/meta、JSON-LD構造化データ、sitemap、Core Web Vitals、内部リンク、AI回答エンジン対策まで。Webサイトを検索とAIに見つけてもらうための土台を、実装つきでまとめます。
Tips & Tricks
ブラウザが固まる重い処理、Web Workerで逃がす（Claude Code実装）
CSV集計や画像処理でUIがカクつく原因と対策。Claude CodeにWeb Workerを型付きで実装させ、メインスレッドを止めない設計を実例コードで解説。
Tips & Tricks
コードレビューの進め方とコメントの書き方：Claude Codeに一次レビューを任せる型
PRを小さく出し、指摘と提案を分け、トゲのないコメントを書く。レビューを溜めないチーム文化と、Claude Codeに一次レビューを任せて人間は設計に集中する運用を、僕の失敗込みで紹介します。
Tips & Tricks
Webアクセシビリティ実装の優先順位:セマンティックHTML→キーボード→ARIAの順で直す
a11y対応は「最後にaxe」では遅い。セマンティックHTML優先、ARIAは最後、キーボードとフォーカス、コントラスト、実機確認まで実装順に解説するハブ記事。
Tips & Tricks
npmパッケージ公開でハマる順番に、tsupでESM/CJS両対応する手順
npm publishでESM/CJS両対応のパッケージを公開する手順。package.jsonのexports、tsupビルド、型定義、npm packの中身確認、CI自動公開まで実例で。
Tips & Tricks
eslint.config.js の書き方：Flat ConfigでTypeScriptを実務向けに整える
ESLint v9以降の標準、Flat Config（eslint.config.js）の書き方を実例で。typescript-eslint連携、Prettierとの競合回避、CIでの実行まで僕の失敗込みで解説。
Tips & Tricks
Claude CodeのSVGが「ダークモードで真っ黒」になる前に直す型
「SVG作って」だけだと色がハードコードされ、viewBoxが消え、ダークモードで死ぬ。僕が踏んだ罠とコピペで動く型を、アイコン・図解・最適化まで一気にまとめます。
Tips & Tricks
Claude CodeでCSSが崩れる原因と、崩れない設計の進め方
Claude CodeでCSSを直すと別ページが崩れる——その原因と直し方を、僕の失敗込みで解説。レイヤー設計で優先順位を固定し、よくある崩れを順に潰す進め方。
Tips & Tricks
Gitブランチ戦略の選び方：trunk-based vs git-flow と rebase/merge使い分け
個人とチームでGitのブランチをどう切るか。trunk-based developmentとgit-flowの違い、rebase/mergeの使い分け、コミット粒度、Claude Code併用の運用を実例で整理。
Tips & Tricks
devcontainer.jsonで開発環境を1ファイル化する：Codespacesもチームも同じ箱で動かす
「僕のPCでは動く」を消す方法。devcontainer.jsonの書き方、features、postCreateCommand、Codespacesでの再現、Claude Codeを隔離して安全に走らせるコツを実例で。
Tips & Tricks
Service Worker入門：キャッシュ戦略3つとオフライン対応、更新の落とし穴
Service Workerのinstall/activate/fetch、cache-first・network-first・stale-while-revalidateの使い分け、Workbox、古いSWが残る更新事故をコピペコードで。
Tips & Tricks
React状態管理は「規模」と「種類」で選ぶ：Zustand・Jotai・Reduxの使い分け
useStateで足りるか、Zustandか、Jotaiか、Reduxか。サーバー状態はそもそも別物。規模と種類でライブラリを選ぶ判断軸を、コピペで動くコードと一緒に整理しました。
Tips & Tricks
TypeScript実務のコツ12選: anyを避けてstrictで事故らない型の書き方
型推論を活かす、anyをunknownと型ガードで置き換える、strict設定、as constとリテラル型、エラーの読み方。実務で効くTypeScriptのコツを一人称で。
Tips & Tricks
Drizzle ORM 使い方入門：SQLに近い型安全なスキーマとマイグレーション
Drizzle ORMをClaude Codeで実装。SQLに近い書き味でスキーマ定義、drizzle-kitのマイグレーション、リレーショナルクエリ、Zod連携まで。Prismaとの違いも。
Tips & Tricks
スケルトンスクリーンの実装：スピナーより速く“感じる”ローディングUIをReactで作る
スケルトンスクリーンがスピナーより体感が速い理由と、CLSを起こさない実寸合わせの作り方。Suspenseとの組み合わせ、CSSの書き方、使う場面/使わない場面を実コードで。
Tips & Tricks
Reactトースト通知のキュー管理。複数表示・自動消去・aria-live対応
Reactトースト通知の難所はキュー管理。複数同時表示の制御、ホバーで一時停止、重複のまとめ、aria-liveでの読み上げまでコピペで動くコードで解説。
Tips & Tricks
CSS変数の使い方：var()・:root・テーマ切替をJSから動かす実装
CSS変数（カスタムプロパティ）の基本。--var と var()、:root とスコープ、継承、JSからの読み書き、ダークモード切替、フォールバックを、僕がハマった失敗込みで解説。
Tips & Tricks
MSWでAPIモック：Vitestと画面で同じハンドラを使い回す
MSWでネットワーク層からAPIを横取りしてモックする手順。1つのhandlersをVitestのテストとブラウザ開発で共有し、Playwright併用や実APIへの切替まで実例で解説。
Tips & Tricks
Reactモーダルのアクセシビリティ:フォーカストラップとdialog要素の落とし穴
Reactモーダルのフォーカストラップ、ESCで閉じる、背景スクロール固定、aria-modal、フォーカス復帰、dialog要素と自作の違いを実装コード付きで。
Tips & Tricks
Tailwind CSSの使い方のコツ：@applyを乱用せず崩れないUIにする実践Tips
Tailwind CSSのclassNameが伸びて崩れる前に。ユーティリティファースト、@applyの使いどころ、コンポーネント抽出、v4の変更点を実例で。
Tips & Tricks
Flexbox実用パターン｜中央寄せ・ナビ・等高カードを崩さない
Flexboxの中央寄せ、両端＋中央のナビ、等高カードをコピペで動くコードで紹介。横スクロールが消えないmin-width:0問題も実例で直します。
Tips & Tricks
Reactのテーブル実装でソート・ページネーション・仮想化を詰める
Reactのデータテーブルをソート・ページネーション・列フィルタ・仮想化まで実装。自前の最小コードとTanStack Tableの使い分け、アクセシブルなtableマークアップを紹介。
Tips & Tricks
Reactでカレンダーを自作する：日付ピッカーとタイムゾーンずれの倒し方
Reactで日付ピッカーを自作する手順。月グリッド生成、月送り、範囲選択、矢印キー操作、そして「日付が1日ずれる」タイムゾーンの罠まで、コピペで動くコードで解説。
Tips & Tricks
CSS Gridの実務：minmaxとauto-fitで崩れない2次元レイアウト
grid-template-columns、fr、minmax、auto-fitでレスポンシブを最小コードで。Flexboxとの使い分けとはみ出し対策まで、コピペで動く例で解説。
Tips & Tricks
リッチテキストエディタ実装でcontenteditableに泣いた僕がTipTapに逃げた話
リッチテキストエディタ実装の地雷を回避する。contenteditableの罠、TipTap/Lexical/ProseMirrorの違い、保存形式、XSSサニタイズ、ペースト処理を実コード付きで。
Tips & Tricks
React.lazyとdynamic importでコード分割：重いUIを後回しにする
トップページが管理画面やグラフまで一緒に読み込んで重い。React.lazy+Suspense、Next.jsのdynamic、プリフェッチ、分割しすぎの罠まで、コピペで動く実装で送り分けを解説。
Tips & Tricks
画像のloading=lazyで本文が遅くなる罠: 遅延させない1枚の見分け方
loading=lazyを全画像に付けてLCPが悪化した僕の失敗から、遅延させないヒーロー画像の見分け方、CLS対策、IntersectionObserverとの使い分けを実装で説明します。
Tips & Tricks
メディアクエリとコンテナクエリの使い分け：壊れないブレークポイント設計
@mediaと@containerをどう使い分けるか。端末名で増やさないブレークポイント設計と、Claude Codeに任せて崩れない依頼の型を実例で解説。
Tips & Tricks
npm/pnpm依存の更新で本番を壊さない手順 — lockfile・semver・Renovate
「npm update」一発で本番が落ちた失敗から学んだ依存管理の手順。lockfileの意味、^と~の違い、メジャー更新の進め方、Renovate自動化、npm auditまで。
Tips & Tricks
React ドラッグ&ドロップ実装、dnd-kitでキーボード操作まで通す
React のドラッグ&ドロップを dnd-kit で実装。HTML5 Drag and Drop APIの限界、リスト並び替え、キーボード操作とタッチ対応まで、コピペで動くコード付き。
Tips & Tricks
無限スクロールの難所はsentinelと仮想化：重複ロードと位置復元の対策
無限スクロールが本番で壊れる原因はsentinelの置き方と長大リストのDOM。IntersectionObserverの重複ロード防止、react-windowでの仮想化、戻る位置復元、SEO併用までReactで解説。
Tips & Tricks
SameSite=Laxで本番だけログインが切れた話。Cookie属性の正しい決め方
HttpOnly・Secure・SameSite・Domain・Path・Max-Age。Cookie属性の意味と決め方を、本番で踏んだ罠と一緒にNext.jsのコピペコードで解説します。
Tips & Tricks
navigator.shareで共有ボタンを作る：未対応ブラウザはコピーに逃がす
共有ボタンが半分の端末で無反応だった僕の失敗から、navigator.shareの使い方、HTTPSとタップ必須の制約、未対応時のコピー退避、ファイル共有まで実装で解説します。
Tips & Tricks
1万行のリストが重い。仮想スクロールで“見える分だけ”描く実装手順
大量リストが重い理由と、見えている範囲だけ描く仮想スクロールの作り方。react-window・TanStack Virtual・virtuaの選び方、固定/可変高さ、コピペ実装まで。
Tips & Tricks
GA4イベント設計の沼から抜けた話：命名を固定し計測漏れと二重計測を止める
PVは伸びるのに何が効いたか分からない。GA4とPlausibleのイベント命名を固定し、計測漏れ・二重計測・同意管理(consent mode)まで実装で潰した記録。コピペで動くJS付き。
Tips & Tricks
Claude CodeにFramer Motionを書かせたら跳ねすぎた話と直し方
Claude CodeでFramer Motion（Motion for React）を実装。motion・variants・AnimatePresenceの使い方と、跳ねすぎ・exit不発を直した実例コードを公開。
Tips & Tricks
A/Bテストで「勝った」が嘘になる瞬間。収益化導線の正しい計測
クリックは増えたのに売上は減った。僕が踏んだ罠を起点に、Claude CodeでA/Bテストの割り当て・計測・有意差・ロールバックを安全に作る手順を解説。
Tips & Tricks
navigator.clipboardでコピーボタンを作る：HTTPで動かない罠と権限の対処
コピーボタンが社内検証のスマホだけ無反応だった僕の失敗から、navigator.clipboard.writeTextの使い方、HTTPSと権限の制約、古いexecCommandへの退避、Reactでの成功表示まで実装で解説します。
Tips & Tricks
フィーチャーフラグの段階的リリースと消し忘れ負債をClaude Codeで防ぐ
if(flag)を足すだけでは本番で破綻する。フラグの種類分け、環境変数→DB→SaaSの段階実装、段階的ロールアウト、寿命管理までを僕の事故込みで実装解説。
Tips & Tricks
.envと.env.localを混ぜて本番が落ちた話。環境変数を型付きで守る設計
.envと.env.localの使い分け、.gitignore、zodでの起動時バリデーション、本番への注入、クライアント露出の境界まで。環境変数を事故らせない型を作る。
Tips & Tricks
Webアプリのキーボードショートカット実装：Cmd/Ctrl判定と入力中の無効化
JavaScriptでキーボードショートカットを実装する方法。keydown、修飾キー判定、入力中の無効化、?キーでヘルプ、Reactフックまでコピペで動く形で解説。
Tips & Tricks
パンくずリストをReactで実装：aria-currentとJSON-LDで現在地とSEO対応
色だけの現在地表示は支援技術に伝わらない。aria-current・BreadcrumbListのJSON-LD・パスからの自動生成まで、コピペで動くReactコードで作る手順を僕の失敗込みで解説。
Tips & Tricks
TypeScriptユーティリティ型の使い分け: Pick/Omit/Record/Partialを実例で
Pick・Omit・Partial・Record・ReturnType・Awaitedをいつ何に使うか、コピペで動く実例と落とし穴で整理。Claude Codeに型を任せる前に押さえたい基準。
Tips & Tricks
TypeScriptジェネリクス入門: 型引数・extends制約・ユーティリティ型の使いどころ
TypeScriptのジェネリクスを、型引数の基本・extends制約・デフォルト型引数・Partialなどのユーティリティ型・実務の使い分けまで、コピペで動く例で整理。