JavaScript

2025-07-13 | lain

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

カテゴリ： JavaScript

タグ： #初心者向け#入門講座#フロントエンド#Web開発#インタラクティブ表現#イベントリスナー#イベントデリゲーション#DOM操作#動的要素#UI開発#学習記事

2025-07-13 | lain

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

カテゴリ： JavaScript

タグ： #JavaScript#UIデザイン#カスタムダイアログ#confirmダイアログ#HTML/CSS#UX改善#初心者向け#Web開発

2025-07-11 | lain

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

カテゴリ： JavaScript

タグ： #JavaScript#Blob#IndexedDB#File API#Web開発#バグ事例

2025-07-10 | lain

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

カテゴリ： JavaScript

タグ： #JavaScript#Webゲーム#フロントエンド#ライブラリ紹介#ゲーム開発#Howler.js#GSAP#JSZip#idb#Dexie.js

2025-07-10 | lain

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

カテゴリ： JavaScript

タグ： #IndexedDB#idb#Webゲーム開発#localStorage#フロントエンド#ブラウザストレージ#HTML5#GameDev#ZIP管理

2025-07-08 | lain

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

カテゴリ： JavaScript

タグ： #初心者向け#Three.js#WebGL#3Dプログラミング#HTML#初心者向け#入門講座#フロントエンド#Web開発#インタラクティブ表現

2025-07-02 | lain

クラスを作って終わりではなく、使いながら少しずつ育てていくことが大切。今回はその気づきから始まった「クラスのリファクタ設計」について、実例と一緒に丁寧に解説していきます。

カテゴリ： JavaScript

タグ： #初心者向け#クラス設計#オブジェクト指向#リファクタリング#開発メモ#UI開発#実装ノウハウ

2026-01-31 | lain

前回の RenderTarget + サブカメラ方式ミニマップを、円形マスク（alphaMap）とUIフレーム重ね、CanvasTexture で日時・称号テキストまで表示する“ゲームHUD”へ進化。renderOrder / depthTest / toneMapped のハマり所も整理する。

カテゴリ： JavaScript

タグ： #Three.js#WebGL#MiniMap#RenderTarget#SubCamera#UI#CanvasTexture#alphaMap#HUD

2026-01-31 | lain

Three.jsでゲーム向けミニマップを実装。俯瞰サブカメラの描画をWebGLRenderTargetに出力し、Planeへ貼り付けて画面左上に固定。さらにキャラクターの進行方向に合わせてミニマップを回転させ、atan2補正＋lerpで急回転を滑らかにする。

カテゴリ： JavaScript

タグ： #three.js#WebGL#game-dev#minimap#render-target#camera#UI

カテゴリ：JavaScript