記事一覧
実績バッジシステムをlocalStorage + Supabase併用で実装する方法
ゲスト時はlocalStorage、ログイン後はSupabaseに同期する実績バッジシステム。トースト通知付き。
重い処理でUIが固まらない！setTimeout(0)でプログレスバー＋キャンセル対応
重い計算処理中もUIがフリーズしない非同期ループパターン。setTimeout(0)でプログレス更新とキャンセル対応を両立。
Canvasで複数要素を1枚に合成してPNGダウンロードする方法
グリッド＋ヒント数字＋罫線をCanvasに合成して1枚のPNGとして保存。サーバー不要でクライアント側完結。
複数ページ共通UIをIIFEモジュールに集約する方法（フレームワーク不要）
フレームワークなしで共通UIコードを切り出すIIFEパターン。実測170行以上の重複削減事例付き。
flex-wrap + orderで2段ナビゲーションを作る方法（モバイルは下部タブバー）
overflow:hiddenやscrollに頼らず、flex-wrap + orderで自動2段ナビ。モバイルは下部タブバーに完全切替。
ゲームHUD（スコア/タイマー/コンボ）と結果モーダルのCSSパターン
スコア・タイマー・コンボのHUDレイアウト + 背景ブラー付き結果モーダルのゲームUIパターン。
Git Subtree Splitでサブフォルダだけを GitHub/Vercel にデプロイする方法
開発資料を含む親リポジトリから、Web/サブフォルダだけをGitHub main にforce pushする deploy.sh パターン。
モバイル向けタップ入力グリッドでソフトキーボードを回避する方法
モバイルで <input>のキーボード開閉によるUX低下を回避。A-Z/0-9ボタングリッドを画面内に配置するパターン。
印刷PDFの用紙向きをコンテンツの縦横比から自動判定する方法
CSS @page + 縦横比計算で、A4縦/横を自動切替する印刷PDF生成パターン。ユーザー操作不要。
pointer-events:noneの全画面オーバーレイで音と連動する視覚フィードバック
音声再生と完全同期する全画面フラッシュを実装。pointer-events:none + opacity遷移でUI操作を邪魔しない。
デザインツール不要！SVGファビコン＋PythonでPNG生成する方法
コードだけでファビコンを生成。SVG + Python(struct/zlib)でPillowなしにPNG生成するパターン。
ビルドツール不要でバニラJSに多言語対応（i18n）を実装する方法
静的HTML + バニラJSでビルド不要の軽量i18nを実装。data-i18n属性とlocalStorageで12言語対応も可能。
Web Audio APIで精密タイミング制御（事前スケジューリングでドリフト根絶）
setTimeoutのドリフトを根絶。AudioContext.currentTimeで全音符を一括事前スケジュールする精密タイミングパターン。
ライブラリ不要の月別カレンダーグリッドをCSS Gridで実装する
ライブラリ不要でCSS Grid（grid-cols-7）を使った月別カレンダーの実装パターン。
Reactでドロップダウンを外クリックで閉じる方法（useRef + mousedown）
useRefとmousedownイベントでカスタムドロップダウンを外側クリックで閉じるパターン。
TailwindでDB由来の色を動的に適用する方法（HEX→RGBA変換）
Tailwind CSSでDBに保存したHEXカラーコードを動的に適用する方法。RGBA変換関数付き。
初回オンボーディングをlocalStorageで制御する方法（React）
初回利用時だけガイドモーダルを表示し、次回以降は抑制するパターン。localStorage制御。
Next.js + Supabase Authで認証ガードを実装する方法（Middleware）
Next.js App RouterとSupabase Authでミドルウェア認証ガードを実装。Google OAuth対応。
Reactでライブラリ不要のトースト通知を実装する方法
ライブラリ不要でsetTimeoutによる自動消去トースト通知を実装。成功/エラーの色分けも。
GAS CacheServiceでスプレッドシートの読み込みを高速化する方法
Google Apps ScriptのCacheServiceでスプレッドシートのデータをキャッシュし、2回目以降の読み込みを高速化する方法を解説。
GASでカード型レスポンシブレイアウトを実装する方法
GAS WebアプリでPC中央寄せ・スマホ全幅のカード型レイアウトを実装。コピペで使えるCSS付き。
GASでCSSだけのローディングスピナーを実装する方法
Google Apps Scriptで画像不要・CSSだけで回転スピナーを実装。コピペですぐ使えるコード付き。
GASでスプレッドシートの日付を安全にフォーマットする方法
GASでDate型・文字列型が混在する日付データを安全に変換する関数。コピペですぐ使えるコード付き。
GASでHTMLエスケープ関数を実装してXSS対策する方法
Google Apps ScriptのWebアプリでXSS脆弱性を防ぐHTMLエスケープ関数の実装方法。コピペで使えるコード付き。
スマホ対応フォント設定 - 全OS対応のfont-family指定【GAS・Web共通】
iOS/Android/Windows/Macすべてで美しい日本語を表示するfont-family設定。Webフォント不要で高速。
GASで全角半角・大文字小文字を無視して検索する方法
Google Apps Scriptで全角半角・大文字小文字の違いを吸収する正規化検索を実装。コピペですぐ使えるコード付き。
google.script.runのエラーハンドリング完全パターン【GAS Webアプリ】
GASのgoogle.script.runで失敗時にエラーが握りつぶされる問題を防ぐ。ボタン制御・ローディング付きの実装パターン。
GASでSPA風の画面遷移を実装して高速な画面切替を実現する方法
Google Apps ScriptのWebアプリでinnerHTMLの書き換えによるSPA風画面遷移を実装。ページ再読み込みなしで高速な画面切替を実現。
Next.js + Supabaseで自動保存を実装するパターン（localStorage併用）
保存ボタン不要の自動保存パターン。SupabaseとlocalStorageの使い分けと楽観的更新の実装方法を解説。
ライブラリ不要！CSSだけでガントチャート（タイムライン）を描画する方法
外部ライブラリなしでCSSのパーセント指定だけでタイムライン表示を実装。作業履歴の時系列表示に最適です。
Reactでインライン削除確認UIを実装する方法（モーダル不要）
モーダルを使わずにインラインで削除確認を表示するパターン。スマホでも操作しやすいUXを実現。
Next.jsでライブラリ不要のヒートマップを実装する方法（曜日×時間帯）
HTMLテーブルとCSSだけで曜日×時間帯のヒートマップを描画。ライブラリ不要でコピペですぐ使えるコード付き。
Promise.allでSupabaseクエリを並列化してページ表示を高速化する方法
複数のSupabaseクエリをPromise.allで並列実行し、ページの読み込み時間を劇的に短縮するテクニックを紹介します。
Rechartsの円グラフ(PieChart)でスライス内にパーセントを表示する方法
Rechartsの円グラフでスライス内にパーセント表示するカスタムラベルの実装方法。コピペで使えるコード付き。
Next.jsでJavaScriptによるレスポンシブ判定（isMobile）を実装する方法
TailwindのCSSだけでは対応できない描画ロジックの分岐に。matchMediaを使ったisMobile判定フックの実装。
SheetJSでブラウザからExcelファイルをエクスポートする方法
SheetJS(xlsx)を使い、ブラウザだけでExcelファイルを生成・ダウンロード。複数シートや時間型の扱いも解説。
Supabaseで1000件以上のデータを全件取得するページネーション実装
Supabaseのselect()は最大1000行制限。range()を使ったループで全件取得するパターンを紹介します。
OAuth不要！X（Twitter）Intent URLでポストボタンを実装する方法
OAuth不要でXへのポストボタンを実装。Intent URLを使えばAPI設定なしでシェア機能が作れます。