在庫管理SPAで「並び替え」を3系統使い分けた話。React + TypeScript製の個人開発アプリで、列ソート / カードD&D / リストD&Dをどう実装したか、@dnd-kitの採用判断、localStorageの3層分離、保存値の正規化パターンまでコード抜粋付きで解説します。

ブログにアップロードする写真が1〜2MBで重くて困っている人向けに、Claude Codeに「画像縮小して」と頼むだけで自動リサイズが走る環境の作り方を解説します。Node.js+sharpの自作ツールをSkillとして登録し、SEOで失わないライン（最大幅1600px・JPG品質80）を守りつつ容量32%削減する実装例付き。

Claude Codeで毎回y/nを押すのが面倒なら、settings.jsonで自動承認の設計を仕込んでおくのが早いです。広くallowして危険コマンドだけdenyで塞ぐパターンと、外部アクセス(WebFetch/WebSearch)だけ承認制にする保守パターンの2案を、実物の設定ファイルベースで紹介します。

Playwrightで`page.locator('input[name="status"]')`のように一度取得した複数要素のLocatorから、特定のvalueを持つ1要素だけを絞り込む方法を解説します。`.filter({ has: ... })`が動かない理由と、`.and()`を使った正しい絞り込みパターンを最小コードで紹介します。

PWAスタンドアロン起動時だけAdSense広告を完全に出さない実装を解説します。matchMedia('(display-mode: standalone)') と navigator.standalone の二重判定でiOS/Androidの両方をカバーし、「広告コードを出してから隠す」ではなく「そもそも読み込まない」方針でUXとAdSenseポリシーを両立する設計です。

Playwrightで複数ビューポート（PC/タブレット/スマホ）を一括E2Eテストする方法を解説します。projects設定で3画面サイズを直列実行し、各操作のスクリーンショットを連番で自動収集する構成、カスタムフィクスチャによる命名規則、globalTeardownでの横並びレスポンシブ比較HTML生成まで実装例付きで紹介します。

ダークモード対応のWebアプリでリロード時に発生する「ライト→ダークの一瞬チカッ」（FOUC）を消す方法を解説します。HTMLパース時にインラインscriptでlocalStorageから読み取って theme クラスを当てる実装パターンと、CSS変数による配色切替設計を実装例付きで紹介します。

Vite + ReactのSPAをvite-plugin-pwaでPWA化する手順を、最小構成→manifest→Service Workerキャッシュ戦略→Lighthouse・インストール検証まで一気通貫で解説。実際に「こぴぺったり」で使っている設定そのままで、ホーム追加とオフライン動作を最短で整えられます。

メール定型文・コードスニペット・SQLなどをフォルダで整理してワンタップでコピーできる無料Webアプリ「こぴぺったり」を作りました。データはブラウザのローカルストレージに保存されサーバー送信ゼロなので、業務用テンプレートや社内コマンドも安心して保管できます。React + PWA対応でスマホでも快適。

求人ページ（JobPosting）やライブ配信ページ（BroadcastEvent）を Google にできるだけ早くインデックス登録する方法を、Google Indexing API + Node.js + OAuth2 認証で実装する手順として解説します。サービスアカウント方式が詰まったときの代替策としても有効です。