バニラJS Webアプリ の記事一覧
importmapでThree.jsをCDNから読み込むビルドレス3D Web構成
npmやViteを使わず、importmapでThree.jsとOrbitControlsをCDNから読み込む静的3D Webアプリ構成を整理します。
スキーマ駆動パラメータUIとモードレジストリで分岐を減らす
複数モードを持つWebアプリで、入力項目、検証、計算関数、出力ファイル名をモードレジストリに集約する設計パターンです。
重い計算UIでスライダー操作中プレビューとデバウンスを両立する
スライダー操作中は軽量プレビュー、操作完了時は本解像度で再計算することで、重い3D計算UIの操作感を保つパターンです。
Three.jsでパラメータ変更時にカメラ位置を保持するパターン
3Dモデル更新時に視点を毎回リセットせず、初回やモード切替だけ自動フィットするためのカメラ制御パターンです。
円単位の逆算を二分探索で実装する
手数料や消費税の端数処理がある料金計算で、予算内最大額や目標手取り以上の最小額を1円単位で探索する方法です。
技術ブログとWebアプリを相互リンクさせる導線設計
技術ブログで解説した式や考え方をWebアプリで試せるように、記事とアプリを相互リンクさせる導線設計を整理します。
計算表のセルをクリックして式と代入値を確認できるUI
行列や係数表のセルに、一般式、代入値、計算結果、説明を持たせ、クリックで詳細を確認できるUIパターンです。
数式導出をSTEPで見せる学習UIの作り方
数式や計算過程を一度に見せず、概要、条件式、行列、係数、最終式へ順番に追える学習UIとして整理する設計パターンです。
係数行列の条件式を色分けして見せるUI設計
条件式、係数行列、右辺ベクトルの対応関係を色でそろえ、数値計算の構造を追いやすくするUI設計パターンです。
モバイル向け数値入力パッド
スマートフォンで金額を入力しやすくするために、数字、増減、全消去、1字削除ボタンを画面内に置く入力UIパターンです。
計算ロジックを純粋関数に分離する設計
見積、税、手数料などの計算処理をUIイベントから切り離し、DOMに依存しない純粋関数として扱う設計パターンです。
スマホでは表をカード表示に変換するCSS
PCでは通常テーブル、スマホでは行単位のカード表示に切り替えて、計算結果表の横切れを防ぐCSSパターンです。
タブごとに入力状態を保持するUI
見積額、予算、手取りなど複数モードを持つ計算ツールで、タブごとに金額や設定を保存・復元するUIパターンです。
Uint8Arrayを安全にbase64エンコードしてlocalStorageに保存する方法
100KB超のUint8Arrayをbtoapに渡すとスタックオーバーフローが起きます。32KBチャンク分割でエンコードする安全なパターンを解説します。
実績バッジシステムを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で全音符を一括事前スケジュールする精密タイミングパターン。