React
ReactでHTML埋め込みJSONを取得する方法｜PHP連携とXSS対策
PHPなどでHTMLへ埋め込んだJSONをReactの初期データとして取得する方法を解説します。application/json、JSON.parse、createRoot・hydrateRoot、Strict Mode、Server Componentsとの違い、script終了文字列によるXSSを防ぐエンコードまで紹介します。
CATEGORY
JavaScript
JavaScriptに関する基礎、実装例、トラブル解決の記事をまとめています。
111ARTICLES
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…
React
【React】イベントを登録する方法
Reactでイベントを登録する方法を紹介します。 【React】イベントを登録する方法(クリックイベント) const Sample = () => { const clickAction = () => { alert("clickされました"); }; return ( <…
JavaScript
JavaScriptでランダムな色を作る方法｜HSL・HEXの実装例
JavaScriptのMath.randomでHSL・16進数カラーを生成し、ボタンで背景色を変える実装を解説します。整数範囲、CSS変数、コントラスト、セキュリティ用途との違いも確認できます。
jQuery
jQueryプラグインIsotopeの使い方(フィルター、ソート)
jQueryプラグインIsotopeの使い方を紹介します。data-filter属性によるフィルター、getSortDataとsortByによるソート、CDN読み込み、jQueryなしでの初期化まで、最小のHTMLとJSで解説します。
JavaScript
JavaScriptのflat()とflatMap()｜違い・深さ・使い分け
JavaScriptのflat()は配列のネストを指定した深さまで解除し、flatMap()は各要素を変換して1段だけ平坦化します。元配列、空スロット、Infinity、filterとの違い、失敗時の確認方法を解説します。
Vue.js
Vue 3でスクロールすると出てくる「トップへ戻る」ボタンの作り方
Vue 3(Composition API)でスクロールすると出てくる「トップへ戻る」ボタンの作り方を紹介します。scrollイベントとwindow.scrollYで表示を切り替え、scrollToでなめらかに先頭へ戻します。
Vue.js
Nuxt.jsでassetsのcssをグローバルにスタイルを適用する方法
Nuxt.jsでassetsのcssをグローバルに適用する方法を紹介します。nuxt.configのcss配列にファイルパスを書くだけで全ページに反映され、Nuxt 3以降のnuxt.config.tsでも同じ書き方です。
React
【React】useRefの応用、ひとつ前の状態と現在の状態を比較する方法(usePrevious)
Reactのカスタムフック「usePrevious」を活用し、ひとつ前の状態と現在の状態を簡単に比較する方法を解説。React v19での注意点やStrict Mode対応についても参考にしてください。
JavaScript
modern JavaScript開発の流れ｜modules・npm・build toolの役割
modern JavaScript開発を、ES modules、npm、dependency、build tool、transpile、polyfill、lint・test・buildの順に整理します。
WebGL & Three.js
【WebGL】GLSLの曲者varyingとuniformとは？その挙動の説明と使い方について
WebGL(GLSL)でデータを受け渡すattribute・varying・uniformのうち、特にわかりにくいvaryingの挙動（頂点シェーダからフラグメントシェーダへ線形補間されて渡る仕組み）とuniformの違い、WebGL2でのout/inの書き方まで解説します。
JavaScript
JavaScript setTimeout・setIntervalの使い方と解除方法
JavaScriptのsetTimeoutとsetIntervalの違い、clearによる解除、指定時間より遅れる理由、再帰的setTimeout、requestAnimationFrameとの使い分けを解説します。
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以前との違いも整理します。
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つの結果へ集約します。戻り値、元配列、初期値、疎な配列、メソッドチェーンの注意点を実例で整理します。