バニラJS Webアプリ の記事一覧
実績バッジシステムを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で全音符を一括事前スケジュールする精密タイミングパターン。