🟨 JavaScript // PROTOCOL.LAIN

[ CATEGORY / 🟨 JavaScript ]

MATCHED_ITEMS: 153

[2026/9/1]

[JavaScript] reSID + fake6502をWASM化してAudioWorkletで.sidファイルを再生する ― ブラウザ完結SIDプレイヤー構築記

reSID（MOS 6581/8580エミュレーター）とfake6502（6502 CPUエミュレーター）をEmscriptenでSTANDALONE_WASMビルドし、AudioWorkletスレッド内で直接WASMをinstantiateしてリアルタイム音声合成を実現。PSIDヘッダー解析、C64メモリマップ配線、50Hz playルーチン呼び出しまで。

[2026/8/29]

[JavaScript] libjxlをWASM+SIMD化してWeb Workerで動かす ― ブラウザ完結JPEG XLコンバーター構築記

C++ライブラリ（libjxl）のWASM化、EmscriptenによるSIMDフラグ指定、Web Workerでの非同期エンコード処理、そしてAstro UIからのパラメータ動的制御まで。15.16秒から1.01秒への15倍高速化とエラーハンドリングのハマりどころを解説。

[2026/8/28]

[JavaScript] WebAssembly（WASM）とEmscriptenの全体像 ― C/C++をブラウザで動かすまでの道のり

WebAssemblyの基本概念、Emscriptenのビルドパイプライン、C/C++ライブラリのWASM化手順を、laz-perfカスタムビルドの実例を交えて解説。バインディング、メモリ管理、最適化まで。

[2026/8/27]

[JavaScript] 極小250KBのLAZ圧縮Wasmを自作してブラウザでLAS→LAZ変換を動かす

laz-perfをEmscriptenでカスタムビルドし、250KBのWebAssemblyでブラウザ上でのLAS→LAZ圧縮を実現する方法を解説。圧縮バインディングの追加やprotectedコンストラクタの回避など、ビルド過程のトラブルシューティングもまとめました。

[2026/8/24]

[JavaScript] 極小2.4MBのOpenCV Wasmを自作してブラウザで画像処理（Inpainting）を動かす

OpenCVをEmscriptenで軽量ビルドし、WebAssemblyとしてブラウザで動かす方法を解説。cv.inpaintを用いた修復処理の実装や、cv.grabCut除外によるエラーなどのトラブル情報もまとめました。

[2026/8/6]

[JavaScript] Lain Clock MMDモデルの GrantSolver クラッシュ修正 — PMXボーンインデックスと Three.js ランタイムの不整合

特定のPMXモデルで MMDAnimationHelper の GrantSolver が undefined.quaternion でクラッシュする問題の原因調査と修正。PMXバイナリのチェックツール開発、ランタイムボーン配列のズレの発見、sanitizeGrants によるロード時パッチまで。

[2026/7/29]

[JavaScript] VRM to MMD — 足IK・Aスタンス・指ボーン生成の実装詳細

VRM→PMX変換でVMDモーションを動かすための実装解説。足IKボーンの生成、Aスタンス化と手動スキニング、指ボーンのマッピングと指先生成、three-vrmのボーン姿勢リセット対策までをコード付きでまとめた。

[2026/7/28]

[JavaScript] VRM to MMD — VMDアニメーションが動くまでのデバッグ記録

VRM→PMX変換ツールのVMDモーション互換を実現するまでの記録。座標系のX反転、足IKボーンの実装、ボーン名マッピングの修正、ローカル軸フラグの追加を、正常品PMXとのバイナリ比較で1つずつ潰した

[2026/7/27]

[JavaScript] Lain Clock カレンダー機能の WebGL 3D メッシュ化と描画順序（renderOrder/depthWrite）の最適化

WebGL空間に統合された3Dカレンダーモジュールの実装解説。Off-screen Canvasを用いた動的テクスチャ生成、transparentマテリアルにおけるdepthWrite: falseとrenderOrderによる重なり順の制御、設定保存・復元との透過的連携をまとめています。

[2026/7/26]

[JavaScript] Lain Clock プリセット管理機能の実装 — WebGL設定の保存・復元・JSON Export/Import

WebGL時計アプリケーション「Lain Clock」に、設定値のローカル保存、復元（リストア）、JSONファイルの書き出し/読み込み機能を実装した設計とコード構造を解説します。

[2026/7/25]

[JavaScript] VRM to MMD(PMX) 変換ツール — glBパースからPMXバイナリ書き出しまで（β版）

VRMファイルをMMD用PMX形式に変換するブラウザ完結ツールを開発中。glTF Binaryのパース、PMX 2.0バイナリの生成、座標系変換、Humanoidボーンマッピングの実装記録

[2026/7/24]

[JavaScript] Lain Clock スマホ対応 — UI折りたたみ・カメラ自動調整・設定リアルタイムプレビュー

Three.js製MMD時計アプリ「Lain Clock」のスマホ対応。CSSメディアクエリによるUI最適化、HUD/ツールバーの折りたたみ機構、縦画面でのカメラZ自動調整、設定パネルのリアルタイムプレビューを実装

[2026/7/24]

[JavaScript] 高精度GIF圧縮＆リサイザーの実装 Gifsicle WASMで80%軽量化を実現

純粋なJavaScriptによるGIFエンコードでのファイルサイズ増大やノイズ発生問題を、WebAssembly化されたC言語製エンジン「Gifsicle」と動的プログレスUIの実装により解決したプロセスを詳しく解説します。

[2026/7/24]

[JavaScript] Lain Clock アップデート — ZIP文字化け修正・床パターンシステム・モデル復元機能

Three.js製MMD時計アプリ「Lain Clock」の大型アップデート。ZIPのShift_JISファイル名対応、プロシージャル床パターンシステム、モデル復元機能、設定のリアルタイム更新を実装

[2026/7/20]

[JavaScript] 3D ROOM制作 11日目 GLSLシェーダーでスカイボックスを作り直す

Three.jsのスカイボックスをGLSLフラグメントシェーダーで再実装。3D Value Noiseによるシームレスな雲、星の瞬き、流れ星、WIREDスタイルのグリッドオーバーレイをリアルタイムアニメーションで実現。

[2026/7/18]

[JavaScript] 3D ROOM制作 10日目ブラウザだけでGLBファイルを圧縮する（依存ゼロ・150行）

GLBファイル内のテクスチャをWebPに変換してファイルサイズを大幅削減する圧縮モジュールを、外部ライブラリなしの純粋なJavaScriptで実装した。

[2026/7/18]

[JavaScript] 3D ROOM制作 9日目 Surge・Firebase・GitLab Pages配置 + ポータル3D判定修正

WIRED ROOMを Surge.sh・Firebase Hosting・GitLab Pages に配置して9サーバー体制に。Fly.io断念の経緯、ポータル近接判定のY座標バグ修正を記録。

[2026/7/16]

[JavaScript] 3D ROOM制作 8日目 Render・Deno Deploy配置 + スロープ実装

WIRED ROOMを Render と Deno Deploy に配置して6サーバー体制に。スロープ上り下り実装、HDRI環境マップ・トーンマッピング導入、RenderのCORS罠を記録。

[2026/7/14]

[JavaScript] 3D ROOM制作 7日目 Friend/Works Portal・ポータルエディタ実装

WIRED ROOMに3種類のポータルタイプを実装。Friend Portal（青）とWorks Portal（黄）の追加、portal-editor.jsによるリスト編集UI、corridor.jsの広場でのタイプ別表示分け、ZIP exportでのJSON生成を完了。

[2026/7/13]

[JavaScript] 3D ROOM制作 6日目マルチサーバーデプロイ・VRポータル4サーバー間移動

WIRED ROOMをNetlify・GitHub Pages・Vercel・Cloudflare Pagesの4サーバーに配置し、VRでサーバーをまたいだポータル移動を実現。CORS設定、Vercelのpublic問題、フェードアウト遷移、VRM警告修正まで。

[2026/7/12]

