WebGL & Three.js
WebGLとThree.jsの違いとは？GLSL・WebGPUとの関係を初心者向けに解説
WebGLとThree.jsの違いを初心者向けに解説します。APIとライブラリの関係、Three.jsが省略してくれる処理、GLSL・WebGL 1/2・WebGPUとの違い、目的別の選び方と学習順序を整理します。
CATEGORY
JavaScript
JavaScriptに関する基礎、実装例、トラブル解決の記事をまとめています。
111ARTICLES
Vue.js
Vue 3で画像を表示する方法｜Viteのassets・public・動的srcを解説
Vue 3 + Viteで画像を表示する方法を解説します。src/assetsの静的import、public、動的な:src、new URL、import.meta.glob、CSS背景画像、@ alias、require・~@が動かない理由、Nuxt 4との違いと本番buildの404対策まで整理します。
WebGL & Three.js
Three.jsで回転・移動・拡大縮小する方法｜position・rotation・scale
Three.jsでMeshやGroupを回転・移動・拡大縮小する方法を解説します。position・rotation・scale、ローカル/ワールド座標、Quaternion、pivot、親子階層、Timerを使ったフレームレート非依存アニメーションまで確認できます。
WebGL & Three.js
Three.jsでMaterialの色を設定する方法｜Color・RGB・HSL・色空間を解説
Three.jsでMaterialの色を設定・変更する方法を解説します。16進数、CSS色、RGB、HSL、Color.set・copy・lerp、emissive、vertex color、textureとの乗算、sRGB・Linear-sRGB、色が暗い・違う原因まで実装例で確認できます。
WebGL & Three.js
Three.js Materialの種類と使い方｜選び方・変更・透明度を解説
Three.jsのMaterialを目的別に比較し、MeshBasic・Standard・Physical・Toon・Matcapなどの選び方、生成後の変更、透明度、side、wireframe、needsUpdate、disposeまで初心者向けに解説します。
WebGL & Three.js
Three.jsでlil-guiとstats.jsを使う方法｜GUI調整・FPS計測
Three.jsへlil-guiとstats.jsを導入し、位置・Material・色・uniformをGUIで調整する方法と、FPS・MS・draw callを計測する方法を解説します。dat.GUIからの移行、controllersRecursive、save/load、破棄まで対応します。
WebGL & Three.js
Three.js入門｜回転する立方体をViteで表示する最小チュートリアル
Three.js初心者向けに、npmとViteの準備から回転する立方体の表示まで解説します。Scene、Camera、Renderer、Geometry、Material、Meshの役割、レスポンシブ対応、アニメーション、後片付けまで一つずつ確認できます。
WebGL & Three.js
Three.js Geometryの種類と変更方法｜BufferGeometry・頂点更新を解説
Three.jsのGeometryの種類と選び方を初心者向けに解説します。Box・Sphere・Planeなどの基本形状、BufferGeometryのposition・normal・uv、頂点の変更、サイズ変更、EdgesGeometry、セグメント数、disposeまで実装例で確認できます。
WebGL & Three.js
Three.jsでオブジェクトを複製する方法｜clone・Material共有・SkinnedMesh対応
Three.jsでMesh・Group・Material・Geometry・glTFを複製する方法を解説します。Object3D.cloneのrecursive、共有されるGeometry・Material・Texture、独立copy、SkeletonUtils、InstancedMesh、dispose時の注意まで実装例で確認できます。
WebGL & Three.js
Three.jsライトの使い方｜Ambient・Directional・Point Lightを比較
Three.jsのAmbientLight・DirectionalLight・PointLightの違いと使い方を解説します。Materialとの関係、色・intensity、target、distance・decay、candela・lumen、LightHelper、組み合わせ方、暗い・反映されない原因まで確認できます。
React
Reduxとは？Reactで使う意味・不要なケース・Redux Toolkitを解説
Reduxとは何か、Reactで使う意味を初心者向けに解説します。Reduxが不要・必要なケース、useState・useReducer・Contextとの違い、Redux Toolkit、RTK Query、Next.jsでの注意点まで整理します。
React
React useEffectを初回だけ実行する方法｜Strict Modeで2回動く理由も解説
ReactのuseEffectを初回マウント時だけ実行する方法を解説します。空の依存配列、Strict Modeで開発時に2回動く理由、cleanup、setInterval・fetchの正しい例、依存配列と無限ループ、useRefで抑止してはいけない理由まで整理します。
React
ReactでHTML埋め込みJSONを取得する方法｜PHP連携とXSS対策
PHPなどでHTMLへ埋め込んだJSONをReactの初期データとして取得する方法を解説します。application/json、JSON.parse、createRoot・hydrateRoot、Strict Mode、Server Componentsとの違い、script終了文字列によるXSSを防ぐエンコードまで紹介します。
React
Reactで配列を表示する方法｜map・filter・keyと表示されない原因
Reactで配列をリスト表示するmap・filterの書き方を初心者向けに解説します。安定したkey、オブジェクト配列、検索・空配列・非同期データ、state更新、mapしても表示されない原因までコードで確認できます。
React
Reactでアクセシブルなアコーディオンを作る方法｜複数・アニメーション対応
ReactでWAI-ARIAに沿ったアコーディオンを作る方法を解説します。useId、aria-expanded・aria-controls、単一・複数開閉、入れ子、Motionアニメーション、reduced motion、details・Radix UI・MUIとの選び方まで実装例で確認できます。
JavaScript
ページ遷移アニメーションの作り方｜View Transition APIとJavaScriptのフェード実装
ページ遷移時にフェードイン・フェードアウトを付ける方法を解説します。View Transition APIによるCSS中心の実装、未対応ブラウザ向けJavaScript、外部・別タブ・ページ内リンクの除外、bfcacheとアクセシビリティ対策まで確認できます。
JavaScript
JavaScriptでclass・styleを操作する方法｜classListとgetComputedStyle
JavaScriptでHTML要素のclassとstyleを操作する方法を解説します。classListのadd・remove・toggle・contains・replace、style、setProperty、CSS変数、getComputedStyle、classNameとの違い、アクセシビリティとパフォーマンスまで実例で確認できます。
gsap
GSAP Tweenの使い方｜to・from・fromTo・setと再生制御を解説
GSAP Tweenの基本を初心者向けに解説します。to・from・fromTo・setの違い、duration・ease・repeat、pause・restart・reverseなどの再生制御、連打時の競合対策までコード例で学べます。
gsap
GSAPコールバックの使い方｜onComplete・onUpdate・onRepeatを解説
GSAPのonStart、onUpdate、onRepeat、onComplete、onReverseComplete、onInterruptの発火タイミングと使い分けを解説します。引数の渡し方、eventCallback、Timeline.call、Promise、再生・逆再生・中断時の注意点までサンプル付きで確認できます。
gsap
GSAP ScrollTriggerのstart・end設定｜発火タイミングを調整する方法
GSAP ScrollTriggerのstart・endで発火タイミングを調整する方法を解説します。top・center・bottom、%・px・相対値、markers、endTrigger、関数値、clamp、refresh、ずれる原因まで実装例で確認できます。
gsap
GSAP ScrollTriggerのscrubの使い方｜スクロール連動・パララックスを解説
GSAP ScrollTriggerのscrubを使い、スクロール位置とアニメーションを同期する方法を解説します。scrub:trueと数値の違い、start・endと速度の関係、パララックス、Timeline、進捗表示、ずれるときの対処まで紹介します。
gsap
GSAP ScrollTriggerのpinの使い方｜固定・ずれる原因・画像切り替えを解説
GSAP ScrollTriggerのpinで要素を固定する基本から、start・end・pinSpacing、画像切り替え、位置がずれる原因と直し方、レスポンシブ対応まで初心者向けに解説します。
React
【React 19.2対応】カスタムフックの作成方法・使い所・実例をわかりやすく解説
Reactのカスタムフックは、useState、useEffect、useContextなどのReact Hooksを組み合わせて、コンポーネント間で再利用しやすくするための仕組みです。React 19.2時点でも、カス…
React
【React 19.2対応】useフック（use API）の特徴と基本的な使い方
React V19で追加された新機能useフック ( use hook)の特徴と基本的な使い方を紹介します。useフックの特徴、基本的な使い方、なぜ使うといいのか、使う場合の制約などを詳しく説明しています。
React
【React】タイピングアニメーションのreact-typicalをReactv17, v18以上で使いたいとき
Reactで簡単にタイピングアニメーションを実装できるreact-typicalの使い方を紹介します。 reactのバージョンが15か16しか対応していませんが、v17, v18以上で使う方法はあるので合わせて紹介します。 代替のライブラリや自作するコードサンプル例も合わせて紹介します。
React
【React】配列の重複チェックや重複削除して、ユニークな値を抽出する方法
Reactに限った話ではありませんが、ネイティブのJavaScriptのSetを使って配列の重複チェックや削除して、ユニークな値だけを取り出す方法を紹介します。 本記事では、Reactのプロジェクトでよくある「オブジェクト配列の中からカテゴリー名を抽出し、ユニークなリストを作成する」ケースを例に、Setの活用方法を紹介します。
React
【React】でSwiper（スライダー）の使い方・基本的な導入手順や動的インポートに切り替える方法を紹介
ReactでSwiper（スライダー）を使う基本的な方法を紹介します。 また、より発展的にテストモジュールデータのメモ化やSwiperモジュールの読み込みを動的インポートに切り替える方法も紹介しています。
React
【React】配列の中のオブジェクトのプロパティすべてをpropsとして渡す方法
Reactで配列の中のオブジェクトのプロパティすべてをpropsとして渡す方法を紹介します。 TypeScriptの使用した場合の書き方、React.memoを使って再レンダリングを防ぐ方法、PropTypesを使う方法、静的データの場合のuseMemo活用なども合わせて紹介します。
React
【React】Reduxでクリックしたら複数のdispatchを実行する方法
ReactでReduxでクリックしたら複数のdispatchを実行する方法を紹介します。 ReactでReduxでクリックしたら複数のdispatchを実行する方法 import { useDispatch, useSe…
React
【React】Webサイトにちょい足ししてCRUDなどを操作をする方法
Web制作など既存のWebサイトや、そこまでガチガチにReactなどを使う必要がないときでもReactをちょい足ししてリッチする方法を紹介します。 企業サイトを作成する場合は、カタログの一括ダウンロードだったり、商品を顧…