React
Reduxとは？Reactで使う意味・不要なケース・Redux Toolkitを解説
Reduxとは何か、Reactで使う意味を初心者向けに解説します。Reduxが不要・必要なケース、useState・useReducer・Contextとの違い、Redux Toolkit、RTK Query、Next.jsでの注意点まで整理します。
CATEGORY
JavaScript
JavaScriptに関する基礎、実装例、トラブル解決の記事をまとめています。
111ARTICLES
WebGL & Three.js
【GLSL】glslifyのノイズ(noise)の使い方とデモ
GLSLでノイズ(noise)を使う方法を、glslifyとglsl-noiseのシンプレックスノイズで解説します。2D・3Dノイズの読み込み、スケール・移動・波・時間変化の書き方、画像を水面のように揺らすShaderMaterialの実例をデモ付きで紹介します。
JavaScript
JavaScriptのDOM要素の追加・削除のやり方:inputやbuttonへの挿入方法
JavaScriptでDOM要素を追加・削除する方法をまとめました。remove()・append()・prepend()・insertAdjacentElement()の使い方と、input・セレクトボックス・ラジオボタン・チェックボックスの値をliとして挿入する実例を紹介します。
JavaScript
【JavaScript】Safariでブラウザバックすると正しく動作しない【bfcache】の対策
Safariでブラウザバックするとページが正しく動作しない原因はbfcache(back-forward cache)です。pageshowイベントとevent.persistedで復元を検知して再初期化・リロードする対策と、unloadを避けてbfcacheを活かす書き方を紹介します。
React
【React】JSX内にJavaScriptの式を埋め込む方法と式と文の違い
ReactのJSX内にJavaScriptを埋め込む方法を解説します。{}で書けるのは式だけで、if文などの文はreturnの手前で処理します。三項演算子・map()による配列描画・HTML文字列をdangerouslySetInnerHTMLで埋め込む際の注意点も紹介します。
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対策まで整理します。
JavaScript
【JavaScript】chart.jsでフォントサイズをwidthに応じてレスポンシブにする方法
JavaScriptのChart.jsで、フォントサイズをチャートのwidthに応じてレスポンシブにする方法を紹介します。fontを関数で返す書き方、scales.rの設定、データ属性から値を渡す方法、親要素でサイズを制御するCSSの注意点までまとめます。
WebGL & Three.js
WebGLとThree.jsの違いとは？GLSL・WebGPUとの関係を初心者向けに解説
WebGLとThree.jsの違いを初心者向けに解説します。APIとライブラリの関係、Three.jsが省略してくれる処理、GLSL・WebGL 1/2・WebGPUとの違い、目的別の選び方と学習順序を整理します。
jQuery
jQueryプラグインTyped.jsの使い方
jQueryプラグインとして知られるTyped.jsの使い方を紹介します。インストール方法、HTMLとJavaScriptの書き方、typeSpeed・backSpeed・startDelay・backDelay・loopなどの主なオプション、destroyでの後片付けまでまとめます。
gsap
GSAP Tweenの使い方｜to・from・fromTo・setと再生制御を解説
GSAP Tweenの基本を初心者向けに解説します。to・from・fromTo・setの違い、duration・ease・repeat、pause・restart・reverseなどの再生制御、連打時の競合対策までコード例で学べます。
WebGL & Three.js
Three.js Materialの種類と使い方｜選び方・変更・透明度を解説
Three.jsのMaterialを目的別に比較し、MeshBasic・Standard・Physical・Toon・Matcapなどの選び方、生成後の変更、透明度、side、wireframe、needsUpdate、disposeまで初心者向けに解説します。
WebGL & Three.js
Codex Microとは？価格・機能・使い方・対応環境をわかりやすく解説
Codex Microの価格、在庫、機能、対応OS、通常のChatGPT・Codexとの違いを解説。RGBキー、承認・却下、音声入力、ジョイスティック、推論レベル調整の使いどころと購入前の注意点を整理します。
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で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でオブジェクトを複製する方法｜clone・Material共有・SkinnedMesh対応
Three.jsでMesh・Group・Material・Geometry・glTFを複製する方法を解説します。Object3D.cloneのrecursive、共有されるGeometry・Material・Texture、独立copy、SkeletonUtils、InstancedMesh、dispose時の注意まで実装例で確認できます。
React
React useEffectを初回だけ実行する方法｜Strict Modeで2回動く理由も解説
ReactのuseEffectを初回マウント時だけ実行する方法を解説します。空の依存配列、Strict Modeで開発時に2回動く理由、cleanup、setInterval・fetchの正しい例、依存配列と無限ループ、useRefで抑止してはいけない理由まで整理します。
React
Reactで配列を表示する方法｜map・filter・keyと表示されない原因
Reactで配列をリスト表示するmap・filterの書き方を初心者向けに解説します。安定したkey、オブジェクト配列、検索・空配列・非同期データ、state更新、mapしても表示されない原因までコードで確認できます。
JavaScript
ページ遷移アニメーションの作り方｜View Transition APIとJavaScriptのフェード実装
ページ遷移時にフェードイン・フェードアウトを付ける方法を解説します。View Transition APIによるCSS中心の実装、未対応ブラウザ向けJavaScript、外部・別タブ・ページ内リンクの除外、bfcacheとアクセシビリティ対策まで確認できます。
React
【React 19.2対応】カスタムフックの作成方法・使い所・実例をわかりやすく解説
Reactのカスタムフックは、useState、useEffect、useContextなどのReact Hooksを組み合わせて、コンポーネント間で再利用しやすくするための仕組みです。React 19.2時点でも、カス…
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】Webサイトにちょい足ししてCRUDなどを操作をする方法
Web制作など既存のWebサイトや、そこまでガチガチにReactなどを使う必要がないときでもReactをちょい足ししてリッチする方法を紹介します。 企業サイトを作成する場合は、カタログの一括ダウンロードだったり、商品を顧…
Vue.js
Vue3(CompositionAPI)で複数スライダーを動的に作成する方法
Vue3(CompositionAPI)で複数スライダーを動的に作成する方法を紹介します。 Githubにソースコードを上げています。
WebGL & Three.js
【WebGL】Three.jsのコードをシェーダ言語GLSLに書き換えたサンプルコードをデモ付きで解説
Three.jsのコードをシェーダ言語GLSLに書き換えたサンプルコードをデモ付きで解説します。 WebGL(GLSL)の入門として一番最初に知っておくといい内容になっています。 Three.jsをちょっと知ったくらいの…
WebGL & Three.js
【GLSL】画像を切り替えエフェクト：遷移時にノイズをかけたり、歪ませたりする方法(デモあり)
WebGL(GLSL)を使って画像を切り替えエフェクト、遷移時にノイズをかける方法を紹介します。 またノイズを応用することで画像を歪ませながら遷移させることもできます。 合わせてデモをたくさん用意したので、まずは確認して…
WebGL & Three.js
【GLSL】画像の色の入れ替え、反転、座標をずらす、ゆっくり変化させる方法(デモ付き)
WebGL(GLSL)のフラグメントシェーダで色を入れ替えたり、色を反転させたり、色の座標をずらしたり、ゆっくりと色を変化させたり、画像を繰り返したりする方法を紹介します。 元画像の表示から分かるように7つほどデモを用意…
WebGL & Three.js
【WebGL】GLSLの頂点シェーダー(vertexShader バーテックスシェーダー)と頂点データ(attribute,頂点属性)とは？
WebGL(GLSL)を扱うときに必ずでてくる頂点シェーダー(vertexShader、バーテックスシェーダー）とは何か、何に使うのかについて説明します。 また、 attributeについても説明します。 頂点シェーダー…