JavaScript
【JavaScript】jQueryなしでイージングの効いたスムーススクロールを実装する方法
jQueryなしのバニラJavaScriptで、イージングの効いたスムーススクロールを実装する方法を紹介します。CSSのscroll-behaviorとの使い分け、requestAnimationFrameで位置を計算する仕組み、duration・ignore・easingの変更箇所、代表的なイージング関数一覧をまとめます。
CATEGORY
JavaScript
JavaScriptに関する基礎、実装例、トラブル解決の記事をまとめています。
125ARTICLES
gsap
GSAP ScrollTriggerのstart・end設定｜発火タイミングを調整する方法
GSAP ScrollTriggerのstart・endで発火タイミングを調整する方法を解説します。top・center・bottom、%・px・相対値、markers、endTrigger、関数値、clamp、refresh、ずれる原因まで実装例で確認できます。
React
Reactでアクセシブルなアコーディオンを作る方法｜複数・アニメーション対応
ReactでWAI-ARIAに沿ったアコーディオンを作る方法を解説します。useId、aria-expanded・aria-controls、単一・複数開閉、入れ子、Motionアニメーション、reduced motion、details・Radix UI・MUIとの選び方まで実装例で確認できます。
React
【React 19.2対応】useフック（use API）の特徴と基本的な使い方
React 19で追加されたuse API（useフック）の特徴と基本的な使い方を、React 19.2時点の情報で紹介します。Promise・Contextの読み取り、Suspenseとの組み合わせ、条件分岐の中で呼べる理由、useEffectとの違い、制約と注意点まで説明します。
gsap
GSAPコールバックの使い方｜onComplete・onUpdate・onRepeatを解説
GSAPのonStart、onUpdate、onRepeat、onComplete、onReverseComplete、onInterruptの発火タイミングと使い分けを解説します。引数の渡し方、eventCallback、Timeline.call、Promise、再生・逆再生・中断時の注意点までサンプル付きで確認できます。
Vue.js
【Vue】tailwindcssでSVGアイコンを使う方法
VueとTailwind CSSでSVGアイコンを使う方法を、Heroicons(@heroicons/vue)を例に解説します。npmでのインストール、v1とv2のimportパスの違い(24/outline・24/solid)、script setupでの書き方、サイズ・色の指定、表示されないときの確認ポイントを紹介します。
Vue.js
Nuxt.jsのnuxtServerInitアクションの使い方
Nuxt.jsでVuexを利用しているとき、fetch()によってコンポーネントがロードされるたびにサーバーサイドレンダリングでデータを取得したくない場合があります。 最初の一度だけサーバーサイドでレンダリングしたいときに、Nuxt.jsの特別なアクションであるnuxtServerInitを使います。
gsap
GSAP ScrollTriggerのscrubの使い方｜スクロール連動・パララックスを解説
GSAP ScrollTriggerのscrubを使い、スクロール位置とアニメーションを同期する方法を解説します。scrub:trueと数値の違い、start・endと速度の関係、パララックス、Timeline、進捗表示、ずれるときの対処まで紹介します。
JavaScript
【Google Fontsの軽量化】グーグルフォントが重すぎるので読み込みを早くしたい
Google Fontsが重くて読み込みが遅いときの対処方法を紹介します。ウェイトを絞ったlinkタグ＋display=swap＋preconnectの現在おすすめの書き方と、Web Font Loader(webfont.js)でJavaScriptから非同期に読み込む従来の方法、遅いままのときの確認ポイントをまとめました。
React
【React】propsのchildrenの基本的な使い方と実例(再利用性の高い部品作成方法)
Reactのpropsのchildrenの使い方を解説します。タグの間に書いた要素がchildrenとして渡る仕組み、受け取り方、順番の制御、React.Children、TypeScriptの型、再利用可能なCardコンポーネントの実例とよくあるつまずきを紹介します。
React
【React】useImperativeHandleを使ってrefへのアクセスを制限する方法
ReactのuseImperativeHandleで、親に公開するrefのメソッドを限定する方法を解説します。forwardRefとの組み合わせ、React 19でrefをpropsとして受け取る書き方、依存配列、inputのフォーカスとvideoの再生・停止の実例を紹介します。
JavaScript
JavaScriptのXMLHttpRequestとPromiseの違い
JavaScriptのXMLHttpRequestとPromiseの違いをまとめました。XMLHttpRequestとは何か、コールバックがネストするCallback hellと、fetch()とthen()でフラットに書けるPromiseチェーンを同じ例で比較します。
gsap
GSAP ScrollTriggerのpinの使い方｜固定・ずれる原因・画像切り替えを解説
GSAP ScrollTriggerのpinで要素を固定する基本から、start・end・pinSpacing、画像切り替え、位置がずれる原因と直し方、レスポンシブ対応まで初心者向けに解説します。
Vue.js
Nuxt.jsでuuid(v4)を使う方法
Nuxt.jsでuuid(v4)を使う方法です。npm install uuidからimport { v4 as uuidv4 }、uuidv4()での生成、標準のcrypto.randomUUID()との使い分け、動かないときの確認点までまとめました。
JavaScript
JavaScriptでclass・styleを操作する方法｜classListとgetComputedStyle
JavaScriptでHTML要素のclassとstyleを操作する方法を解説します。classListのadd・remove・toggle・contains・replace、style、setProperty、CSS変数、getComputedStyle、classNameとの違い、アクセシビリティとパフォーマンスまで実例で確認できます。
JavaScript
スマホで100vhがはみ出るときの対策（ios,android)
100vhを指定してもスマホではアドレスバーの分だけはみ出ることがあります。100dvh・100svhでCSSだけで直す方法と、古いブラウザ向けにJavaScriptで1vhを計算し直す方法を紹介します。
Vue.js
Vue3 CompositionAPIでクリップボードにコピーする方法
Vue3 CompositionAPIでクリップボードにコピーする方法を紹介します。標準のnavigator.clipboard.writeText()で済ませる最短の書き方と、clipboard.js・vue-clipboard3を使う方法をまとめました。
React
【React】React Iconsの使い方-react-icons
ReactでReact Icons(react-icons)を使う手順です。npm install react-iconsでインストールし、react-icons/aiのようなセット別パスから使うアイコンだけをimportしてJSXに置きます。size・colorの指定とIconContextでのまとめ指定も紹介します。
WebGL & Three.js
【Three.js】マテリアルのテスクチャーに画像や動画を設定する方法(デモ付き)
Three.jsでマテリアルに画像や動画を貼る方法です。画像はTextureLoaderで読み込んでmapに渡し、動画はVideoTextureを使います。色が暗くなるときのcolorSpace設定、テクスチャーの切り替えとdisposeまでデモ付きで解説します。
Vue.js
Nuxt.jsで日付をフォーマットする方法
Nuxt.jsで日付を「2021年7月15日」のように整形する方法です。Nuxt 2ではpluginsでVue.filterを登録してテンプレートで使い、フィルターが廃止されたNuxt 3ではutilsの関数とIntl.DateTimeFormatで同じ表示にします。
React
【React】でセッションストレージやローカルストレージのデータを取得する方法
ReactでlocalStorage・sessionStorageの値を読む最短の方法は、useStateの初期値を関数で渡すlazy initializerです。保存はuseEffectで行います。カート機能での実例と、React 19のuseでPromiseを読む書き方も紹介します。
WebGL & Three.js
Three.js Geometryの種類と変更方法｜BufferGeometry・頂点更新を解説
Three.jsのGeometryの種類と選び方を初心者向けに解説します。Box・Sphere・Planeなどの基本形状、BufferGeometryのposition・normal・uv、頂点の変更、サイズ変更、EdgesGeometry、セグメント数、disposeまで実装例で確認できます。
JavaScript
JavaScriptでDOM操作で頻出するaddEventListenerの基本とさまざまな使い方
JavaScriptのaddEventListener()の基本と、click・dblclick・mousemove・keydown・focus・input・submitなどよく使うイベントの設定方法を紹介します。documentに登録する場合の使い分け、onceオプション、removeEventListenerも解説します。
React
【React】useStateの使い方と注意点まとめ
ReactのuseStateの使い方と注意点をまとめます。分割代入の基本から、即時反映されない理由、前の値を使った更新、オブジェクト・配列の更新、keyによるstateのリセット、親でstateを管理する方法まで解説します。
WebGL & Three.js
【Three.js】OrbitControlsを使って視点の操作する簡単な方法(デモあり)
Three.jsのOrbitControlsでマウスによる視点操作(回転・ズーム・移動)を実装する方法をデモつきで紹介します。importのパス、enableDampingとupdate()の関係、動かないときの確認ポイントも解説します。
React
【React】Reduxでクリックしたら複数のdispatchを実行する方法
ReactとReduxでボタンをクリックしたときに複数のdispatchを実行する方法を紹介します。onClickに波括弧つきの関数を渡すだけで順番に実行でき、Redux Toolkit・非同期・TypeScriptの書き方も合わせて解説します。
gsap
gsapのTimelineでデフォルト値を設定する方法
gsapのTimelineでデフォルト値を設定する方法を紹介します。gsap.timeline()のdefaultsにdurationやeaseを書くと、チェーンしたto()・from()すべてに引き継がれます。
React
Reduxとは？Reactで使う意味・不要なケース・Redux Toolkitを解説
Reduxとは何か、Reactで使う意味を初心者向けに解説します。Reduxが不要・必要なケース、useState・useReducer・Contextとの違い、Redux Toolkit、RTK Query、Next.jsでの注意点まで整理します。
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として挿入する実例を紹介します。