[JavaScript] 3D ROOM制作 5日目 VRヒント・バナー画像・Import/Export

WIRED ROOM 5日目。VR近接ヒント表示、広場ポータルのバナー画像対応、ZIPインポートによる完全復元、全データクリア機能を実装しました。

[2026/7/12]

[JavaScript] 3D ROOM制作 4日目プログレスバー・ポータル改修・広場実装

WIRED ROOM開発4日目。プログレスバー実装、config.js/portal-effect.jsへの共通化、app.jsのinit分解（loadRoom/disposeRoom/loadExternalRoom）、プロシージャル十字路を廃止してKenney素材の広場に置き換え、VRポータル操作、Quest 3問題の調査記録

[2026/7/11]

[JavaScript] 3D ROOM制作 3日目ポータル通路・Export・VRMフィギュア配置 (Three.js)

vanilla JS + Three.js + WebXRで構築する3Dウォークスルー空間WIRED ROOMの開発記録。iframe競合バグ修正、VRMフィギュア配置、公開用ZIPエクスポート、プロシージャル通路生成、ポータルによる部屋間移動機能を実装。

[2026/7/10]

[JavaScript] 3D ROOM制作 2日目（午後） VR対応・エディタ・ROOM追加機能 (Three.js)

vanilla Three.jsのROOMアプリにWebXR VRモード、右クリックメニュー、カスタムROOMアップロード（IndexedDB保存・stats自動取得・info入力フォーム）、リアルタイム調整スライダー、サムネ撮影機能を追加した記録

[2026/7/9]

[JavaScript] 3D ROOM制作 2日目（前）初期設定ウィザードとスカイボックス実装 (Three.js)

Three.js製ROOMアプリのPhase 2。セットアップウィザードUI、models.jsonからのサムネイルグリッド表示、VRMアップロードとIndexedDB保存、プロシージャルスカイボックス4プリセット（Night/Sunset/Day/WIRED）をvanilla JSで実装した記録

[2026/7/9]

[JavaScript] フォルダ置くだけで動く3D ROOM機能を作る（Three.js）

Three.js + vanilla JSで、ZIPを解凍してサーバーに置くだけで動く3D ROOM機能を構築。GLB部屋モデル、VRMアバター、BVH衝突判定、3人称カメラ、ポータルリンクまで、バンドラー不要のピュアESM構成で実装した記録

[2026/2/1]

[JavaScript] Three.js RenderTarget ミニマップを“ゲームUI”にする（円形マスク＋フレーム＋時計表示）

Three.js の RenderTarget ミニマップを、円形マスク（alphaMap）で切り抜き、フレームPNGを重ねて HUD 化。CanvasTexture で日付・時刻・称号を描画し、サブカメラをプレイヤー追従＆スムーズ回転させる。UIの重ね順（renderOrder）、depthTest/depthWrite、toneMapped など色と透過の罠もまとめる。

[2026/1/31]

[JavaScript] Three.jsでミニマップ実装：サブカメラ＋RenderTarget＋カーナビ式スムーズ回転

Three.jsでミニマップを作る実用実装。サブカメラ（俯瞰）→WebGLRenderTarget→Plane表示の基本から、FOV/アスペクト比を使った左上固定、キャラ回転に追従するカーナビ式回転、atan2で角度差を-π〜+πに正規化してlerpでスムーズ化する手法までまとめる。

[2026/1/28]

[JavaScript] sin/cos アニメーションまとめ：Three.jsで“動き”を作る最短パターン集

Three.jsで“動き”を作るとき最初に覚えるべき sin/cos パターンを、振幅・周波数・オフセットの考え方から、位置/回転/色への適用例まで短くまとめた。

[2026/1/22]

[JavaScript] Quaternion 入門 #06 : WebXR / ゲームで使う実践パターン

JavaScript / Three.js における Quaternion の実践編。WebXR の視線追従、カメラ回転、キャラクターの向き制御、入力処理と補間、multiply と premultiply の使い分けなど、実際のゲーム実装で必要となるパターンを具体例と共に整理する。

$[JavaScript] Quaternion 入門 #05 : Slerp は何をしているのか$

[2026/1/21]

[JavaScript] Quaternion 入門 #05 : Slerp は何をしているのか

Three.js/JavaScript の Quaternion 補間で必ず出てくる Slerp を数式なしで解説。lerp がダメな理由、一定角速度に見える仕組み、q と -q が同じ回転になることから生まれる最短経路の話を、実装者の視点でわかりやすくまとめる。

[2026/1/19]

[JavaScript] Quaternion 入門 #04 : multiply の順序は何を意味しているのか

JavaScript / Three.js における Quaternion.multiply の順序が持つ意味を、数学なしで直感的に解説。ローカル軸での回転とワールド軸での回転の違い、なぜ順序を逆にすると結果が変わるのか、“回転＝作用”として理解するための基礎をまとめる。

[2026/1/18]

[JavaScript] Quaternion 入門 #03 : やってはいけない実装集（JavaScript / Three.js）

Three.js / JavaScript でQuaternionを扱う際に頻発する“やってはいけない実装”をまとめた記事。足して壊れる例、lerpによる破綻、multiplyの順序ミス、正規化の欠落、Eulerとの混在など、実務者が陥りやすいミスを具体的に解説し、安全な回転実装のための指針を示す。

[2026/1/17]

[JavaScript] Quaternion 入門 #02 : なぜオイラー角は壊れるのか

JavaScript / Three.js において、オイラー角がなぜ壊れやすいのかを解説。回転順序の意味、ジンバルロックが起きる必然性、角度加算設計の限界を整理し、Quaternionに進む前の理解を固める。

[2026/1/16]

[JavaScript] Quaternion 入門 #01：理解しなくていい回転の扱い方

JavaScript/Three.jsでQuaternionを使う入門記事。オイラー角→Quaternion変換、回転の合成（multiply）、補間（slerp）だけに集中し、ジンバルロックや補間の破綻を避ける実践手順をまとめる。

[2026/1/14]

[JavaScript] Three.jsでS字レールをつなぐ：クロソイド曲線で2本で分岐カーブを作る

Three.jsでレールを配置する際、直線同士をS字（逆曲率）で自然につなぐ方法を解説。中点M、forward/rightベクトル、control点の設計、tangentでの向き合わせ、curveStrength調整まで、実装の勘所を整理する。

[2026/1/14]

[JavaScript] Three.jsで「列車を運行する」実装に到達するまでの設計と思考ログ

Three.jsで列車を動かすだけの実装から、複数列車・路線・停車制御を持つ運行システムへ進化させるまでの設計判断、バグ、修正、思考過程をまとめた実践記事。

[2026/1/13]

[JavaScript] Three.jsで線路を引いて列車を走らせた（Curve×cloneでレール生成）

Three.jsで線路モデルをCurve（QuadraticBezierCurve3）から生成し、配置したレールの上を列車モデルが走るところまで実装した記録。分岐・繋ぎ目・高さ（y）による破綻と、その回避策（height=0、走行用Curve保存、1両編成）をまとめる。

[2026/1/12]

[JavaScript] WebAudio × three.js で作るサウンドリアクティブ・ジオメトリアニメーション

nw_wrld に影響を受け、WebAudio の解析結果を three.js に直接接続することで、サウンドリアクティブなジオメトリアニメーションを実装した。BoxGeometry を中心に、状態管理・色制御・ジオメトリ切り替えの設計をまとめる。

[2026/1/12]

[JavaScript] Three.jsでRPGバトルを仕上げる｜敵ターン追加・HP決着・テンポ調整・不具合潰し

Three.js製RPGバトルを完成形へ持っていく実装メモ。Battleクラスに敵ターン（enemyフェーズ）を追加し、HPによる勝敗判定、敵の接近→攻撃→待機→帰還アニメ、delta秒ベースのwaitDuration管理、UI表示やSEの多重発火を防ぐフラグ設計を解説。

[2026/1/11]

[JavaScript] Three.js / WebXRで一生使い回せるMessageBoxを実装

