[JavaScript] 3D ROOM制作 2日目(午後) VR対応・エディタ・ROOM追加機能 (Three.js)
vanilla Three.jsのROOMアプリにWebXR VRモード、右クリックメニュー、カスタムROOMアップロード(IndexedDB保存・stats自動取得・info入力フォーム)、リアルタイム調整スライダー、サムネ撮影機能を追加した記録
vanilla Three.jsのROOMアプリにWebXR VRモード、右クリックメニュー、カスタムROOMアップロード(IndexedDB保存・stats自動取得・info入力フォーム)、リアルタイム調整スライダー、サムネ撮影機能を追加した記録
Three.js製ROOMアプリのPhase 2。セットアップウィザードUI、models.jsonからのサムネイルグリッド表示、VRMアップロードとIndexedDB保存、プロシージャルスカイボックス4プリセット(Night/Sunset/Day/WIRED)をvanilla JSで実装した記録
Three.js + vanilla JSで、ZIPを解凍してサーバーに置くだけで動く3D ROOM機能を構築。GLB部屋モデル、VRMアバター、BVH衝突判定、3人称カメラ、ポータルリンクまで、バンドラー不要のピュアESM構成で実装した記録
Three.js の RenderTarget ミニマップを、円形マスク(alphaMap)で切り抜き、フレームPNGを重ねて HUD 化。CanvasTexture で日付・時刻・称号を描画し、サブカメラをプレイヤー追従&スムーズ回転させる。UIの重ね順(renderOrder)、depthTest/depthWrite、toneMapped など色と透過の罠もまとめる。
Three.jsでミニマップを作る実用実装。サブカメラ(俯瞰)→WebGLRenderTarget→Plane表示の基本から、FOV/アスペクト比を使った左上固定、キャラ回転に追従するカーナビ式回転、atan2で角度差を-π〜+πに正規化してlerpでスムーズ化する手法までまとめる。
Three.jsで“動き”を作るとき最初に覚えるべき sin/cos パターンを、振幅・周波数・オフセットの考え方から、位置/回転/色への適用例まで短くまとめた。
JavaScript / Three.js における Quaternion の実践編。WebXR の視線追従、カメラ回転、キャラクターの向き制御、入力処理と補間、multiply と premultiply の使い分けなど、実際のゲーム実装で必要となるパターンを具体例と共に整理する。
Three.js/JavaScript の Quaternion 補間で必ず出てくる Slerp を数式なしで解説。lerp がダメな理由、一定角速度に見える仕組み、q と -q が同じ回転になることから生まれる最短経路の話を、実装者の視点でわかりやすくまとめる。
JavaScript / Three.js における Quaternion.multiply の順序が持つ意味を、数学なしで直感的に解説。ローカル軸での回転とワールド軸での回転の違い、なぜ順序を逆にすると結果が変わるのか、“回転=作用”として理解するための基礎をまとめる。
Three.js / JavaScript でQuaternionを扱う際に頻発する“やってはいけない実装”をまとめた記事。足して壊れる例、lerpによる破綻、multiplyの順序ミス、正規化の欠落、Eulerとの混在など、実務者が陥りやすいミスを具体的に解説し、安全な回転実装のための指針を示す。
JavaScript / Three.js において、オイラー角がなぜ壊れやすいのかを解説。回転順序の意味、ジンバルロックが起きる必然性、角度加算設計の限界を整理し、Quaternionに進む前の理解を固める。
JavaScript/Three.jsでQuaternionを使う入門記事。オイラー角→Quaternion変換、回転の合成(multiply)、補間(slerp)だけに集中し、ジンバルロックや補間の破綻を避ける実践手順をまとめる。
Three.jsでレールを配置する際、直線同士をS字(逆曲率)で自然につなぐ方法を解説。中点M、forward/rightベクトル、control点の設計、tangentでの向き合わせ、curveStrength調整まで、実装の勘所を整理する。
Three.jsで列車を動かすだけの実装から、複数列車・路線・停車制御を持つ運行システムへ進化させるまでの設計判断、バグ、修正、思考過程をまとめた実践記事。
Three.jsで線路モデルをCurve(QuadraticBezierCurve3)から生成し、配置したレールの上を列車モデルが走るところまで実装した記録。分岐・繋ぎ目・高さ(y)による破綻と、その回避策(height=0、走行用Curve保存、1両編成)をまとめる。
nw_wrld に影響を受け、WebAudio の解析結果を three.js に直接接続することで、サウンドリアクティブなジオメトリアニメーションを実装した。BoxGeometry を中心に、状態管理・色制御・ジオメトリ切り替えの設計をまとめる。
Three.js製RPGバトルを完成形へ持っていく実装メモ。Battleクラスに敵ターン(enemyフェーズ)を追加し、HPによる勝敗判定、敵の接近→攻撃→待機→帰還アニメ、delta秒ベースのwaitDuration管理、UI表示やSEの多重発火を防ぐフラグ設計を解説。
Three.jsとWebXRで動作するMessageBoxを、ゲームループ主導・入力制御・自動クローズ対応で実装した。CanvasTextureの限界や、あえて深追いしなかった設計判断も含めた実装ログ。
Three.js / WebXR 開発者が、スマートフォンを“補助脳”として活用するための実践ガイド。vscode.dev + Codespaces を軸に、PlayCode や Termux + Code Server まで含めた現実的な選択肢と使い分けをまとめる。
ZoneベースのBGM切り替えで起きがちな違和感を、JSONによるデータ管理とsound.jsへの責務集約、フェードイン・フェードアウト設計で解決する。Three.jsやWebXRに依存しないサウンド設計の考え方。
three.jsでSpriteとCanvasTextureを使い、sin波に沿って生成される星形スプライト演出を実装した記録。単調さの解消、多方向化、やりすぎて破綻した設計を戻した判断まで含めて整理する。
Three.jsのMarchingCubes(Metaballs)を実際の箱庭シーンに配置して動かした記録。update()必須の罠、透明マテリアルとdepthWrite、world座標からMetaballs空間への変換など、実装で詰まった点を中心にまとめる。
Three.jsのタイル地形をJSON/ASCII mapで管理し、legendにtype/zone/textureを集約。地面コライダーのzoneをプレイヤーへ伝播し、ZONE_DEFSでエンカウントを制御する設計と実装手順をまとめる。
three.jsを使ってRPGのバトルシステムをゼロから実装。エンカウント管理、フェーズ駆動のBattleクラス設計、敵出現演出、コマンドUI、プレイヤー行動アニメーション、効果音・BGM制御までを段階的に解説する。
Three.jsのMMDLoaderを使ってPMXモデルにVPD(ポーズ)を適用する方法を解説する。自前パースでハマりやすいポイントや、CCDIKSolverとMMDAnimationHelper.pose()を使った安定した実装方法、VMDとの使い分けについてまとめる。
Three.jsでDOMを使わず、PlaneとCanvasTextureを使ってRPG風のコマンドUIを実装する過程を整理する。表示・非表示、選択移動、入力処理の分離までを扱い、サブメニュー実装手前で区切る。
Three.jsのPlaneGeometryを地形として扱い、高さ関数による平地・山・クレーター生成、ワールド座標による継ぎ目解消、JSONとグリッド設計によるマップ管理、重力と接地処理による歩行可能な世界構築までをまとめる。
Three.jsとWebXRで実装したコンパスUIをベースに、NPCとプレイヤーの相対位置を計算して表示するドラゴンレーダー風UIを実装。3Dゲームのミニマップと同等の情報を、VR向けに最適化して表現する設計と実装ポイントを解説する。
Three.jsとWebXRでXRControllerModelFactoryを使い、両手のVRコントローラを正しく表示する方法と、playerRigに追従する右手コンパスUIの実装手順を解説。VR向けUI設計として、ミニマップではなくコンパスを選ぶ理由も具体的に説明する。
Three.jsでPC向けミニマップを実装する方法を解説。viewportとscissorを使った複数カメラ描画の仕組み、実装例、よくある疑問点、そしてWebXR(VR)では同じ方法が難しい理由まで具体的にまとめる。
three.jsで地球の表面を走るキャラクターを実装する。球面座標(theta/phi)で座標を求め、地球法線でキャラの上方向を合わせ、lookAtで進行方向を向かせる。モデルの前方向補正や、2体をMath.PIずらして周回させる実装もまとめる。
Three.js + WebXRで、段差やスロープを自然に上がれる移動処理を実装する。VRではロジックを変えず、カメラを制御しない設計が重要になる。
Box3による単純な衝突判定を拡張し、colliderとtype設計を導入することで、three.js上で段差の上り下りが可能なキャラクター移動を実装する。
Three.js と WebXR を使い、CanvasTexture を3Dメッシュに貼り付けてスクロール可能なテキストUIを実装する方法を解説。Raycasterを用いたUIイベント設計とドラッグスクロールの実装例。
複数ゲームを切り替えるためのシンプルなシーン設計
Three.jsでGameBox内に複数ボールのバウンドアニメーションを実装する過程を解説。Canvas2D由来のロジックをVector3ベースに移植し、deltaTime管理、壁反射、ボール同士の衝突判定、残像表現を行う。
three.jsとJavaScriptで構築したGameBox構造を使い、2作目となるシンプルなシューティングゲームを実装。VRとPCの両方に対応したUI制御、ゲームの開始・終了・リスタート、差し替え可能なGameModule設計について解説する。
Three.jsで花火を実装する過程で遭遇した粒子が消えない問題、filterの罠、PointsとBufferGeometryの使い方、減速して止まり落下する演出など、プロっぽく見せるための考え方と実装ポイントを整理した記録。
Three.jsでparticleをfilterで削除したのに消えない原因は、MeshをSceneからremoveする前に参照を失っていることだった。配列管理とScene管理の違い、正しいdispose順序、ゴーストが生まれる仕組みを実例付きで解説する。
前回紹介したGameBoxアーキテクチャを土台に、Three.jsでブロック崩しを実装完了まで構築する。差し替え可能なGameModule設計、Box3による当たり判定、CanvasTextureを使ったGAME OVER表示、UIボタンとキー入力の統合など、WebXRも見据えた構成を解説する。
requestAnimationFrame / setAnimationLoop ではフレーム間隔は保証されない。deltaTime がワープすることで起きる物理破綻と、started フラグ・delta clamp による現実的な解決策を整理する。
Three.js と WebXR を使って、VR空間に配置できる差し替え可能なゲーム用ボックスを実装。ブロック崩しを例に、THREE.Group を基軸にした設計、ゲームモジュールの分離、2Dロジックを3D空間で動かす考え方を整理します。
Three.js と WebXR を使い、VideoTexture をクラス設計で管理し、プレイリスト再生・曲送り・サムネ表示・UI操作までを一体化した動画プレイヤーを実装する方法を解説します
Three.jsでPMX / VMDを扱う方法を整理。MMDLoaderによるモデル読み込み、VMDモーションの適用、MMDAnimationHelperでの更新処理、VMDなしの場合の扱い、physics設定の注意点を解説する。
Three.jsでCanvasTextureとSpriteを使い、VR/PC両対応でキャラクターの頭上にセリフを表示する方法を解説します。改行対応や簡単な装飾、データ駆動の設計についても触れます。
VRではなぜ衝突判定が直感通りにいかないのか。Three.jsとWebXRを使ったVR開発において、playerRig基準の衝突判定設計、ルームスケール移動との関係、Box3とMatrix4の正しい使い分けを実装ベースで解説する。
Three.jsのWebXRでVRコントローラのレーザーポインタを表示し、RaycasterでUIボタン(Plane)へ当たり判定を行い、トリガー入力でonClickを発火させる実装を解説。レイ方向の毎フレーム更新(matrixWorld→origin/direction)とinputSources/gamepad入力の取得方法、よくある落とし穴もまとめる。
Three.jsにおけるVector3は、座標・方向・速度・力・法線など、3D空間を扱うすべての計算の中心にある。本記事では、Vector3の基礎から応用、便利な使い方、ハマりがちな罠まで体系的にまとめます。
WebXR環境でキャラクターを移動・回転させるための最小コード構成(playerRig・移動・回転・AnimationLoop)をシンプルにまとめた記録。
Three.jsでVideoTextureを使い、サイズ調整やUV操作、色補正、3D形状への貼り付け、ShaderMaterialによるエフェクト加工など、動画表示をカスタムするためのテクニックをまとめた記事です。
Three.jsのCSS3DRendererは軽く見えるが、DOMとWebGLを同時に扱うと極端に重くなり、iframeを3D空間に配置するとブラウザがGPU fallbackを引き起こす。実際に遭遇した症状と原因、CSS3DRendererの設計思想、WebGLとの正しい組み合わせ方を解説。
Unityで作成したC#コードをWebで動作させるための仕組みを、JavaScriptやWebAssemblyを使ってどのように実現するかを解説します。
Three.jsを使ってVR環境を作成し、Meta Quest 2でのVRゲームを実装する方法をステップバイステップで解説。VRモードのカメラ制御やコントローラー入力処理の実装を学びましょう。
Three.jsを使用して、キャラクターの周りを回転する魔法陣のアニメーションを実装しました。魔法陣は回転しながら、点滅エフェクトも加わり、視覚的に魅力的な演出が可能です。
BlenderからエクスポートしたモデルがThree.jsで正しく明るさが反映されない場合の原因とその修正方法を紹介します。色空間の不一致、`Emission`設定、`Metallic`と`Roughness`の調整方法について説明します。
three.js で表示される「KHR_materials_pbrSpecularGlossiness」の警告は、`Specular Glossiness` モードを `Metallic/Roughness` モードに変換することで解決できます。本記事ではBlenderを使った変換方法と、警告回避のポイントを紹介します。
メテオストライクのテクスチャ作成、落下エフェクト、発光効果などを組み合わせて、リアルなメテオストライクを実現する方法について解説します。
本記事では、Three.jsを使用して、キャラクターが指定された経路を自動で歩き、衝突判定を行う仕組みを実装する方法を紹介します。
このチュートリアルでは、Three.jsを使って雪、雨、クリスマスツリー、点滅するライトを作り、クリスマスの雰囲気を出す方法を解説します。
地球と月の模型をThree.jsで作成し、リアルな動きとエフェクトを加える方法をステップバイステップで学びます。
Three.jsの基本を使用し、魔法陣の回転アニメーションと月の光源を設定してリアルなエフェクトを作成する方法を学びます。
Three.jsでスポットライトを使用し、シーンにダイナミックな照明を追加する方法について解説。スポットライトの基本設定、ターゲット、影の設定などを学べます。
スタックトレースを利用して、エラー発生箇所や非同期処理のデバッグを効率化する方法を学びます。実践的な例も紹介。
この記事では、Three.jsでのキューブマップやスフェリカルマップの設定、オブジェクトの回転、アニメーションの管理などを実際のコードを交えて解説します。
Three.jsを使ってGLB形式の3Dキャラクターを作成、読み込み、アニメーションを追加する方法を紹介。さらに、カメラの向きに合わせたキャラクターの移動処理も解説。
Three.jsでのキャラクターの移動、衝突判定、反発処理を実装する方法を詳細に解説します。先読み処理による壁のめり込み回避も紹介。
Three.jsの開発を効率化するために役立つ「Three.JS Snippets」の使い方、特徴、インストール方法について詳しく解説します。React Three Fiber (R3F)にも対応!
Three.jsを用いた3Dゲーム開発の基本。カメラの回転、プレイヤーキャラクターの移動、弾の発射、衝突判定を実装し、ゲームとして機能させる方法を紹介します。
HTML5 Canvasを使ったボスバトルの実装まとめ。楕円の当たり判定や弾幕処理、HPゲージ、フェードイン演出、反射処理、撃破判定など、ゲームとしての要素が一気に揃った1日の記録。
ゲームやアニメーションで使えるイージング処理のパターンを、線形、イーズイン・イーズアウト、三角関数を使った方法を交えて説明します。
UNIX哲学の考え方を応用し、物理演算やエフェクトの細かい要素を組み合わせることで、大規模なゲーム演出を実現した実装方法を解説。ゲーム開発における効率的なアプローチと技術的な工夫を紹介。
A-Frameとthree-vrmを使って、JavaScriptでVRMアバターをWebVRコンテンツに組み込み、表情やポージング、カメラ追従を簡単に実装する方法を紹介します。
ゲーム開発における初期設計の重要性を解説。複雑化した状態管理をクラス設計とモジュール化を使って整理し、拡張性の高いゲームを作るための方法を紹介します。
Math.atan2 は、2D 座標系における角度を計算するための重要な関数です。この記事では、その基本的な使い方と実際の活用事例について解説します。
本記事では、シューティングゲームにおける敵キャラの移動パターンを、数学的な公式と共に実装する方法を解説します。ベクトル演算、三角関数、乱数を使って、ゲーム内での敵キャラの動きをスムーズに制御する技術を学びます。
仮想ボタンの位置をドラッグで動かせるようにし、タッチやマウス操作でボタンを操作できるようにする実装方法を解説します。ポーズ画面のボタンリセット機能にも対応。
IndexedDBを使った音声アセットの管理において発生した「TransactionInactiveError」を解決する方法を、具体的なコード例とともに解説します。トランザクション管理と非同期処理のポイントを学びましょう。
JavaScriptの`requestAnimationFrame`に関する問題解決の実際の事例を紹介。ゲーム開発でよく直面するアニメーションのトラブルシューティングと、それに対する効果的な解決策を解説します。
ブロック崩しゲームを通してベクトル演算を学ぼう。ボールの進行方向、反射角度、速度の増加など、ゲームに必要な物理的な計算を解説。パドルの中央と端でボールの反射角度が変わるロジックも紹介。
ゲーム開発の描画処理で重要な `ctx.save()`, `ctx.restore()`, `ctx.translate()`, `ctx.scale()` の基本をサンプルコードとともに紹介。パフォーマンス向上やスムーズな描画を実現するテクニックを学びます。
JavaScript の this はその呼び出し元に依存するため、イベントリスナー内での挙動が異なります。this を正しく制御するために、bind() やアロー関数を活用する方法を解説します。
ゲーム開発において、最初の設計段階でイベントリスナーや状態管理の管理方法を正しく決めることで、後の開発がスムーズに進みます。本記事では、イベントリスナーを一元管理する方法とその重要性について紹介します。
この記事では、Phaser.jsを使ったゲーム開発と、ネイティブCanvasでの開発の違いを紹介し、ブロック崩しゲームを作りながら、ライブラリと手動実装の選び方について考察します。
IndexedDBをネイティブAPIを使って実装する方法を紹介。非同期処理を駆使してデータの保存、取得、削除を行う手法を解説します。
本記事では、JavaScriptでcanvasとHTML/CSSのサイズを同期させる方法と、レスポンシブデザインを実現するための基本的な手法について解説します。
音声データの事前デコードとキャッシュ管理を行い、再生時の遅延やフリーズを防ぐためのベストプラクティスを紹介します。
JavaScriptを使ってゲーム内での衝突判定を実装するための基本的な方法を解説します。ピタゴラスの定理と距離計算、衝突判定を使ったリアルな動きの作り方を学べます。
ゲームやウェブアプリケーションで使われるスプライトシートアニメーションの基礎を学び、JavaScriptを使ってキャラクターアニメーションを実装する方法を解説します。
Canvasでのアニメーション処理とフレームレートの管理方法について詳しく解説します。requestAnimationFrameやperformance.now()を使用したスムーズな動作の実現方法や、開発中の躓きやテクニックについても紹介。
本記事では、JavaScriptのイベントオブジェクトの基礎から応用までを解説。イベントハンドラ内で活用できるプロパティやメソッドを紹介し、タッチ、マウス、キーボードイベントの使い方を具体例を交えて深掘りします。
JavaScriptのDOM操作における効率的なテクニックとパフォーマンス最適化方法を深堀り。MutationObserverやIntersectionObserverの使用法を解説し、より高度な技術でWebアプリケーションを最適化する方法を学びます。
HTML5の`<canvas>`タグは、JavaScriptで描画やアニメーションを行うための強力なツールです。このタグを使って簡単なシューティングゲームや図形を描く方法を学びましょう。
Socket.ioを使用したリアルタイム通信を実装する方法を学びます。基本的なセットアップから、ユーザー認証、接続管理、スケーラビリティを考慮したアプローチまで、実践的なチャットアプリケーションの作り方を解説。
この記事では、JSのネットワーク通信に関する基本的な概念を探り、P2Pチャットの実装方法、効率的なマルチキャスト通信、リアルタイムアプリケーションにおけるSocket.ioとWebSocketの違いについて説明します。
JSコードを安全に配布するためのアプローチを解説。ネイティブ化、CI/CD、配布方法、ライセンス認証など実用的な視点で整理しました。
JavaScriptコードの難読化(Obfuscation)の基礎を解説。Chrome拡張のようにソースが見えてしまう環境で、どこまで保護できるか、ツールや実例を交えて紹介。
Mermaid / Graphviz / Cytoscape.js / elkjs を使った図式化ライブラリの最小サンプルと用途比較
JavaScriptとWeb Audio APIを使って、昔懐かしいBEEP文化をブラウザで再現。波形・エンベロープ・ビブラート・トレモロなどを組み合わせ、シンプルな通知音からゲーム効果音まで自由自在に生成する方法を紹介します。
JavaScriptにおけるUnicodeと文字列処理の基礎をわかりやすく解説。文字化けの原因、サロゲートペア、コードポイントの正しい扱い方、正規表現のuフラグの使い方など、実践的なTipsを多数掲載。
JavaScript は安全なサンドボックス言語として設計されているため、メモリ操作やネイティブレベルの高速処理には不向きです。そんな「JSの限界」を補うために登場したのが WebAssembly (WASM)。この記事では、なぜ必要になったのか、仕組みと役割分担、サンプルコードを交えて分かりやすく解説します。
関数に設定や状態を持たせるテクニックは、グローバル変数を減らし、シンプルな設計を可能にします。Proxy・getter・Hidden Class最適化・実測ベンチマークまで幅広く網羅し、実務で役立つベストプラクティスを紹介。
WebSocket + WebRTC で構築したP2Pネットワーク上に、トークンパッシング(バケツリレー)機構を実装。仕組み・用途・実装例を交えて徹底解説。
JavaScriptで値の型を調べる方法として有名な typeof と instanceof。でも、「nullはobject?」「配列はどっちで判定すればいいの?」と混乱したことはありませんか?本記事では、typeofとinstanceofのそれぞれの特徴と違いをやさしく解説
自由な言語JavaScriptに潜む落とし穴。XSSやnpm事件を通して、安全に使いこなすための設計と心得を解説。
JavaScriptとWebRTC(simple-peer)を使って、ゲームのアセットZIPファイルをP2Pで双方向送受信する仕組みを構築しました。チャンク分割による転送、Blob生成、ZIP展開、IndexedDBへの保存まで、実装手順を完全公開。デモ付きで応用可能な設計思想を解説。
JavaScriptの[[Prototype]]ってなに?見て見ぬふりしていた謎の表示を深掘りしながら、プロトタイプ継承の仕組みやclassとの違い、プロトタイプチェーンの構造までやさしく解説します。
かつてカッティングプロッターで創り上げた一点物のベクター作品たち。そのベジェ曲線の軌跡を、JavaScriptとSVGで現代に再構築する試み。 画像トレース、Webビューア、レイヤー操作、そして未来の簡易エディタへ──。 創作と技術の交差点で、懐かしい作品ともう一度出会うための構想記録。
WebRTCとsimple-peerを使ってP2P通信を実現!signal交換の自動化に成功し、チャットとZIPファイルの送受信も完全動作。Node.jsによる軽量なシグナリングサーバ構成と接続の流れを実例付きで解説。
Node.js と WebSocket を使ってシンプルなシグナリングサーバを構築し、無料のクラウドサービス Koyeb にデプロイする手順をまとめました。GitHub連携から起動確認、実際の接続テストまで、P2P通信の基盤となるシステムを最短で構築できます。
JavaScriptだけで、ブラウザ間でZIPファイルの送受信ができる!? チャンク送信+Blob再構築+チャット対応のフル実装。
Webアプリ上でのP2P通信にチャレンジ!「WebRTCは難しそう…」と思っていたけれど、simple-peerを使えば意外とシンプルに実装できました。この記事では、実際の接続手順、initiator問題、シグナリングの中身までを丁寧に解説し、将来的な分散アプリ構想まで視野に入れたP2Pの可能性を探ります。
JavaScriptでのゲーム開発やWebアプリ内で P2P通信を用いたアセット共有・同期 を行う構想のメモ
JavaScriptでデータをブラウザに保存する方法としてよく使われる localStorage と sessionStorage。この記事では、それぞれの特徴や使い方、メリット・デメリット、そしてセキュリティ面や注意点まで、実例を交えてわかりやすく解説します。
JavaScriptでランダムな挙動を実現したいときに使う Math.random()。この記事では、基本的な使い方から、配列シャッフル・重複なしの抽選・ランダムな数値範囲の指定・実用コードパターンまで、幅広く解説します。開発に“運”を取り入れたいとき、この記事がその第一歩になるでしょう。
JavaScriptで値の型を調べる方法として有名な typeof と instanceof。でも、「nullはobject?」「配列はどっちで判定すればいいの?」と混乱したことはありませんか?本記事では、typeofとinstanceofのそれぞれの特徴と違いをやさしく解説
JavaScriptで動的に追加された要素にイベントが反応しない経験、ありませんか?この記事では、addEventListenerを使った基本的なイベント処理から、イベントデリゲーションの考え方と使い方、実践例までをやさしく解説します。動的UIやカードゲームなどの開発にも役立つ内容です。
window.confirm()の味気ないポップアップにサヨナラ!この記事では、HTML+CSS+JavaScriptだけで作れるカスタムダイアログの実装方法を紹介します。UIの一貫性を保ちつつ、使いやすくて拡張可能なダイアログを自作する方法を、実例とともに解説します。
JavaScriptで画像や動画を表示しようとしたとき、見慣れない「blob:〜」というURLの謎。この記事では createObjectURL() の仕組みと、BlobとFileの違い、IndexedDBとの相性、そして「なぜ画像が表示されないのか?」という問題に対する本質的な解決策を、実体験ベースで解説
最近、自作ゲームの開発で「これは便利!」と思ったライブラリを厳選して紹介します。それぞれ簡単な使い方付きで、あなたの制作にもすぐ役立つはずです。
Webゲーム開発で素材の保存に悩んだら?localStorageからの卒業、IndexedDBの導入でZIPデータやサムネイルを自在に管理する方法を実例で紹介。
本記事では、軽量3Dライブラリ「Three.js」を使って、Web上で画像を立体的に動かす入門的な方法を丁寧に解説。最小構成から回転アニメーションまで、必要なコードはすべて紹介。エラーの対処法も含めて、3Dの“最初の一歩”を一緒に踏み出しましょう。
ユーザーのゲーム設定や履歴を保存したい?localStorageを使えば、ブラウザにデータを永続的に保存できます。この記事では、localStorageの基礎から、JSONを使った設定保存、プレイ履歴の管理まで、ゲーム開発に活用できる実用的なテクニックを初心者向けに解説します。
多言語対応(i18n)は、ゲームやWebアプリを世界に届けるために欠かせない技術です。この記事では、JavaScriptとJSONを使ったシンプルで実用的なi18nの実装方法を初心者向けに解説します。言語ファイルの設計から動的なUI切り替え、localStorageを使った設定の保存までをステップ形式で紹介します。
JavaScriptで非同期データを扱ううえで欠かせないのが「JSON」。この記事では、基本構文からfetch()での読み込み、データの加工、HTMLへの反映方法までをやさしく解説。初心者がつまずきやすい [object Object] や undefined 問題、非同期処理のポイントも実例付きで紹介します。
この記事では、JavaScriptのクラスを実際に育てていく過程を通して、リファクタリングの視点や責務の見直し、状態管理の整理など、実践的な設計のヒントを紹介します。「クラスを最初から完璧に作る必要はない」と思えるようになる、等身大のリファクタ講座です。
この記事では、UI機能を作る中で自然に必要になったクラス設計の導入プロセスを、実体験ベースで丁寧に解説します。thisの意味、状態のカプセル化、メソッド化、そして再利用性の話まで。「クラスって難しそう」と感じていた方にこそ読んでほしい入門講座です。
本記事では、sleep関数のようなdelay()の自作コードを題材に、それぞれの要素を基礎から丁寧に解説します。初心者でも理解できるように、図解・例付きで解説します。
JavaScriptを活用したアニメーション大全:手作りエフェクトで魅せるUI演出テクニック集
JavaScriptで複雑な処理やWeb通信を行うときに避けて通れない「非同期処理」。「なんでコードが途中で止まるの?」「asyncとawaitって何?」と悩んだことはありませんか?本記事では、非同期処理の基礎から、async/awaitの実践的な使い方まで、初心者にもやさしく解説します。
Canvasで画像を分割し、CSS GridとJavaScriptで合体アニメーションを実現。非同期処理、setTimeout、dataURLの使い方も詳しく解説。再利用可能なImageModule.js付き。