Vue.js
Vueのcomposition APIのエラー:Cannot read property ‘util’ of undefined
Vue 3でCannot read property 'util' of undefinedが出るときの対処方法です。原因はVue 2用プラグイン@vue/composition-apiのimportで、'vue'からimportし直せば解決します。Vue 2.7以前との違いも整理します。
CATEGORY
JavaScript
JavaScriptに関する基礎、実装例、トラブル解決の記事をまとめています。
120ARTICLES
Vue.js
Nuxt.jsで複数のlayoutsファイルを作成して適用する方法
Nuxt.jsで複数のlayoutsファイルを作成して適用する方法を紹介します。layouts/に新しいVueファイルを置き、ページ側でlayoutプロパティ（Nuxt 3ならdefinePageMeta）を指定するだけで切り替えられます。
Vue.js
Vue.jsでライブラリを使わずに進捗バーの表示する方法
Vue.jsでライブラリを使わずに進捗バーを表示するシンプルな方法です。dataのパーセントを:styleのwidthに渡し、ボタンのクリックで進める仕組みなので、考え方は他のフレームワークでも生のJavaScriptでも同じです。
gsap
gsapのeasingとプロパティについて
gsapのease（easing）の指定方法と種類、既定値のpower1.out、in・out・inOutの違い、よく使うeaseの目安、autoAlpha・x・y・repeat・yoyoなどよく使うプロパティをまとめて紹介します。
WebGL & Three.js
Three.js Lightの使い方と種類｜AmbientLight・DirectionalLight・PointLightを比較
Three.jsのAmbientLight・DirectionalLight・PointLightの違いと使い方を解説します。Materialとの関係、色・intensity、target、distance・decay、candela・lumen、LightHelper、組み合わせ方、暗い・反映されない原因まで確認できます。
JavaScript
JavaScriptのcall()・apply()・bind()の使い方と違い｜thisを固定する方法
JavaScriptのcall()・apply()・bind()の違いは、call()とapply()がthisを指定してその場で実行し(引数は個別か配列か)、bind()がthisと引数を固定した新しい関数を返す点です。イベントリスナーでのthisのずれ、部分適用の例も紹介します。
React
【React】ローディングアニメーション(スピナー)を表示する方法
Reactでローディングアニメーション(スピナー)を表示する方法です。useStateで読み込み中の状態を持ち、trueの間だけCSSの@keyframesで動くスピナーを表示します。fetchと組み合わせてfinallyで消す書き方、React Iconsを使う方法も紹介します。
JavaScript
JavaScriptの同期・非同期処理の違い｜Promiseとasync/awaitの使い分け
同期処理は完了してから次へ進み、非同期処理は完了をPromiseやcallbackで後から受け取ります。逐次・並行実行、async/await、fetchの失敗処理、キャンセルまで実例で解説します。
JavaScript
【JavaScript】背景画像も変化するスライダーの作成方法
JavaScriptでスライドに合わせてbodyの背景画像も切り替わるスライダーの作り方をデモつきで紹介します。style.backgroundImageで背景を同期する仕組みと、切り替わらないときの確認点も解説します。
React
【React】useContextをいつ使う？別ファイルとデータ共有や再レンダリングについて
ReactのuseContextをいつ使うか、createContext・Provider・useContextの3ステップの使い方、別ファイルとのstate共有、再レンダリングの注意点をコード付きで解説します。
gsap
gsapのTimelineでフェードアウトするスライダーを作成する方法(垂直と水平)
gsapのTimelineでフェードアウトするスライダーを垂直・水平で作る方法をデモつきで紹介します。from()とto()をstaggerで1枚ずつずらす仕組み、defaultsでの簡略化、動かないときの確認点も解説します。
Vue.js
Vue2でタブとモーダルを作成する方法(Bulmaフレームワーク)
Vue2でタブとモーダルを作成する一例を紹介します。 Vue2でBulmaのcssフレームワークを使ってタブとモーダルを作成します。
Vue.js
vscodeでtailwindの@applyを使うとerrorが表示されるときの解決策
VS Codeでtailwindcssの@applyを書くと「Unknown at rule」のerrorが表示されるときの解決策です。公式推奨のTailwind CSS IntelliSenseと、PostCSS Language Supportの2通りを紹介します。
React
【React】ページネーションを自作する方法
Reactで外部API(JSON)のデータを「前へ」「次へ」で切り替えるページネーションを自作する方法です。next・previousのURLをuseStateで持ち、ボタンで取得し直す流れを、ポケモンAPIを例に説明します。
JavaScript
JavaScriptのmap・filter・reduceの違いと使い分け
mapは全要素を変換、filterは条件に合う要素を抽出、reduceは配列を1つの結果へ集約します。戻り値、元配列、初期値、疎な配列、メソッドチェーンの注意点を実例で整理します。
React
【React】でよく使う条件分岐の記述方法(&&, ??(Null合体演算子),三項演算子)
Reactでよく使う条件分岐の書き方(&&、??(Null合体演算子)、三項演算子)を、同じmapの例で比較します。JSXでif文が書けない理由、===で比較する理由、&&で0が表示される落とし穴も紹介します。
Vue.js
Vue.jsで要素がスクロール画面に現れたらアニメーションさせる方法
Vue.js(Vue 3)で要素がスクロールして画面に現れたらアニメーションさせる方法です。IntersectionObserverをref・onMountedと組み合わせ、数字がカウントアップする例で、監視の開始・停止と動かないときの確認点まで説明します。
React
【React】配列の中のオブジェクトのプロパティすべてをpropsとして渡す方法
Reactで配列の中のオブジェクトのプロパティすべてをpropsとして渡す方法を紹介します。 TypeScriptの使用した場合の書き方、React.memoを使って再レンダリングを防ぐ方法、PropTypesを使う方法、静的データの場合のuseMemo活用なども合わせて紹介します。
JavaScript
【JavaScript】jQueryなしでイージングの効いたスムーススクロールを実装する方法
jQueryなしのバニラJavaScriptで、イージングの効いたスムーススクロールを実装する方法を紹介します。CSSのscroll-behaviorとの使い分け、requestAnimationFrameで位置を計算する仕組み、duration・ignore・easingの変更箇所、代表的なイージング関数一覧をまとめます。
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の再生・停止の実例を紹介します。