Three.jsとWebXRで動作するMessageBoxを、ゲームループ主導・入力制御・自動クローズ対応で実装した。CanvasTextureの限界や、あえて深追いしなかった設計判断も含めた実装ログ。

[2026/1/11]

[JavaScript]スマホでサブ的にコーディングする現実解 ─ 開発者向け実践ガイド

Three.js / WebXR 開発者が、スマートフォンを“補助脳”として活用するための実践ガイド。vscode.dev + Codespaces を軸に、PlayCode や Termux + Code Server まで含めた現実的な選択肢と使い分けをまとめる。

[2026/1/10]

[JavaScript] Zone切り替えBGMを自然につなぐサウンド設計（フェード対応）

ZoneベースのBGM切り替えで起きがちな違和感を、JSONによるデータ管理とsound.jsへの責務集約、フェードイン・フェードアウト設計で解決する。Three.jsやWebXRに依存しないサウンド設計の考え方。

[2026/1/10]

[JavaScript] Three.jsでsin波に沿って拡散するスプライト演出を試作した記録

three.jsでSpriteとCanvasTextureを使い、sin波に沿って生成される星形スプライト演出を実装した記録。単調さの解消、多方向化、やりすぎて破綻した設計を戻した判断まで含めて整理する。

[2026/1/10]

[JavaScript] Three.jsでMarchingCubes（Metaballs）を動かす

Three.jsのMarchingCubes（Metaballs）を実際の箱庭シーンに配置して動かした記録。update()必須の罠、透明マテリアルとdepthWrite、world座標からMetaballs空間への変換など、実装で詰まった点を中心にまとめる。

[2026/1/9]

[JavaScript] Three.jsで地形にゾーンを持たせてエンカウントを制御する（tile→ASCII map→ZONE_DEFS）

Three.jsのタイル地形をJSON/ASCII mapで管理し、legendにtype/zone/textureを集約。地面コライダーのzoneをプレイヤーへ伝播し、ZONE_DEFSでエンカウントを制御する設計と実装手順をまとめる。

[2026/1/9]

[JavaScript] Three.jsでRPGバトルをゼロから組む｜フェーズ管理・UI・アニメーション・SEまで

three.jsを使ってRPGのバトルシステムをゼロから実装。エンカウント管理、フェーズ駆動のBattleクラス設計、敵出現演出、コマンドUI、プレイヤー行動アニメーション、効果音・BGM制御までを段階的に解説する。

[2026/1/8]

[JavaScript] Three.jsでPMXにVPD（ポーズ）を適用する方法

Three.jsのMMDLoaderを使ってPMXモデルにVPD（ポーズ）を適用する方法を解説する。自前パースでハマりやすいポイントや、CCDIKSolverとMMDAnimationHelper.pose()を使った安定した実装方法、VMDとの使い分けについてまとめる。

[2026/1/7]

[JavaScript] Three.jsでRPG風コマンドUIをゼロから組み上げる（CanvasTexture編）

Three.jsでDOMを使わず、PlaneとCanvasTextureを使ってRPG風のコマンドUIを実装する過程を整理する。表示・非表示、選択移動、入力処理の分離までを扱い、サブメニュー実装手前で区切る。

[2026/1/6]

[JavaScript] PlaneGeometryで地形を生成し、登れる世界を作る（山・クレーター・JSONマップ設計）

Three.jsのPlaneGeometryを地形として扱い、高さ関数による平地・山・クレーター生成、ワールド座標による継ぎ目解消、JSONとグリッド設計によるマップ管理、重力と接地処理による歩行可能な世界構築までをまとめる。

[2026/1/5]

[JavaScript] WebXRでドラゴンレーダーを作る：コンパスUIを拡張してNPC位置を可視化する

Three.jsとWebXRで実装したコンパスUIをベースに、NPCとプレイヤーの相対位置を計算して表示するドラゴンレーダー風UIを実装。3Dゲームのミニマップと同等の情報を、VR向けに最適化して表現する設計と実装ポイントを解説する。

[2026/1/5]

[JavaScript] WebXRでVRコントローラを表示する：XRControllerModelFactoryと右手コンパスUIの実装

Three.jsとWebXRでXRControllerModelFactoryを使い、両手のVRコントローラを正しく表示する方法と、playerRigに追従する右手コンパスUIの実装手順を解説。VR向けUI設計として、ミニマップではなくコンパスを選ぶ理由も具体的に説明する。

[2026/1/5]

[JavaScript] Three.jsでPC向けミニマップを実装する方法（viewport / scissor を使った複数カメラ描画）

Three.jsでPC向けミニマップを実装する方法を解説。viewportとscissorを使った複数カメラ描画の仕組み、実装例、よくある疑問点、そしてWebXR（VR）では同じ方法が難しい理由まで具体的にまとめる。

[2026/1/4]

[JavaScript] Three.jsで地球の上をキャラクターが走り続けるアニメーションを作る（球面座標＋法線＋lookAt）

three.jsで地球の表面を走るキャラクターを実装する。球面座標（theta/phi）で座標を求め、地球法線でキャラの上方向を合わせ、lookAtで進行方向を向かせる。モデルの前方向補正や、2体をMath.PIずらして周回させる実装もまとめる。

[2026/1/3]

[JavaScript] VRで段差とスロープが壊れる理由と、正しく動かす方法

Three.js + WebXRで、段差やスロープを自然に上がれる移動処理を実装する。VRではロジックを変えず、カメラを制御しない設計が重要になる。

[2026/1/3]

[JavaScript] Three.jsで段差を登って降りられるキャラクター移動を実装する

Box3による単純な衝突判定を拡張し、colliderとtype設計を導入することで、three.js上で段差の上り下りが可能なキャラクター移動を実装する。

[2026/1/2]

[JavaScript] Three.js + WebXR で CanvasTexture を使ったスクロールUIを自作

Three.js と WebXR を使い、CanvasTexture を3Dメッシュに貼り付けてスクロール可能なテキストUIを実装する方法を解説。Raycasterを用いたUIイベント設計とドラッグスクロールの実装例。

[2026/1/1]

[JavaScript] 複数ゲームを切り替えるためのシンプルなシーン設計

複数ゲームを切り替えるためのシンプルなシーン設計

[2025/12/31]

[JavaScript] Three.jsでボールバウンドアニメーションを実装する｜Canvas2D実装の移植ログ

Three.jsでGameBox内に複数ボールのバウンドアニメーションを実装する過程を解説。Canvas2D由来のロジックをVector3ベースに移植し、deltaTime管理、壁反射、ボール同士の衝突判定、残像表現を行う。

[2025/12/31]

[JavaScript] three.jsで作る「箱の中のゲーム」設計：シューティング編 (VR / PC両対応)

three.jsとJavaScriptで構築したGameBox構造を使い、2作目となるシンプルなシューティングゲームを実装。VRとPCの両方に対応したUI制御、ゲームの開始・終了・リスタート、差し替え可能なGameModule設計について解説する。

[2025/12/30]

[JavaScript] Three.jsで花火を実装して分かった、プロっぽく見せるための設計

Three.jsで花火を実装する過程で遭遇した粒子が消えない問題、filterの罠、PointsとBufferGeometryの使い方、減速して止まり落下する演出など、プロっぽく見せるための考え方と実装ポイントを整理した記録。

[2025/12/30]

[JavaScript] Three.jsでパーティクルが消えない本当の原因と正しい後始末

Three.jsでparticleをfilterで削除したのに消えない原因は、MeshをSceneからremoveする前に参照を失っていることだった。配列管理とScene管理の違い、正しいdispose順序、ゴーストが生まれる仕組みを実例付きで解説する。

[2025/12/29]

[JavaScript] GameBoxアーキテクチャで作る Three.js ブロック崩し（実装完了編）

前回紹介したGameBoxアーキテクチャを土台に、Three.jsでブロック崩しを実装完了まで構築する。差し替え可能なGameModule設計、Box3による当たり判定、CanvasTextureを使ったGAME OVER表示、UIボタンとキー入力の統合など、WebXRも見据えた構成を解説する。

