💻 DEV_CODE // PROTOCOL.LAIN

[ CATEGORY / 💻 DEV_CODE ]

MATCHED_ITEMS: 221

[2026/3/24]

[Next.js #51] Web Workersで作る無限の浮遊大陸とフライトシミュレーター

2Dハイトマップの限界を突破し、3Dノイズによる「密度」の概念を導入。マルチスレッド処理で60FPSを維持しながら、広大な空を自由に飛び回る高密度ボクセル世界の構築手法を解説します。

[2026/3/23]

[Next.js #50] 無限のボクセル世界を飛ぶ — フライトシミュレーターとボクセル雲の実装

Three.jsとノイズ関数を用いて生成した無限地形の上空を、WASD操作で飛行するシミュレーターの実装手法。クォータニオンを用いたジンバルロックのない旋回ロジックや、InstancedMeshによるボクセル雲（CloudChunk）の生成を統合します。

[2026/3/21]

[Next.js 49] InstancedMeshの表現力拡張 — シード生成・レトロパレット・動的ライティング

Three.jsのInstancedMeshを使って生成したボクセル地形に対し、setColorAtによるバイオームの塗り分け、Mulberry32を用いた文字列からのシード地形生成、DirectionalLightのアニメーションによる昼夜サイクル風の演出を追加する具体的なコードとその仕組みを解説します。

[2026/3/21]

[Next.js #48] Three.js × InstancedMeshによる400万ボクセル描画

Three.jsのInstancedMeshを用いて400万個のボクセルを生成し、FPSとGPU負荷を計測。Next.js環境でのパフォーマンスチューニングと、AI生成動画とは異なる「リアルタイムレンダリング」の裏側に迫ります。

[2026/3/20]

[Next.js #47] Procedural Solar System VR — WebXR で宇宙のスケールを体感する

Three.js と WebXR を組み合わせ、プロシージャルな太陽系を VR 空間に構築。カメラのリグ構成、コントローラーによる移動、透明度描画のバグ修正など、没入感を高めるための最適化プロセスを詳解。

[2026/3/19]

[Next.js #46] Procedural Solar System ― Three.js × GLSL ─ ノイズだけで描く「太陽系全惑星」と「星雲」

GLSLの4DノイズとDomain Warpingを用いて、木星の大赤斑、土星の環、天王星の垂直リング、海王星の大暗斑をプロシージャルに生成。InstancedMeshによる小惑星帯やOrbitControlsの拡張によるシネマティックなカメラ操作も実装し、ブラウザ上に生きた太陽系を完成させます。

[2026/3/18]

[Next.js #45] Procedural Rings — 1Dノイズと極座標で描く惑星の環と影の同期

Next.js環境のフロントエンドで、GLSLを用いた美しい「惑星の環（Rings）」をプロシージャルに描画します。1Dフラクタルノイズによる微細な塵の表現と、外積（Cross Product）を活用して惑星本体とリングの影を同期させるFake Shadowの実装アプローチをまとめました。

[2026/3/17]

[Next.js #44] Blender × R3F：物理演算による「砕ける演出」の構築

BlenderのCell Fractureアドオンによるオブジェクト分割から、Rapierを用いたパフォーマンス重視の物理演算スワップ、GLSLによる動的なノイズ床の実装までを解説します。

[2026/3/17]

[Next.js #43] Procedural Aurora — 極地の夜空に揺らめくプロシージャルなオーロラを実装

Next.js環境下でThree.jsとGLSLを用いて、プロシージャルなオーロラを実装する方法を解説。ノイズのStretching、極地マスク、加算合成を用いた第3の球体（Aurora Sphere）の追加と、自然で神秘的なパラメータ調整のコツをまとめます。

[2026/3/16]

[Next.js #42] Three.js HTMLMesh で既存の HTML UI を WebXR 空間へ移植

Three.js の HTMLMesh と InteractiveGroup を活用し、Quest 2 などの WebXR 環境で既存の HTML UI を操作可能にする方法を解説します。UI のモジュール化から VR コントローラーによる表示トグル、ファイル読み込みの制約回避まで。

[2026/3/16]

[Next.js #41] Procedural Night Lights on Storm Planet — 昼夜境界を動かし、文明の灯りが浮かぶ惑星を描く

Three.js / GLSL で作った Storm Planet に Procedural Night Lights を実装。Voronoi Noise による都市の灯り、smoothstep による twilight 制御、uLightDir の uniform 化による可動 Terminator を組み合わせ、文明の光と昼夜の境界が動く惑星表現を解説します。

[2026/3/15]

[Next.js #40] MMD Clock AI Talk — LM Studio × VOICEVOX × MMDで「会話する時計アプリ」を作る

Next.jsのMMD時計アプリに、LM StudioのローカルLLM、VOICEVOX、吹き出し表示、前方移動演出を統合し、キャラクターと会話できる仕組みを構築した実装記録です。

[2026/3/15]

[Next.js #39] Procedural Lightning on Storm Planet — 球体惑星に雷を落とし、濃い雲でランダム発火させる

Next.js連載第39回。前回の Interactive Storm を拡張し、球体惑星の雲レイヤーに Procedural Lightning を追加します。高周波ノイズと閾値処理で稲妻の形状を作り、時間ノイズで不規則なフラッシュを制御。さらに、マウスで発生させる台風だけでなく、雲の濃い領域でもランダムに雷が走るように調整し、生きた嵐の表現へ進化させます。

[2026/3/14]

[Next.js #38] Interactive Storm on Sphere Planet — マウスで台風を錬成する Three.js / GLSL 実装

今回は球体惑星の雲表現をさらに発展させ、マウス位置に応じて局所的な渦と乱流を発生させる Interactive Storm を実装します。Three.js の Raycaster で取得したワールド座標を shader に渡し、FBM / Curl Noise / Domain Warping / 球面接線ベクトル場を組み合わせることで、台風の目を持つ大規模な嵐表現を構築します。

[2026/3/13]

【Next.js #37】Three.js + MMD 時計アプリに動画壁紙を実装 — mp4をIndexedDBへ保存してループ再生する

Three.js + MMD ベースの時計アプリに動画壁紙機能を追加。mp4 を drag & drop で IndexedDB に保存し、Wallpaper UI 下に一覧表示、クリックで無音ループ再生、localStorage 連携による起動時復元、動画サムネ生成までを実装した。

[2026/3/13]

【Next.js #36】Procedural Clouds on Sphere — 雲海をまとったノイズ惑星を Three.js + GLSL で拡張する

Three.js + GLSL で作成したノイズ惑星を拡張し、Cloud Sphere による流体的な雲表現を追加。4D FBM によるアニメーション雲、地表への影フェイク、バイオーム地形との合成、GUI によるリアルタイム調整までをまとめた実装記事。

[2026/3/12]

[Next.js #35] MMD時計アプリの設定UIを実装 — 壁紙・時計色・床シェーダー・MotionAssets保存対応

Three.js + MMD + IndexedDB ベースのWeb時計アプリに設定UIを追加。時計色、透明度、壁紙、床のシェーダーパラメータ、VMD/VPDの一覧管理とデフォルト設定を保存・復元できるようにした実装内容を紹介します。

[2026/3/12]

[Next.js #34] Procedural Biome Planet — Three.js × GLSLでノイズ惑星に海・森・雪・大気を与える

Three.js と GLSL で球体ノイズ地形にバイオームと大気散乱を実装。Next.js プロジェクトの public 配下で運用するほぼバニラ構成として、Height / Slope / Fresnel を組み合わせた惑星デモと、GUI による調整ポイントを整理します。

[2026/3/11]

[Next.js #33] Interactive Noise Sphere — Three.js × GLSLで球体ノイズにクリック波紋を加える

Next.js プロジェクト内で運用しているほぼバニラ Three.js + GLSL 実装として、球体ノイズ地形とクリック波紋エフェクトを組み合わせたインタラクティブデモを作成。Next.js #31 の平面版からの発展と、Noise 入門 #32 の球体ノイズ実装を接続しながら、Raycaster による接触位置取得、球面法線ベースの波紋表現、背景スカイスフィアの追加までをまとめます。

[2026/3/10]

[Next.js #32] Three.js MMDアプリにモデルZIP / 壁紙 / IndexedDB管理を実装 — ローカルアセット基盤の整備

Three.jsベースのMMD / WebXRアプリに、モデルZIPの展開、PMX検出、Blob処理、IndexedDB保存、モデル一覧、壁紙サムネ一覧、削除UIを実装した開発記録。ローカルアセットをアプリ内で管理するための基盤整備をまとめる。

[2026/3/10]

[Next.js #31] Touching Noise Field — Three.js × GLSLで“触れるノイズ場”を作る

Noise 入門の流れを踏まえ、Three.js × GLSL × Raycasterで“Touching Noise Field”を実装。マウスホバー位置を3D空間上に取得し、その周辺だけノイズの歪みと色変化を強めることで、インタラクティブなノイズ表現を作る。

[2026/3/9]

[Next.js #30] Triplex + React Three Fiber + WebXR — GUI編集からQuest2実行まで

Triplexを使ってReact Three Fiberの3DシーンをGUIで編集し、そのままWebXRでMeta Quest2に送って体験するまでの流れを解説。R3FのXRプロトタイピングを高速化する開発フローを紹介。

[2026/3/8]

[Three.js #29] Three.js + MMD を VR対応する — WebXRで躓いた点まとめ

Next.js + Three.js + MMD の時計アプリを Quest 2 単体ブラウザ対応。HTTPS 起動、WebXR 実装、crypto.randomUUID 問題の回避、画面内ログ、frame.getViewerPose() を使った XR カメラ追従修正、Quest Browser 向け Tint Color UI 改修までをまとめます。

[2026/3/7]

[Next.js #28] MMD時計アプリに Wallpaper カスタマイズ機能を追加 — 背景画像・Tint・UI切替

Three.js製MMD時計アプリにWallpaperカスタマイズ機能を実装。背景壁を画像対応し、Tint Color、Texture ON/OFF、壁紙プリセット切替をUIから操作できるようにした。MeshStandardMaterial + map、onBeforeCompile、texture cache、状態管理、画面追従リサイズまで含めて整理。

[2026/3/7]

[Three.js #27] MMDのMorph検証UIを実装 — Rigパネルで表情を直接確認

Three.js + MMD 構成のアプリに Rig パネルを実装し、Bone / Morph 一覧表示、検索、Morph Apply / Reset を追加した開発記録。Morph が効かないように見える原因を調査し、actor.root ではなく actor.mesh への適用で「ウィンク2右」などの表情変化を確認できた過程をまとめる。

[2026/3/6]

[Next.js #26] Three.js×MMD：複数モデル表示とactor管理、順番トーク制御を実装

Three.js×MMD時計アプリに複数モデル表示を実装。actor配列による管理、モデル追加・削除UI、talk ON/OFF、lastTalkActorId と pickNextTalkActor を使った順番トーク制御の設計と実装をまとめる。

[2026/3/5]

[Next.js #25] Three.js×MMD：モデル情報スナップショット→UI反映→デバッグ機能まで一気に固める

Next.js×Three.js×MMDで作った3D時計に、上部ツールバー/右パネル/HUDを追加。UIが整った今こそフォント設計が効く。巨大な時刻表示、曜日/天気、HUD、パネルの階層を崩さず“作品っぽさ”を上げるためのフォント選定・スケール・letter-spacing・shadow・数字の見せ方と、CSS変数での管理方法を整理する。

[2026/3/4]

[Next.js #24] 3D時計UIを“作品”に変えるタイポグラフィ設計（Three.js×MMD）

[2026/3/3]

[Next.js #23] Three.js×MMD：ランダム歩行・ランダム会話・VPDポーズで“動く3D時計”へ進化

Next.js×Three.jsで構築した3D時計に、MMD(PMX/VMD/VPD)のランダム歩行・ランダム会話・カメラ追従・ポーズ適用を統合。レスポンシブ床スケール、吹き出しCanvasスプライト、VMD停止制御、talk中のVPD適用など“キャラクターとして動く時計”に進化させた実装まとめ。

[2026/3/2]

[Next.js #22] Three.jsで作る理想のWEB時計：3Dアナログ×3Dデジタル×ノイズ背景×lil-gui調整

Next.jsプロジェクトのpublic/index.htmlで孤立起動するThree.js時計を実装。ベベル付きジオメトリでアナログ時計、TextGeometryで3DデジタルUI、onBeforeCompileで壁にノイズ注入、EffectComposer+Bloom、lil-guiで露出/ライト/UI色/ノイズ/床シェーダをライブ調整。MMD(PMX)のロードと簡易歩行も添える。

[2026/3/1]

[Next.js #21] Canvas 2Dで挑む「タイムパイロット」式全方位カメラと無限の雲海

WebGLを使わずに、描画コンテキストの Translate・Scale・Rotate の順序を制御することで、2D座標系の中に奥行きと旋回感を生み出すテクニックを解説します。

[2026/3/1]

[Next.js #20] R3F×GLSL ドメイン・ワーピング：Bloom不要の発光と流体表現

React Three Fiberでドメイン・ワーピング(Domain Warping)を実装し、有機的なうねりと虹色のスペクトル・カラーを表現する方法を解説。外部Bloomライブラリを使わず、GLSLのみで高輝度な発光を実現するテクニックも紹介。

[2026/2/17]

[Next.js #19] Next.js + R3F: 初心に帰るシャドウマップ実装とLevaでのパラメータ可視化

React Three FiberにおけるDirectionalLightのシャドウマップ設定の基本解説。Levaを用いたバイアスや解像度、カメラ範囲（Frustum）のリアルタイム調整と、トラブルシューティングの基礎について。

[2026/2/16]

[Next.js #18] R3Fで「無限の水平線」を作る — Ocean & Volumetric Clouds

React Three Fiber で自然環境を構築する実装解説。three/addons/objects/Water.js を extend して使用する方法、およびカスタムシェーダーで 3D FBM とレイマーチングを実装し、厚みのある雲を描画する手法を詳細に解説します。

[2026/2/15]

[Next.js #17] R3Fでドラッグ操作可能なルービックキューブを実装する

54要素の配列管理に挫折した状態から、物理空間での制御へとパラダイムシフト。R3Fの `attach` を用いた動的グループ化や、法線ベクトルと外積による直感的なドラッグ判定ロジックを詳解します。

[2026/2/14]

[Next.js #16] R3FでGLTFモデルを横スライド切替する3Dビューアを実装する

Next.js + React Three Fiberで、GLTFモデルを横にスライド切替できる3Dギャラリービューアを構築する。モデルごとのスケール差を吸収する正規化処理、Box3による接地、lerpによる滑らかな遷移、UIレイヤー分離設計を解説。

[2026/2/13]

[Next.js #15] Next.js + R3F で 5万本の草原を生成する – InstancedMesh + GPUシェーダー

Next.js + React Three Fiber を使い、InstancedMesh とカスタムシェーダーで 5万本の草を描画。GPUでの風アニメーション、FBMによる地形生成、疑似法線ライティングまで解説。

[2026/2/12]

[Next.js #14] PMXモデルを“動的にキャラチェンジ”する：File→BlobURL→MMDLoader の完全実装

Next.js + React Three Fiber で PMX（MMDモデル）をブラウザから動的読み込みし、歩行アニメ・地形 Raycast・3D UI メニューと統合するキャラチェンジ機能の解説。BlobURL と MMDLoader の相性問題、File API、MMDAnimationHelper、再レンダー対策など、複数テクノロジーを横断した実践的なまとめ。

[2026/2/11]

[Next.js #13] OBJモデルを“粒子化”：PointCloud＋GLSL揺らぎでモデルを再構築

OBJモデルを粒子に変換し、GLSLで揺らぎアニメーションを付けて再構築する手法を Next.js 内で実装。PointCloud・ShaderMaterial・uniform 制御・インスペクタUI（lil-gui）など、WebGL表現の中核をまとめた記事。

[2026/2/11]

[Next.js #12] R3Fに“インスペクタ”を付ける：Levaで雲・水・ライトをリアルタイム調整

Next.js + React-Three-Fiber で構築した“世界”にインスペクタ機能を追加し、雲のスピード・色、ライト強度、地形スケール、水の揺らぎといったパラメータをリアルタイムに変更できるようにする。Leva の useControls、ShaderMaterial への uniforms 接続、UIが表示されない時の原因など実装上の罠も丁寧に解説。

[2026/2/10]

[Next.js #11] FBM地形を削って“動く湖”を作る：反射・雲ドーム・水シェーダーの完全統合

FBMノイズ地形の生成、円形のくぼみで作る湖、GLSLによる水面シェーダー（FBM波・深度色・縁フェード）、雲ドーム、Reflectorによる鏡面反射、プレイヤー移動まで統合し、Next.js × React-Three-Fiber で“世界づくり”を1つの記事にまとめた実装解説。

[2026/2/9]

[Next.js #10] R3F × GLSL で “動く雲の SkyDome” を作る：FBM ノイズで空を生成

Perlin / FBM ノイズで地形を作った前回に続き、R3F と GLSL を用いて雲が流れる SkyDome を構築します。FBM ノイズ、smoothstep、BackSide 描画を活用し、ゲーム空間の空を自作ノイズで描画する手法を詳しく解説します。

[2026/2/8]

[Next.js #09] Perlin/FBM ノイズで地形を作り、プレイヤーを Raycast で追従

Next.js(App Router) + R3F 環境で、Perlin/FBM（フラクタルノイズ）を使った地形生成と、Raycaster による地面追従プレイヤー制御を実装する。PlaneGeometry の頂点変形・computeVertexNormals・vertexColors、KeyboardControls による移動、atan2 での回転補間、Raycast の hit 判定と LERP による安定化まで、ゲームエンジン的処理を Web 上で再現する。

[2026/2/8]

[Next.js #08]VRM / BVH / PMX を Next.js（R3F）で扱うための互換性と実装整理

three-vrm の 0.x/1.x/2.x の違い、BVHLoader の利用条件、PMX(MMD)モデルが glTF/VRM と統合できない理由など、1日で遭遇した互換問題をすべて整理し、Next.js + R3F でキャラクターモデルを扱う際の正しい実装ルートを提示する。

[2026/2/7]

[Next.js #07] R3FでglTF/VRMを扱うための“橋渡し”基礎まとめ

バニラThree.jsではglTFもVRMも実装済みの開発者向けに、React Three Fiberで同じ資産を扱うための“橋渡し部分”だけをまとめる。useGLTF・Suspense・再レンダー・VRMの内部構造がReactと衝突する問題点など、R3F特有の地雷と設計思想を端的に解説する。

[2026/2/6]

[Next.js #06]多段キャンバス構造の設計図：2D Canvas と 3D（R3F）を重ねて扱う方法

Next.js の App Router を使って、DOM UI・2D Canvas（HUD）・3D Canvas（R3F）をレイヤー別に分離し、負荷やバグを最小化しながら安定動作させる設計図を紹介します。Three.js ユーザーが R3F に移行する時の注意点も含めて、Webゲーム風 UI を構築する技術を分かりやすくまとめています。

[2026/2/5]

[Next.js #05] App Router の“基本 UI 構造”を理解する：layout / page / component / client-server の境界

Next.js(App Router) の UI を構成する layout / page / component の仕組みと、Server Component / Client Component の境界を正しく理解するための基礎回。R3F や WebXR を扱う前に “Next.js の地面” を固めるための内容。

[2026/2/4]

[Next.js #04] R3F × WebXR の構造：Canvas ループと XR の衝突を理解する

R3F は React ループをベースに WebGL を制御し、WebXR は XRSession の animationLoop を持つ。この2つのループが衝突することで、VRM/MMD のアニメーションずれ、コントローラーの遅延、シーンの再マウントによるブラックアウトなど、R3F 特有の XR 問題が発生する。本記事では R3F Canvas の内部構造（advance / root / frameloop / state.clock）を踏まえて、WebXR と正しく統合するための設計・実装パターンを整理する。

[2026/2/2]

[Next.js #03] React Three Fiber（R3F）導入：Three.js を Next.js と正しく統合する

Next.js #03 は、Three.js を Next.js(App Router) で動かす際に必須となる React Three Fiber（R3F）の導入編。R3F が何をして何をしないのか、Three.js との対応表、useFrame・Canvas・useThree の基本的役割、SSR と WebGL の構造的なズレ、そしてコンポーネント境界の意味など“理解しておくべき土台”をまとめる。ヴァニラ Three.js を書き続けたい開発者向けに、R3F が低レイヤーを奪わないことも解説。

[2026/2/1]

[Next.js #02] フレームワークの思想と哲学を理解する

Next.js を正しく使いこなすために欠かせない、React・Next.js・Tailwind の設計思想とその歴史的背景をまとめた記事。UI＝状態の関数という概念、継承からCompositionへの転換、Server/Client 分離の思想、Tailwind がCSS地獄を解決した理由など、実装より先に理解しておきたい“根底の哲学”に焦点を当てる。

[2026/2/1]

[Next.js #01] 初期セットアップと最初の罠の抜け方

Next.js プロジェクトの作成から、page.tsx の最小構成、Tailwind の基本、React DevTools の導入まで。初心者が最速で“動く状態”を作る。

[2026/1/31]

[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/15]

[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/13]

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

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

[2026/1/12]

[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/11]

[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/9]

[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/8]

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

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

[2026/1/7]

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

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

[2026/1/6]

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

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

$[JavaScript] 我思う、ゆえに座標あり ― ルネ・デカルトとデカルト座標系$

[2026/1/6]

[JavaScript] 我思う、ゆえに座標あり ― ルネ・デカルトとデカルト座標系

ルネ・デカルトが生み出したデカルト座標系は、単なる数学的手法ではない。Three.jsでの3D座標、カメラ制御、UI配置を通して見えてきた、数学と哲学が交差する地点を辿る。

[2026/1/5]

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

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

[2026/1/4]

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

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

[2026/1/4]

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

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

[2026/1/4]

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

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

[2026/1/3]

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

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

[2026/1/3]

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

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

[2026/1/2]

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

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

[2026/1/1]

[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/30]

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

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

[2025/12/29]

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

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

[2025/12/29]

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

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

[2025/12/28]

[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/27]

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

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

[2025/12/27]

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

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

[2025/12/26]

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

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

[2025/12/25]

[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/23]

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

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

[2025/12/23]

[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/22]

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

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

[2025/12/22]

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

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

[2025/12/22]

[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/21]

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

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

[2025/12/21]

[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] 魔法陣と月のエフェクトをThree.jsを使って実装

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

[2025/12/19]

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

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

[2025/12/19]

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

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

[2025/12/18]

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

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

[2025/12/17]

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

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

[2025/12/17]

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

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

[2025/12/16]

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

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

[2025/12/16]

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

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

[2025/12/12]

[JavaScript] ブロック崩しは作っていいのか？「PONG」「Breakout」からアルカノイド、そしてオリジナルへ

ブロック崩しの起源（PONG/Breakout）とアルカノイドの位置づけを整理し、ゲームのルールと表現の違い、テトリスが著作権問題になりやすい背景、オリジナルとして成立させるための注意点を実装者目線で解説する。

[2025/12/11]

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

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

[2025/12/9]

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

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

[2025/12/4]

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

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

[2025/12/3]

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

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

[2025/12/2]

[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/20]

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

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

[2025/11/19]

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

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

[2025/11/16]

[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/13]

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

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

[2025/11/12]

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

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

[2025/11/11]

[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]

仕様書とプロトタイプ: 現代の開発サイクルにおける重要な役割

仕様書とプロトタイプのバランスを取ることで、開発サイクルを加速し、品質の高いプロダクトを生み出す方法を探ります。アジャイル開発の視点からも解説。

[2025/11/8]

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

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

[2025/11/7]

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

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

[2025/11/5]

[DevOps] フィーチャーフラグの活用法：機能管理と段階的リリースのベストプラクティス

フィーチャーフラグを使用することで、新しい機能のリリースを安全に行い、段階的な公開やA/Bテスト、リスク管理が可能になります。この記事ではその基本的な概念、利点、実装方法について紹介します。

[2025/11/5]

[React #06] フォームとバリデーション:フォーム入力の制御とエラーハンドリングを理解する

Reactでのフォーム処理とバリデーションを中心に、ユーザー入力を受け取るフォームの作成、送信処理、エラー表示、そしてReact Hook Formなどのライブラリによる効率的なフォーム開発の手法を紹介します。

[2025/11/5]

[React #05] React Routerを使ったページ遷移：Reactアプリにおける効率的なページ遷移とダイナミックルートの活用法

React Routerを利用して、シングルページアプリケーション（SPA）のページ遷移を簡単に実装する方法を学びます。ダイナミックルートやパラメータ付きURLの設定も紹介します。

[2025/11/4]

[React #04] useEffectフック徹底解説：副作用の管理とパフォーマンス最適化

ReactのuseEffectを使った副作用（データ取得、DOM操作、ライブラリとの連携）を実践的に学び、Reactコンポーネントのライフサイクル管理と最適化の方法を深掘りします。

[2025/11/3]

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

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

[2025/11/3]

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

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

[2025/11/2]

[React #03] コンポーネントのネストとデータの流れ

Reactにおけるコンポーネントのネスト構造、親から子へのデータの渡し方（Props）、子から親へのイベント通信方法（Callback関数）、複数のコンポーネントで状態を共有する方法（Context API）について深く学びます。

[2025/11/2]

[CSS実践講座 #04] インラインスタイルの深層解析：動的スタイル変更と最適活用法

CSSのインラインスタイルについて、基本から応用まで、動的なスタイル変更やJavaScriptとの連携まで詳しく学びます。

[2025/11/1]

[React #02] イベントハンドリングと状態管理の基本

Reactでのイベントハンドリングと状態管理の基本を学ぶ。useStateフックを使った状態管理、ボタンクリックやフォーム入力による状態変更を通じて、動的なUIの作成方法を解説します。

[2025/10/31]

[React #01] Reactの基本 - コンポーネントとJSX

このシリーズでは、ReactのコンポーネントとJSXの使い方に焦点を当て、UI開発の効率化を目指します。Reactの基本的な要素を理解し、最初のReactコンポーネントを作成する方法を学びましょう。

[2025/10/29]

[TypeScript] TypeScriptマスターガイド：基礎から応用まで完全網羅

TypeScriptのインストール方法、型の使い方、関数やオブジェクト型、非同期処理、ジェネリクス、Reactとの組み合わせまで幅広く解説します

[2025/10/27]

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

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

[2025/10/26]

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

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

[2025/10/24]

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

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

[2025/10/22]

[CSS実践講座 #03] 実践的なCSSテクニックとその活用法

CSSを使いこなすための実践的な講座。CSS-in-JS、Tailwind CSS、Sassなどを活用したフロントエンド開発の方法を深堀り。実際のコード例を交え、UIデザインやレスポンシブレイアウトの作成方法を学びます。

[2025/10/3]

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

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

[2025/10/1]

[Vibe Coding] 数分で生まれたAI産弾幕シューティング

ChatGPT-5に他人の配信映像を見せたところ、思わぬ形で本格的な弾幕シューティングが生まれた。その生成過程とプレイ後の考察を記録する。

[2025/9/30]

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

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

[2025/9/29]

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

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

[2025/9/28]

【AI × 個人開発】 Chrome拡張の申請でつまずく落とし穴と対策

Chrome ウェブストアに拡張機能を申請した際のリジェクト体験談と、開発者が陥りやすい落とし穴をディープリサーチ。tabs 権限の誤用から、host_permissions の範囲、外部スクリプト禁止、リスティング不備、スパム判定まで、複数の事例をまとめました。

[2025/9/21]

[Programming] BASICの歴史: 家庭用PCと“すぐ動く”言語の黄金時代

BASICはなぜ広がり、なにを残したのか。Dartmouth BASICの起源、Altair BASICとMicrosoft BASIC、GW-BASIC/QBasic、MSX BASIC、当時の雑誌文化まで、手を動かしながら理解するための実践的ガイド。

[2025/9/18]

【緊急対策あり】npm史上最悪のワーム攻撃『Shai-Hulud』とTinyColor侵害の全貌

2025年9月中旬――npmパッケージを標的にした史上最大級のワーム型攻撃『Shai-Hulud』が発覚。TinyColorを含む500以上のパッケージが侵害され、開発者やCI環境に甚大なリスクを与えました。本記事では攻撃の手口、影響範囲、技術的リスク、開発者が取るべき対策を深掘りして解説します。

[2025/9/18]

[言語トレンド分析] PerlがTIOBE 10位に急浮上！本当に復活なのか？

TIOBE IndexでPerlが27位から10位に躍進。Perlと共に歩んできた筆者が、TIOBE・PYPL・RedMonk・Stack Overflow Surveyといったランキングを比較し、その背景と実態を深掘りします。

[2025/9/17]

[Programming] GPT-5-CodexはClaude Codeを超えたのか？比較レビュー

GPT-5-CodexはClaude Codeを超えたのか？性能・用途・安全性・開発体験の観点から徹底比較。最新のベンチマークやコミュニティの声も交えてまとめました。

[2025/9/14]

[Programming] Chrome拡張入門 Hello Worldから学ぶ最小の作り方講座

Chrome拡張機能の作り方を、初心者向けに最小構成で解説します。manifest.json・popup.html・popup.jsの3ファイルでHello Worldを表示し、さらに背景色を変える簡単な応用も紹介。自作拡張の第一歩に最適なチュートリアルです。

[2025/9/14]

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

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

[2025/9/12]

[Programming] Win32APIの今と昔 ― 古い技術が作用し続ける理由

Win32APIはもはや古い技術なのか？ 2000年以前に苦しみながら叩いたAPIが、25年後の今なお開発に役立っているという経験をもとに、Win32APIの思想と仕組み、そして現代的な技術（Web、Electron、WASMなど）との接続点を考察。自分の「過去のスキル」が無駄でなかったことを実感する記事。

[2025/9/8]

[Python] GmailでHTMLメールの画像が表示されない問題と解決法【Python実装】

PCでは見えるのにiPhoneのGmailアプリでは画像が表示されない…HTMLメール特有の落とし穴と、CIDインライン添付＋width指定による安定表示の方法を解説。Pythonコード付きで再現・解決手順をまとめました。

[2025/9/5]

[Vibe Coding] 数分で生まれたAI産タワーディフェンスは、終わりなきサイコホラーだった

スクショを見せただけでChatGPT5が作ったタワーディフェンス。その実態は、勝利条件のない“必敗型”ゲームであり、プレイヤーをじわじわ追い詰めるサイコホラー体験だった。

[2025/8/30]

[スマホ × AIコーディング] いつでもどこでもコーディング：スマホとAIで始めるモバイル開発革命

PCがなくても、スマホだけでAIにコードを書かせる時代が来た。本記事では「スマホ×AIコーディング」の現在地と近未来をリサーチ。利用できるアプリ、仕組み、課題、未来の展望を体系的にまとめます。

[2025/8/24]

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

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

[2025/8/23]

[Unicode] Unicodeとは何か ― 歴史とWindows/Python実例

文字化けの原因を歴史的背景から整理し、WindowsとPythonにおけるUnicodeの落とし穴と実務的な回避策を具体例とともに解説する記事。Real-ESRGANを日本語ファイル名で動かした際のトラブルをケーススタディに、ASCII一時退避やUTF-8統一の重要性を示す。

[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/25]

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

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

[2025/7/23]

【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/21]

【競プロ入門】競プロの難解ワード「セグ木」をAIと一緒に解読してみた

競技プログラミングで頻出の「セグメントツリー」。この記事では、a〜z の文字の種類数を区間で数えるという具体的な例を元に、ビット管理 + OR演算 + popcount によるセグメントツリーの活用法を図解付きで丁寧に解説します。

[2025/7/21]

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

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

[2025/7/20]

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

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

[2025/7/19]

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

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

[2025/7/17]

[Node.js] Node.js という“時代の申し子”：その誕生と爆発的成長の理由

JavaScriptを“ただのブラウザ用言語”から“世界を変える言語”に変えたNode.js。その誕生の背景から爆発的成長、PHPとの違い、現代のAI時代における役割まで──Node.jsの進化と時代性を一気に俯瞰できる解説記事です。

[2025/7/14]

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

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

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

[2025/7/14]

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

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

[2025/7/14]

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

[2025/7/13]

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

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

[2025/7/13]

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

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

[2025/7/11]

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

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

[2025/7/10]

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

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

[2025/7/10]

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

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

[2025/7/8]

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

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

[2025/7/6]

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

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

[2025/7/6]

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

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

[2025/7/6]

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

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