電卓で出した答えが画面を切り替えた瞬間に消える、消費税の税込価格を毎回打ち直す——そんな地味なストレスをなくしたくて、計算が自動で履歴に残り、よく使う式はテンプレートでワンタップ計算できる電卓「にゃるっく」を作りました。登録不要・ブラウザだけで動き、計算データは端末内にだけ保存されます。どんなアプリでどう使うのかを紹介します。

個人開発のReact SPAに忍者AdMaxを貼ったら、審査が「審査中」のまま一向に進まない…。忍者側の不具合かと疑いましたが、原因は全部自分の設定でした。Cloudflareのボット保護が審査クローラを弾き、SPAでは切替タグのswitch型IDでないと広告が描画されない。半日ハマって切り分けた3つの原因と直し方を、実録デバッグ記としてまとめます。

顔をモザイクで隠したい、スクショに写り込んだ住所やAPIキーを消したい——でも他人のサーバーに画像をアップロードするのは少し怖いですよね。そこで画像を一切ネットに出さず、ブラウザ内のCanvasだけで加工する無料ツール「もざいくにゃん」を作りました。React CDN・完全クライアント処理・Cloudflare Pagesという低コスト構成を、実装のポイントとあわせて紹介します。

Webアプリに Ctrl+Z / Ctrl+Y の Undo・Redo を入れる方法を、自作の画像マスクサイトの実装をもとに解説します。Reactのkeydownイベントで操作を拾い、ops / redoStack という2本の履歴スタックで状態を巻き戻す設計、入力欄でのショートカット無効化やMac/Windows両対応のコツまで、実コード抜粋付きでまとめました。

GA4管理画面の「ウェブサイトをテストする」でタグが検出されないと言われたトラブルを直した話。原因はReactのuseEffectで動的注入していたgtag.jsが生HTMLに出現していなかったこと。Viteプラグインでindex.htmlに静的埋め込みして解決する。

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

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

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

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