[2025/12/28]

[JavaScript] フレームは飛ぶ ― deltaTime を信じた結果、世界が壊れた話

requestAnimationFrame / setAnimationLoop ではフレーム間隔は保証されない。deltaTime がワープすることで起きる物理破綻と、started フラグ・delta clamp による現実的な解決策を整理する。

[2025/12/28]

[JavaScript] Three.js / WebXRで差し替え可能なゲーム箱を作る（3D空間でブロック崩しゲーム）

Three.js と WebXR を使って、VR空間に配置できる差し替え可能なゲーム用ボックスを実装。ブロック崩しを例に、THREE.Group を基軸にした設計、ゲームモジュールの分離、2Dロジックを3D空間で動かす考え方を整理します。

[2025/12/28]

[JavaScript] Three.js + WebXR で動画プレイヤーUIをクラス設計する

Three.js と WebXR を使い、VideoTexture をクラス設計で管理し、プレイリスト再生・曲送り・サムネ表示・UI操作までを一体化した動画プレイヤーを実装する方法を解説します

[2025/12/27]

[JavaScript] Three.jsでPMX / VMDを読み込んでアニメーションを再生する

Three.jsでPMX / VMDを扱う方法を整理。MMDLoaderによるモデル読み込み、VMDモーションの適用、MMDAnimationHelperでの更新処理、VMDなしの場合の扱い、physics設定の注意点を解説する。

[2025/12/26]

[JavaScript] Three.js + VR でキャラクターの上にセリフを表示（Canvas＋Sprite）

Three.jsでCanvasTextureとSpriteを使い、VR/PC両対応でキャラクターの頭上にセリフを表示する方法を解説します。改行対応や簡単な装飾、データ駆動の設計についても触れます。

[2025/12/25]

[JavaScript] VRにおける衝突判定の考え方（Three.js / WebXR）

VRではなぜ衝突判定が直感通りにいかないのか。Three.jsとWebXRを使ったVR開発において、playerRig基準の衝突判定設計、ルームスケール移動との関係、Box3とMatrix4の正しい使い分けを実装ベースで解説する。

[2025/12/24]

[JavaScript] Three.js WebXR：VRコントローラのレーザーポインタでUIボタンを押す（Raycaster入門）

Three.jsのWebXRでVRコントローラのレーザーポインタを表示し、RaycasterでUIボタン（Plane）へ当たり判定を行い、トリガー入力でonClickを発火させる実装を解説。レイ方向の毎フレーム更新（matrixWorld→origin/direction）とinputSources/gamepad入力の取得方法、よくある落とし穴もまとめる。

[2025/12/24]

[JavaScript] Three.js Vector3完全理解 —— 3D数学の基礎から実践までを一気に掴む

Three.jsにおけるVector3は、座標・方向・速度・力・法線など、3D空間を扱うすべての計算の中心にある。本記事では、Vector3の基礎から応用、便利な使い方、ハマりがちな罠まで体系的にまとめます。

[2025/12/24]

[JavaScript] Three.js WebXR でキャラクターを移動させる最小実装メモ

WebXR環境でキャラクターを移動・回転させるための最小コード構成（playerRig・移動・回転・AnimationLoop）をシンプルにまとめた記録。

[2025/12/24]

[JavaScript] Three.jsで動画再生とカスタム表示する方法まとめ

Three.jsでVideoTextureを使い、サイズ調整やUV操作、色補正、3D形状への貼り付け、ShaderMaterialによるエフェクト加工など、動画表示をカスタムするためのテクニックをまとめた記事です。

[2025/12/23]

CSS3DRendererの正体と罠 CSS3DRendererとWebGLを組み合わせると何が起きるのか

Three.jsのCSS3DRendererは軽く見えるが、DOMとWebGLを同時に扱うと極端に重くなり、iframeを3D空間に配置するとブラウザがGPU fallbackを引き起こす。実際に遭遇した症状と原因、CSS3DRendererの設計思想、WebGLとの正しい組み合わせ方を解説。

[2025/12/23]

[JavaScript] Unityで作ったC＃コードをWebブラウザで実行する仕組みとは？

Unityで作成したC#コードをWebで動作させるための仕組みを、JavaScriptやWebAssemblyを使ってどのように実現するかを解説します。

[2025/12/23]

[JavaScript] Three.jsでWebXRを実装 (Meta Quest 2)

Three.jsを使ってVR環境を作成し、Meta Quest 2でのVRゲームを実装する方法をステップバイステップで解説。VRモードのカメラ制御やコントローラー入力処理の実装を学びましょう。

[2025/12/23]

[JavaScript] 魔法陣の回転追従とアニメーション実装

Three.jsを使用して、キャラクターの周りを回転する魔法陣のアニメーションを実装しました。魔法陣は回転しながら、点滅エフェクトも加わり、視覚的に魅力的な演出が可能です。

[2025/12/23]

[JavaScript] Three.jsとBlenderの色空間不一致を解消する方法

BlenderからエクスポートしたモデルがThree.jsで正しく明るさが反映されない場合の原因とその修正方法を紹介します。色空間の不一致、`Emission`設定、`Metallic`と`Roughness`の調整方法について説明します。

[2025/12/22]

[JavaScript] Three.js で KHR_materials_pbrSpecularGlossiness の解消方法

three.js で表示される「KHR_materials_pbrSpecularGlossiness」の警告は、`Specular Glossiness` モードを `Metallic/Roughness` モードに変換することで解決できます。本記事ではBlenderを使った変換方法と、警告回避のポイントを紹介します。

[2025/12/22]

[JavaScript] Three.jsでメテオストライクの実装とエフェクト追加

メテオストライクのテクスチャ作成、落下エフェクト、発光効果などを組み合わせて、リアルなメテオストライクを実現する方法について解説します。

[2025/12/22]

[JavaScript] Three.jsでキャラクターの自動散歩と衝突判定の実装

本記事では、Three.jsを使用して、キャラクターが指定された経路を自動で歩き、衝突判定を行う仕組みを実装する方法を紹介します。

[2025/12/21]

[JavaScript] Three.jsで雪、雨、クリスマスツリーと、点滅するライトを実装

このチュートリアルでは、Three.jsを使って雪、雨、クリスマスツリー、点滅するライトを作り、クリスマスの雰囲気を出す方法を解説します。

[2025/12/20]

[JavaScript] Three.jsで地球と月のミニチュアを実装

地球と月の模型をThree.jsで作成し、リアルな動きとエフェクトを加える方法をステップバイステップで学びます。

[2025/12/20]

[JavaScript] 魔法陣と月のエフェクトをThree.jsを使って実装

Three.jsの基本を使用し、魔法陣の回転アニメーションと月の光源を設定してリアルなエフェクトを作成する方法を学びます。

[2025/12/19]

[JavaScript] Three.js における複数のライトとスポットライトの実装方法

Three.jsでスポットライトを使用し、シーンにダイナミックな照明を追加する方法について解説。スポットライトの基本設定、ターゲット、影の設定などを学べます。

[2025/12/19]

[JavaScript] スタックトレースを活用したデバッグ方法とその理解

スタックトレースを利用して、エラー発生箇所や非同期処理のデバッグを効率化する方法を学びます。実践的な例も紹介。

[2025/12/19]

[JavaScript] Three.jsでのテクスチャ管理とアニメーション制御

この記事では、Three.jsでのキューブマップやスフェリカルマップの設定、オブジェクトの回転、アニメーションの管理などを実際のコードを交えて解説します。

[2025/12/18]

[JavaScript] Three.jsでGLBの作成と読み込み、アニメーション処理の実装方法

Three.jsを使ってGLB形式の3Dキャラクターを作成、読み込み、アニメーションを追加する方法を紹介。さらに、カメラの向きに合わせたキャラクターの移動処理も解説。

[2025/12/18]

[JavaScript] Three.jsを使った3Dキャラクター移動と衝突判定の実装方法

