WebGL & Three.js
Three.jsのInstancedMeshで1万個を描画する｜更新・色・クリック判定
同じ箱を1万個並べ、通常MeshとInstancedMeshのdraw call数を実測。setMatrixAtの更新通知、setColorAt、instanceIdとデータIDの対応まで動くコードで確かめます。
CATEGORY
JavaScript
JavaScriptに関する基礎、実装例、トラブル解決の記事をまとめています。
125ARTICLES
WebGL & Three.js
Three.jsでBloomをかける｜EffectComposerとLayersによる選択的な発光
RenderPass・UnrealBloomPass・OutputPassでThree.jsにBloomを追加。Layersで選んだMeshだけを発光源にし、元画像の二重加算を避ける実装と、resize・DPR・白飛びの切り分けを解説します。
JavaScript
HTML dialogでモーダルを作る｜確認・入力・Esc・フォーカス復帰の実装
HTML dialogのshowModalとform method="dialog"で確認・入力モーダルを実装。returnValue、Escとキャンセル、外側クリック、入力検証、フォーカス復帰を動くコードで確認します。
JavaScript
IME変換中のEnter送信を防ぐ｜isComposingとReact・Vueの実装
日本語の変換確定でチャットが送られる問題を、isComposing・compositionイベント・229の補助判定で切り分けます。JavaScript、React、Vueのtextarea実装と実機確認表を掲載。
Vue.js
NuxtのHydration mismatchを直す｜乱数・日付・画面幅・データ取得の切り分け
NuxtのHydration mismatchを、警告が出るページと修正版で比較。useState・useFetch・onMounted・ClientOnlyの役割を分け、日付や画面幅、DOMの不一致を直します。
Vue.js
PiniaへVuexを移行する｜setup store・状態の復元・Nuxtの初期化
Vuexのstate・getters・mutations・actionsをPiniaへ移す対応表と、お気に入り機能の実装例。storeToRefs、setup storeのリセット、保存失敗の扱い、NuxtのSSR初期化とブラウザー保存の復元を分けて解説します。
JavaScript
PlaywrightのtoHaveScreenshotで画像比較｜基準作成・崩れ検出・差分更新の手順
Playwrightで画面の見た目を比較する手順を、動くサンプルで解説。データと画面幅の固定、toHaveScreenshotのthreshold・maxDiffPixels・mask、基準画像の限定更新とCIでの管理を実測結果から確認します。
WebGL & Three.js
Three.js Materialの種類と使い方｜選び方・変更・透明度を解説
Three.jsのMaterialを目的別に比較し、MeshBasic・Standard・Physical・Toon・Matcapなどの選び方、生成後の変更、透明度、side、wireframe、needsUpdate、disposeまで初心者向けに解説します。
JavaScript
ESLint・Prettier・husky・lint-stagedの設定｜部分stageを守るコミット前チェック
husky 9とlint-stagedで、ESLint・Prettierをコミット前に実行する設定例。flat config、部分stage、lint失敗時の復元、整形差分の分離、CIの全体チェックを実際のGitで確認します。
JavaScript
JavaScriptをTypeScriptへ段階的に移行する｜allowJs・checkJs・strictの実践例
動いているJavaScriptを、型検査の導入、JSDocでの検査、関数1本のTS化へ段階的に移す方法。3段階のtsconfigと実行例で、allowJs・checkJs・strict、Viteとの役割分担を確認します。
WebGL & Three.js
Three.jsのカメラをスクロールで動かす｜GSAPで位置と注視点を連動させる
Three.jsのカメラ位置と注視点をGSAP ScrollTriggerで同時に補間する方法。固定canvasとHTML本文の実行例で、逆スクロール、画角調整、reduced-motion、後片付けまで確認します。
JavaScript
GitHub ActionsのNode.jsテストを整える｜setup-nodeのcache・matrix・concurrency
GitHub Actionsでnpmのキャッシュ、Node×OSのmatrix、古い実行のキャンセルを設定する方法。ルートとapps/webの完成YAML、npm ciを省かない理由、工程別の時間比較まで解説します。
React
React 19のuseActionStateでフォーム送信｜pending・エラー時の入力保持・成功時のリセット
React 19のuseActionStateとuseFormStatusでフォーム送信を実装。引数の順番、送信中の無効化、失敗時に入力を残して成功時だけ消す方法を、Viteで動くコードと検証結果で解説します。
React
ReactでGSAPを使う方法｜useGSAP・contextSafeとStrictModeの後片付け
ReactのGSAPをscope・dependencies・revertOnUpdateで作成・破棄する実例。contextSafeとイベント解除の違いを整理し、StrictMode、props更新、ScrollTrigger、取り外し後の残存を2枚のカードで確認します。
JavaScript
TypeScriptでfetchのレスポンスを型付けする｜unknown・型ガード・Zodの実行例
as Userで型を付けても、APIから届くJSONは検証されません。unknownで受ける型ガードとZodの実装を比較し、整形済みdataの返却、HTTP・JSON・検証エラーの分岐まで動かして確認します。
JavaScript
Vitestの使い方｜vi.fn・vi.mockでfetchを差し替える最小構成
VitestでAPIを呼ぶ関数をテストする最小構成を紹介。vi.fnとvi.stubGlobalによるfetchの差し替え、vi.mockでのモジュール置換、日時の固定と復元、coverage設定まで、実行確認済みのコードで解説します。
WebGL & Three.js
Three.jsでglTF・GLBを読み込む｜GLTFLoaderの表示・サイズ調整・アニメーション
GLTFLoaderでモデルを読み込み、Box3と親Groupでサイズと中心を調整。AnimationMixerの再生・切替、Dracoなどの設定、モデルが見えないときの確認順を実行例で解説します。
JavaScript
ResizeObserverの使い方｜canvasのサイズ追従とloopエラーを再現して直す
ResizeObserverで要素の幅変更にcanvasを追従させる実装例。contentRect・borderBoxSize・device pixelの違い、rAFだけでは止まらない循環更新、監視終了時の処理まで実測で確認します。
JavaScript
GSAP ScrollTriggerのsnap｜吸着先・方向・戻ってしまう原因を実例で確認
ScrollTriggerのsnapを数値・配列・ラベル・関数で使い分ける方法。labelsとlabelsDirectional、directionalとinertiaの違いを、停止位置を比較できるコードと確認表で解説します。
JavaScript
fetchの古い結果が最新の表示を上書きする原因と対策｜AbortControllerと連番ID
検索入力ごとのfetchで応答順が逆転する問題を再現し、連番IDとAbortControllerで対策します。古い成功・エラー・finally、入力のクリア、画面破棄まで確認する動くコード付きです。
WebGL & Three.js
Three.js Raycasterでクリック・ホバー判定｜canvas座標とドラッグ除外
Three.jsの物体をクリック・タップで選ぶ方法。canvas内の座標変換、入れ子Meshの判定、ホバー色の復元、ドラッグを選択から除外する処理を、動作確認済みコードで解説します。
JavaScript
PlaywrightのstorageStateでログインを共有する｜setup projectと期限切れ対策
Playwrightでログインを1回行い、storageStateを各テストへ渡す方法。auth.setup.ts、projectsの依存設定、ログイン後のテストを掲載し、期限切れ・複数ロール・CIでの扱いを説明します。
React
Reactのスケルトン表示｜300ms遅延とSuspense・useTransitionの使い分け
Reactで実カードと寸法を揃えたスケルトンを作ります。短い待ち時間では表示を遅らせ、Suspenseのfallbackと通常のloading状態を使い分け、useTransitionで表示済みの内容を保つ実装を解説します。
gsap
GSAP ScrollTriggerで横スクロールを作る｜移動距離とcontainerAnimation
縦スクロールで複数パネルを横へ送るGSAPの実装例です。scrollWidthから表示幅を引く距離計算、containerAnimationによる内側の表示、スマホ・reduced-motionで縦並びへ戻す処理を解説します。
React
Typed.jsをReact・Vueで使う方法｜初期化・destroyと二重起動の防ぎ方
Typed.jsをReactのuseEffect・Vue 3のonMountedで動かすコンポーネント例。destroyによる後片付け、props変更、StrictMode、Next.jsの配置、動きを減らす設定への対応を解説します。
JavaScript
Web Componentsの使い方｜Custom ElementsとShadow DOM実働デモ
Web Componentsを実働プロフィールカードで解説。Custom Elements、Shadow DOM、template・slot、ライフサイクル、React等との使い分けが分かります。
JavaScript
INP改善方法｜クリックが重い原因を計測・分割する実働デモ
Core Web VitalsのINP改善を実働デモで解説。200msの基準、フィールド計測、入力遅延・処理・描画の切り分け、長いタスクの分割手順が分かります。
React
ReactでHTML埋め込みJSONを取得する方法｜PHP連携とXSS対策
PHPなどでHTMLへ埋め込んだJSONをReactの初期データとして取得する方法を解説します。application/json、JSON.parse、createRoot・hydrateRoot、Strict Mode、Server Componentsとの違い、script終了文字列によるXSSを防ぐエンコードまで紹介します。
React
【React】Reduxの仕組みとデータフロー｜Store・Action・Reducerの流れを図で理解する
ReduxのStore・State・Action・Dispatch・Reducerの間でデータがどう流れるかを、公式のデータフロー図とコンビニのたとえで解説します。UIの操作からdispatch、Reducer、Storeの更新までの一方向の流れを3分でつかめます。
WebGL & Three.js
【GLSL】Three.jsのShaderMaterialを使って画像や動画を出力する方法(デモ付き)
Three.jsのShaderMaterialを使って画像や動画を出力する方法を紹介します。 WebGL(GLSL)を使うので、これができるとWebサイトなどでは即応用ができるようになります。 デモもあるのでまずは確認してみてください。 もしGLSLを書かずに、Three.js…