Three.jsでのキャラクターの移動、衝突判定、反発処理を実装する方法を詳細に解説します。先読み処理による壁のめり込み回避も紹介。

[2025/12/17]

[JavaScript] Three.js Snippets 完全ガイド - 効率的な開発を加速するVSCode拡張

Three.jsの開発を効率化するために役立つ「Three.JS Snippets」の使い方、特徴、インストール方法について詳しく解説します。React Three Fiber (R3F)にも対応！

[2025/12/17]

[JavaScript] Three.jsを使った3Dゲーム開発の基本: カメラ制御と衝突判定

Three.jsを用いた3Dゲーム開発の基本。カメラの回転、プレイヤーキャラクターの移動、弾の発射、衝突判定を実装し、ゲームとして機能させる方法を紹介します。

[2025/12/12]

[JavaScript] HTML5 Canvasで作るボスバトル：楕円当たり判定と弾幕処理

HTML5 Canvasを使ったボスバトルの実装まとめ。楕円の当たり判定や弾幕処理、HPゲージ、フェードイン演出、反射処理、撃破判定など、ゲームとしての要素が一気に揃った1日の記録。

[2025/12/10]

[JavaScript] イージング処理の実装と三角関数を使った動きの滑らかさ

ゲームやアニメーションで使えるイージング処理のパターンを、線形、イーズイン・イーズアウト、三角関数を使った方法を交えて説明します。

[2025/12/5]

[JavaScript] UNIX哲学を応用したゲーム開発：物理演算とエフェクトで実現する大規模演出

UNIX哲学の考え方を応用し、物理演算やエフェクトの細かい要素を組み合わせることで、大規模なゲーム演出を実現した実装方法を解説。ゲーム開発における効率的なアプローチと技術的な工夫を紹介。

[2025/12/3]

[JavaScript] A-Frameとthree-vrmでVRMアバターをWebVRに組み込む

A-Frameとthree-vrmを使って、JavaScriptでVRMアバターをWebVRコンテンツに組み込み、表情やポージング、カメラ追従を簡単に実装する方法を紹介します。

[2025/12/3]

[JavaScript] ゲーム開発の設計：これからの開発に活かす教訓

ゲーム開発における初期設計の重要性を解説。複雑化した状態管理をクラス設計とモジュール化を使って整理し、拡張性の高いゲームを作るための方法を紹介します。

$[JavaScript] 2Dゲームにおける Math.atan2 の活用法$

[2025/12/2]

[JavaScript] 2Dゲームにおける Math.atan2 の活用法

Math.atan2 は、2D 座標系における角度を計算するための重要な関数です。この記事では、その基本的な使い方と実際の活用事例について解説します。

$[JavaScript] シューティングゲームにおける敵キャラの移動パターンと数学的な公式$

[2025/12/1]

[JavaScript] シューティングゲームにおける敵キャラの移動パターンと数学的な公式

本記事では、シューティングゲームにおける敵キャラの移動パターンを、数学的な公式と共に実装する方法を解説します。ベクトル演算、三角関数、乱数を使って、ゲーム内での敵キャラの動きをスムーズに制御する技術を学びます。

[2025/11/27]

[JavaScript] 仮想ボタンの実装とタッチ・マウス操作対応

仮想ボタンの位置をドラッグで動かせるようにし、タッチやマウス操作でボタンを操作できるようにする実装方法を解説します。ポーズ画面のボタンリセット機能にも対応。

[2025/11/21]

[JavaScript] IndexedDBのエラーとその解決方法: TransactionInactiveError

IndexedDBを使った音声アセットの管理において発生した「TransactionInactiveError」を解決する方法を、具体的なコード例とともに解説します。トランザクション管理と非同期処理のポイントを学びましょう。

[2025/11/19]

[JavaScript] requestAnimationFrameに関するトラブルシューティングと実際の問題解決事例

JavaScriptの`requestAnimationFrame`に関する問題解決の実際の事例を紹介。ゲーム開発でよく直面するアニメーションのトラブルシューティングと、それに対する効果的な解決策を解説します。

[2025/11/17]

[JavaScript] ベクトル演算の基礎をブロック崩しゲームで学ぼう

ブロック崩しゲームを通してベクトル演算を学ぼう。ボールの進行方向、反射角度、速度の増加など、ゲームに必要な物理的な計算を解説。パドルの中央と端でボールの反射角度が変わるロジックも紹介。

[2025/11/14]

[JavaScript] 2D 描画の基本テクニック：save,restore,translate,scale

ゲーム開発の描画処理で重要な `ctx.save()`, `ctx.restore()`, `ctx.translate()`, `ctx.scale()` の基本をサンプルコードとともに紹介。パフォーマンス向上やスムーズな描画を実現するテクニックを学びます。

[2025/11/14]

[JavaScript] イベントリスナーで迷わない this と bind() の仕組みを徹底解説

JavaScript の this はその呼び出し元に依存するため、イベントリスナー内での挙動が異なります。this を正しく制御するために、bind() やアロー関数を活用する方法を解説します。

[2025/11/14]

[JavaScript] ゲーム開発におけるイベント管理と状態管理のベストプラクティス

ゲーム開発において、最初の設計段階でイベントリスナーや状態管理の管理方法を正しく決めることで、後の開発がスムーズに進みます。本記事では、イベントリスナーを一元管理する方法とその重要性について紹介します。

[2025/11/14]

[JavaScript] Phaser.js vs. ネイティブ: Canvasで作るブロック崩しゲーム

この記事では、Phaser.jsを使ったゲーム開発と、ネイティブCanvasでの開発の違いを紹介し、ブロック崩しゲームを作りながら、ライブラリと手動実装の選び方について考察します。

[2025/11/12]

[JavaScript] IndexedDB: ネイティブ実装の基本と応用

IndexedDBをネイティブAPIを使って実装する方法を紹介。非同期処理を駆使してデータの保存、取得、削除を行う手法を解説します。

[2025/11/12]

[JavaScript] JavaScriptで実現するレスポンシブデザイン: canvas と HTML/CSSの同期

本記事では、JavaScriptでcanvasとHTML/CSSのサイズを同期させる方法と、レスポンシブデザインを実現するための基本的な手法について解説します。

[2025/11/11]

[JavaScript] 音声再生のパフォーマンス最適化 - Web Audio APIで音声キャッシュ管理

音声データの事前デコードとキャッシュ管理を行い、再生時の遅延やフリーズを防ぐためのベストプラクティスを紹介します。

[2025/11/10]

[JavaScript] JavaScriptで学ぶ衝突判定と距離計算の基本:ピタゴラスの定理で学ぶ衝突判定

JavaScriptを使ってゲーム内での衝突判定を実装するための基本的な方法を解説します。ピタゴラスの定理と距離計算、衝突判定を使ったリアルな動きの作り方を学べます。

[2025/11/9]

[JavaScript] スプライトシートアニメーション入門：JavaScriptでキャラクターアニメーションを実装

ゲームやウェブアプリケーションで使われるスプライトシートアニメーションの基礎を学び、JavaScriptを使ってキャラクターアニメーションを実装する方法を解説します。

[2025/11/7]

[JavaScript] Canvasでのフレームレート制御とアニメーション処理の基本

Canvasでのアニメーション処理とフレームレートの管理方法について詳しく解説します。requestAnimationFrameやperformance.now()を使用したスムーズな動作の実現方法や、開発中の躓きやテクニックについても紹介。

[2025/11/3]

[JavaScript] JavaScriptでのイベント管理: オブジェクトのプロパティとメソッドをマスター

本記事では、JavaScriptのイベントオブジェクトの基礎から応用までを解説。イベントハンドラ内で活用できるプロパティやメソッドを紹介し、タッチ、マウス、キーボードイベントの使い方を具体例を交えて深掘りします。

[2025/11/3]

[JavaScript] DOM操作のマスタリー：パフォーマンス最適化と高度な技術でWeb開発を加速させる

JavaScriptのDOM操作における効率的なテクニックとパフォーマンス最適化方法を深堀り。MutationObserverやIntersectionObserverの使用法を解説し、より高度な技術でWebアプリケーションを最適化する方法を学びます。

[2025/10/28]

[JavaScript] HTML5 Canvas の使い方とアニメーション作成

HTML5の`<canvas>`タグは、JavaScriptで描画やアニメーションを行うための強力なツールです。このタグを使って簡単なシューティングゲームや図形を描く方法を学びましょう。

[2025/10/26]

[JavaScript] Socket.ioを使ったリアルタイム通信アプリの作り方

Socket.ioを使用したリアルタイム通信を実装する方法を学びます。基本的なセットアップから、ユーザー認証、接続管理、スケーラビリティを考慮したアプローチまで、実践的なチャットアプリケーションの作り方を解説。

[2025/10/25]

【JavaScript 応用講座】ネットワーク通信深掘り: P2P、マルチキャスト、ソケット通信

この記事では、JSのネットワーク通信に関する基本的な概念を探り、P2Pチャットの実装方法、効率的なマルチキャスト通信、リアルタイムアプリケーションにおけるSocket.ioとWebSocketの違いについて説明します。

[2025/10/4]

[JavaScript] JavaScriptをネイティブ化する3つのアプローチと配布戦略

JSコードを安全に配布するためのアプローチを解説。ネイティブ化、CI/CD、配布方法、ライセンス認証など実用的な視点で整理しました。

[2025/9/30]

[JavaScript] フロントエンドコードの難読化とその限界 (Minify/Obfuscate/Bundle)

JavaScriptコードの難読化（Obfuscation）の基礎を解説。Chrome拡張のようにソースが見えてしまう環境で、どこまで保護できるか、ツールや実例を交えて紹介。

[2025/9/30]

[JavaScript] Mermaid / Graphviz / Cytoscape / elkjs 図式化/実用比較

Mermaid / Graphviz / Cytoscape.js / elkjs を使った図式化ライブラリの最小サンプルと用途比較

[2025/9/14]

[JavaScript] 効果音はBEEPで十分！Web Audioで作るゲームサウンド

JavaScriptとWeb Audio APIを使って、昔懐かしいBEEP文化をブラウザで再現。波形・エンベロープ・ビブラート・トレモロなどを組み合わせ、シンプルな通知音からゲーム効果音まで自由自在に生成する方法を紹介します。

[2025/8/24]

【JavaScript 入門講座】文字化けさよなら：JavaScriptで安全にUnicodeを扱う方法

JavaScriptにおけるUnicodeと文字列処理の基礎をわかりやすく解説。文字化けの原因、サロゲートペア、コードポイントの正しい扱い方、正規表現のuフラグの使い方など、実践的なTipsを多数掲載。

[2025/8/17]

【JavaScript入門講座】 JSが触れないメモリに手を伸ばす ─ WebAssembly超入門

JavaScript は安全なサンドボックス言語として設計されているため、メモリ操作やネイティブレベルの高速処理には不向きです。そんな「JSの限界」を補うために登場したのが WebAssembly (WASM)。この記事では、なぜ必要になったのか、仕組みと役割分担、サンプルコードを交えて分かりやすく解説します。

[2025/8/17]

【JavaScript入門講座】関数に状態を持たせる!? JavaScriptでできる意外な活用法

関数に設定や状態を持たせるテクニックは、グローバル変数を減らし、シンプルな設計を可能にします。Proxy・getter・Hidden Class最適化・実測ベンチマークまで幅広く網羅し、実務で役立つベストプラクティスを紹介。

[2025/8/3]

【JavaScript 応用講座 #07】[WebRTC/P2P] トークンパッシング入門：バケツリレーで繋ぐ通信フロー

WebSocket + WebRTC で構築したP2Pネットワーク上に、トークンパッシング（バケツリレー）機構を実装。仕組み・用途・実装例を交えて徹底解説。

[2025/7/29]

【JavaScript 入門講座】型とコピーのしくみを徹底解説！(プリミティブ型と非プリミティブ型)

JavaScriptで値の型を調べる方法として有名な typeof と instanceof。でも、「nullはobject？」「配列はどっちで判定すればいいの？」と混乱したことはありませんか？本記事では、typeofとinstanceofのそれぞれの特徴と違いをやさしく解説

[2025/7/26]

【JavaScript セキュリティ講座 #01】innerHTMLとXSSの危険、そしてDOMPurifyのすすめ

自由な言語JavaScriptに潜む落とし穴。XSSやnpm事件を通して、安全に使いこなすための設計と心得を解説。

[2025/7/26]

【JavaScript 応用講座】：[WebRTC/P2P] ZIPアセットをWebRTCで双方向送受信

JavaScriptとWebRTC（simple-peer）を使って、ゲームのアセットZIPファイルをP2Pで双方向送受信する仕組みを構築しました。チャンク分割による転送、Blob生成、ZIP展開、IndexedDBへの保存まで、実装手順を完全公開。デモ付きで応用可能な設計思想を解説。

[2025/7/24]

【JavaScript 入門講座】JavaScriptはクラスじゃない！？プロトタイプ継承をやさしく解説

JavaScriptの[[Prototype]]ってなに？見て見ぬふりしていた謎の表示を深掘りしながら、プロトタイプ継承の仕組みやclassとの違い、プロトタイプチェーンの構造までやさしく解説します。

[2025/7/23]

【JavaScript 入門講座】JavaScriptで作る！SVGベクターアーカイブと簡易ベジェエディタ構想

かつてカッティングプロッターで創り上げた一点物のベクター作品たち。そのベジェ曲線の軌跡を、JavaScriptとSVGで現代に再構築する試み。画像トレース、Webビューア、レイヤー操作、そして未来の簡易エディタへ──。創作と技術の交差点で、懐かしい作品ともう一度出会うための構想記録。

[2025/7/22]

【JavaScript 応用講座】：[WebRTC/P2P] チャット＆ファイル転送ができる双方向アプリを実装

WebRTCとsimple-peerを使ってP2P通信を実現！signal交換の自動化に成功し、チャットとZIPファイルの送受信も完全動作。Node.jsによる軽量なシグナリングサーバ構成と接続の流れを実例付きで解説。

[2025/7/22]

【JavaScript 応用講座】：P2P通信の基盤！Node.js製シグナリングサーバをKoyebで構築

Node.js と WebSocket を使ってシンプルなシグナリングサーバを構築し、無料のクラウドサービス Koyeb にデプロイする手順をまとめました。GitHub連携から起動確認、実際の接続テストまで、P2P通信の基盤となるシステムを最短で構築できます。

[2025/7/22]

【JavaScript 応用講座】：[P2P通信入門] P2P通信でファイル送受信【簡易チャット付き】

JavaScriptだけで、ブラウザ間でZIPファイルの送受信ができる!? チャンク送信＋Blob再構築＋チャット対応のフル実装。

[2025/7/21]

【JavaScript 応用講座】：[P2P通信入門] simple-peerでシグナリングと接続を理解する

Webアプリ上でのP2P通信にチャレンジ！「WebRTCは難しそう…」と思っていたけれど、simple-peerを使えば意外とシンプルに実装できました。この記事では、実際の接続手順、initiator問題、シグナリングの中身までを丁寧に解説し、将来的な分散アプリ構想まで視野に入れたP2Pの可能性を探ります。

[2025/7/20]

【JavaScript 応用講座】🛰️P2P通信に関する技術検証メモ

JavaScriptでのゲーム開発やWebアプリ内で P2P通信を用いたアセット共有・同期を行う構想のメモ

[2025/7/15]

【JavaScript 入門講座】localStorageとsessionStorageの違い。保存の基本と使い分け

JavaScriptでデータをブラウザに保存する方法としてよく使われる localStorage と sessionStorage。この記事では、それぞれの特徴や使い方、メリット・デメリット、そしてセキュリティ面や注意点まで、実例を交えてわかりやすく解説します。

$【JavaScript 入門講座】Math.random()を極める！ランダム抽選・シャッフルの基本と応用テクニック$

[2025/7/15]

【JavaScript 入門講座】Math.random()を極める！ランダム抽選・シャッフルの基本と応用テクニック

JavaScriptでランダムな挙動を実現したいときに使う Math.random()。この記事では、基本的な使い方から、配列シャッフル・重複なしの抽選・ランダムな数値範囲の指定・実用コードパターンまで、幅広く解説します。開発に“運”を取り入れたいとき、この記事がその第一歩になるでしょう。

[2025/7/15]

【JavaScript 入門講座】typeofとinstanceofって何が違うの？型判定の基本と使い分け

[2025/7/14]

【JavaScript 3D 入門講座】イベントデリゲーションって何？動的要素に効率よくイベントを付ける方法

JavaScriptで動的に追加された要素にイベントが反応しない経験、ありませんか？この記事では、addEventListenerを使った基本的なイベント処理から、イベントデリゲーションの考え方と使い方、実践例までをやさしく解説します。動的UIやカードゲームなどの開発にも役立つ内容です。

[2025/7/14]

【JavaScript応用講座】OK/キャンセルを美しく！カスタムダイアログの作り方

window.confirm()の味気ないポップアップにサヨナラ！この記事では、HTML＋CSS＋JavaScriptだけで作れるカスタムダイアログの実装方法を紹介します。UIの一貫性を保ちつつ、使いやすくて拡張可能なダイアログを自作する方法を、実例とともに解説します。

[2025/7/11]

【JavaScript応用講座】なぜ画像が表示されない？BlobとcreateObjectURLの落とし穴

JavaScriptで画像や動画を表示しようとしたとき、見慣れない「blob:〜」というURLの謎。この記事では createObjectURL() の仕組みと、BlobとFileの違い、IndexedDBとの相性、そして「なぜ画像が表示されないのか？」という問題に対する本質的な解決策を、実体験ベースで解説

[2025/7/11]

【JavaScript応用講座】Webゲーム開発者向けライブラリ10選〜すべて試したくなる“即戦力ツール”集〜

最近、自作ゲームの開発で「これは便利！」と思ったライブラリを厳選して紹介します。それぞれ簡単な使い方付きで、あなたの制作にもすぐ役立つはずです。

[2025/7/11]

【JavaScript応用講座】localStorage卒業、IndexedDBでゲームデータを保存する

Webゲーム開発で素材の保存に悩んだら？localStorageからの卒業、IndexedDBの導入でZIPデータやサムネイルを自在に管理する方法を実例で紹介。

[2025/7/8]

【JavaScript 3D 入門講座】HTMLでここまでできる！3D表現の入口 Three.jsをつかってみよう

本記事では、軽量3Dライブラリ「Three.js」を使って、Web上で画像を立体的に動かす入門的な方法を丁寧に解説。最小構成から回転アニメーションまで、必要なコードはすべて紹介。エラーの対処法も含めて、3Dの“最初の一歩”を一緒に踏み出しましょう。

[2025/7/7]

【JavaScript応用講座】localStorageでゲーム設定＆履歴を保存する

ユーザーのゲーム設定や履歴を保存したい？localStorageを使えば、ブラウザにデータを永続的に保存できます。この記事では、localStorageの基礎から、JSONを使った設定保存、プレイ履歴の管理まで、ゲーム開発に活用できる実用的なテクニックを初心者向けに解説します。

[2025/7/7]

【JavaScript応用講座】JSONで始める！i18n（多言語対応）実装入門

多言語対応（i18n）は、ゲームやWebアプリを世界に届けるために欠かせない技術です。この記事では、JavaScriptとJSONを使ったシンプルで実用的なi18nの実装方法を初心者向けに解説します。言語ファイルの設計から動的なUI切り替え、localStorageを使った設定の保存までをステップ形式で紹介します。

[2025/7/7]

【JavaScript入門講座】 fetch・データ処理・HTML連携まで、JSON基礎講座

JavaScriptで非同期データを扱ううえで欠かせないのが「JSON」。この記事では、基本構文からfetch()での読み込み、データの加工、HTMLへの反映方法までをやさしく解説。初心者がつまずきやすい [object Object] や undefined 問題、非同期処理のポイントも実例付きで紹介します。

[2025/7/3]

【JavaScript入門講座】クラス設計 #02：「クラスを育てる」ためのリファクタ設計術

この記事では、JavaScriptのクラスを実際に育てていく過程を通して、リファクタリングの視点や責務の見直し、状態管理の整理など、実践的な設計のヒントを紹介します。「クラスを最初から完璧に作る必要はない」と思えるようになる、等身大のリファクタ講座です。

[2025/7/2]

【JavaScript入門講座】クラス設計 #01：thisの意味、状態のカプセル化、メソッド化、そして再利用性

この記事では、UI機能を作る中で自然に必要になったクラス設計の導入プロセスを、実体験ベースで丁寧に解説します。thisの意味、状態のカプセル化、メソッド化、そして再利用性の話まで。「クラスって難しそう」と感じていた方にこそ読んでほしい入門講座です。

[2025/6/28]

【JavaScript入門講座】アロー関数と無名関数を使った非同期処理の基本：sleep関数を自作してみよう

本記事では、sleep関数のようなdelay()の自作コードを題材に、それぞれの要素を基礎から丁寧に解説します。初心者でも理解できるように、図解・例付きで解説します。

[2025/6/27]

【JavaScript】アニメーション大全：手作りエフェクトで魅せるUI演出テクニック集（全14種

JavaScriptを活用したアニメーション大全：手作りエフェクトで魅せるUI演出テクニック集

[2025/6/22]

【JavaScript入門講座】非同期処理と async/await をやさしく学ぶ

JavaScriptで複雑な処理やWeb通信を行うときに避けて通れない「非同期処理」。「なんでコードが途中で止まるの？」「asyncとawaitって何？」と悩んだことはありませんか？本記事では、非同期処理の基礎から、async/awaitの実践的な使い方まで、初心者にもやさしく解説します。

[2025/6/20]

[JavaScript] 画像を分割して合体アニメにする方法【Canvas＋Grid】

Canvasで画像を分割し、CSS GridとJavaScriptで合体アニメーションを実現。非同期処理、setTimeout、dataURLの使い方も詳しく解説。再利用可能なImageModule.js付き。

[ CATEGORY / 🟨 JavaScript ]

[JavaScript] reSID + fake6502をWASM化してAudioWorkletで.sidファイルを再生する ― ブラウザ完結SIDプレイヤー構築記

[JavaScript] libjxlをWASM+SIMD化してWeb Workerで動かす ― ブラウザ完結JPEG XLコンバーター構築記

[JavaScript] WebAssembly（WASM）とEmscriptenの全体像 ― C/C++をブラウザで動かすまでの道のり

[JavaScript] 極小250KBのLAZ圧縮Wasmを自作してブラウザでLAS→LAZ変換を動かす

[JavaScript] 極小2.4MBのOpenCV Wasmを自作してブラウザで画像処理（Inpainting）を動かす

[JavaScript] Lain Clock MMDモデルの GrantSolver クラッシュ修正 — PMXボーンインデックスと Three.js ランタイムの不整合

[JavaScript] VRM to MMD — 足IK・Aスタンス・指ボーン生成の実装詳細

[JavaScript] VRM to MMD — VMDアニメーションが動くまでのデバッグ記録

[JavaScript] Lain Clock カレンダー機能の WebGL 3D メッシュ化と描画順序（renderOrder/depthWrite）の最適化

[JavaScript] Lain Clock プリセット管理機能の実装 — WebGL設定の保存・復元・JSON Export/Import

[JavaScript] VRM to MMD(PMX) 変換ツール — glBパースからPMXバイナリ書き出しまで（β版）

[JavaScript] Lain Clock スマホ対応 — UI折りたたみ・カメラ自動調整・設定リアルタイムプレビュー

[JavaScript] 高精度GIF圧縮＆リサイザーの実装 Gifsicle WASMで80%軽量化を実現

[JavaScript] Lain Clock アップデート — ZIP文字化け修正・床パターンシステム・モデル復元機能

[JavaScript] 3D ROOM制作 11日目 GLSLシェーダーでスカイボックスを作り直す

[JavaScript] 3D ROOM制作 10日目 ブラウザだけでGLBファイルを圧縮する（依存ゼロ・150行）

[JavaScript] 3D ROOM制作 9日目 Surge・Firebase・GitLab Pages配置 + ポータル3D判定修正

[JavaScript] 3D ROOM制作 8日目 Render・Deno Deploy配置 + スロープ実装

[JavaScript] 3D ROOM制作 7日目 Friend/Works Portal・ポータルエディタ実装

[JavaScript] 3D ROOM制作 6日目 マルチサーバーデプロイ・VRポータル4サーバー間移動

[JavaScript] 3D ROOM制作 5日目 VRヒント・バナー画像・Import/Export

[JavaScript] 3D ROOM制作 4日目 プログレスバー・ポータル改修・広場実装

[JavaScript] 3D ROOM制作 3日目 ポータル通路・Export・VRMフィギュア配置 (Three.js)

[JavaScript] 3D ROOM制作 2日目（午後） VR対応・エディタ・ROOM追加機能 (Three.js)

[JavaScript] 3D ROOM制作 2日目（前） 初期設定ウィザードとスカイボックス実装 (Three.js)

[JavaScript] フォルダ置くだけで動く3D ROOM機能を作る（Three.js）

[JavaScript] Three.js RenderTarget ミニマップを“ゲームUI”にする（円形マスク＋フレーム＋時計表示）

[JavaScript] Three.jsでミニマップ実装：サブカメラ＋RenderTarget＋カーナビ式スムーズ回転

[JavaScript] sin/cos アニメーションまとめ：Three.jsで“動き”を作る最短パターン集

[JavaScript] Quaternion 入門 #06 : WebXR / ゲームで使う実践パターン

[JavaScript] Quaternion 入門 #05 : Slerp は何をしているのか

[JavaScript] Quaternion 入門 #04 : multiply の順序は何を意味しているのか

[JavaScript] Quaternion 入門 #03 : やってはいけない実装集（JavaScript / Three.js）

[JavaScript] Quaternion 入門 #02 : なぜオイラー角は壊れるのか

[JavaScript] Quaternion 入門 #01：理解しなくていい回転の扱い方

[JavaScript] Three.jsでS字レールをつなぐ：クロソイド曲線で2本で分岐カーブを作る

[JavaScript] Three.jsで「列車を運行する」実装に到達するまでの設計と思考ログ

[JavaScript] Three.jsで線路を引いて列車を走らせた（Curve×cloneでレール生成）

[JavaScript] WebAudio × three.js で作るサウンドリアクティブ・ジオメトリアニメーション

[JavaScript] Three.jsでRPGバトルを仕上げる｜敵ターン追加・HP決着・テンポ調整・不具合潰し

[JavaScript] Three.js / WebXRで一生使い回せるMessageBoxを実装

[JavaScript]スマホでサブ的にコーディングする現実解 ─ 開発者向け実践ガイド

[JavaScript] Zone切り替えBGMを自然につなぐサウンド設計（フェード対応）

[JavaScript] Three.jsでsin波に沿って拡散するスプライト演出を試作した記録

[JavaScript] Three.jsでMarchingCubes（Metaballs）を動かす

[JavaScript] Three.jsで地形にゾーンを持たせてエンカウントを制御する（tile→ASCII map→ZONE_DEFS）

[JavaScript] Three.jsでRPGバトルをゼロから組む｜フェーズ管理・UI・アニメーション・SEまで

[JavaScript] Three.jsでPMXにVPD（ポーズ）を適用する方法

[JavaScript] Three.jsでRPG風コマンドUIをゼロから組み上げる（CanvasTexture編）

[JavaScript] PlaneGeometryで地形を生成し、登れる世界を作る（山・クレーター・JSONマップ設計）

[JavaScript] WebXRでドラゴンレーダーを作る：コンパスUIを拡張してNPC位置を可視化する

[JavaScript] WebXRでVRコントローラを表示する：XRControllerModelFactoryと右手コンパスUIの実装

[JavaScript] Three.jsでPC向けミニマップを実装する方法（viewport / scissor を使った複数カメラ描画）

[JavaScript] Three.jsで地球の上をキャラクターが走り続けるアニメーションを作る（球面座標＋法線＋lookAt）

[JavaScript] VRで段差とスロープが壊れる理由と、正しく動かす方法

[JavaScript] Three.jsで段差を登って降りられるキャラクター移動を実装する

[JavaScript] Three.js + WebXR で CanvasTexture を使ったスクロールUIを自作

[JavaScript] 複数ゲームを切り替えるためのシンプルなシーン設計

[JavaScript] Three.jsでボールバウンドアニメーションを実装する｜Canvas2D実装の移植ログ

[JavaScript] three.jsで作る「箱の中のゲーム」設計：シューティング編 (VR / PC両対応)

[JavaScript] Three.jsで花火を実装して分かった、プロっぽく見せるための設計

[JavaScript] Three.jsでパーティクルが消えない本当の原因と正しい後始末

[JavaScript] GameBoxアーキテクチャで作る Three.js ブロック崩し（実装完了編）

[JavaScript] フレームは飛ぶ ― deltaTime を信じた結果、世界が壊れた話

[JavaScript] Three.js / WebXRで差し替え可能なゲーム箱を作る（3D空間でブロック崩しゲーム）

[JavaScript] Three.js + WebXR で動画プレイヤーUIをクラス設計する

[JavaScript] Three.jsでPMX / VMDを読み込んでアニメーションを再生する

[JavaScript] Three.js + VR でキャラクターの上にセリフを表示（Canvas＋Sprite）

[JavaScript] VRにおける衝突判定の考え方（Three.js / WebXR）

[JavaScript] Three.js WebXR：VRコントローラのレーザーポインタでUIボタンを押す（Raycaster入門）

[JavaScript] Three.js Vector3完全理解 —— 3D数学の基礎から実践までを一気に掴む

[JavaScript] Three.js WebXR でキャラクターを移動させる最小実装メモ

[JavaScript] Three.jsで動画再生とカスタム表示する方法まとめ

CSS3DRendererの正体と罠 CSS3DRendererとWebGLを組み合わせると何が起きるのか

[JavaScript] Unityで作ったC＃コードをWebブラウザで実行する仕組みとは？

[JavaScript] Three.jsでWebXRを実装 (Meta Quest 2)

[JavaScript] 魔法陣の回転追従とアニメーション実装

[JavaScript] Three.jsとBlenderの色空間不一致を解消する方法

[JavaScript] Three.js で KHR_materials_pbrSpecularGlossiness の解消方法

[JavaScript] 3D ROOM制作 10日目ブラウザだけでGLBファイルを圧縮する（依存ゼロ・150行）

[JavaScript] 3D ROOM制作 6日目マルチサーバーデプロイ・VRポータル4サーバー間移動

[JavaScript] 3D ROOM制作 4日目プログレスバー・ポータル改修・広場実装

[JavaScript] 3D ROOM制作 3日目ポータル通路・Export・VRMフィギュア配置 (Three.js)

[JavaScript] 3D ROOM制作 2日目（前）初期設定ウィザードとスカイボックス実装 (Three.js)

[JavaScript] Three.jsでキャラクターの自動散歩と衝突判定の実装

[JavaScript] Three.jsで雪、雨、クリスマスツリーと、点滅するライトを実装

【JavaScript入門講座】関数に状態を持たせる!? JavaScriptでできる意外な活用法

【JavaScript 3D 入門講座】イベントデリゲーションって何？動的要素に効率よくイベントを付ける方法

【JavaScript応用講座】Webゲーム開発者向けライブラリ10選〜すべて試したくなる“即戦力ツール”集〜