React
【React】でセッションストレージやローカルストレージのデータを取得する方法
Reactでセッションストレージやローカルストレージのデータを取得する方法を紹介します。 セッションストレージでもローカルストレージでもやり方はまったく同じため、以下の例では、セッションストレージで紹介します。 loca…
CATEGORY
JavaScript
JavaScriptに関する基礎、実装例、トラブル解決の記事をまとめています。
111ARTICLES
React
【React】useRefの応用、ひとつ前の状態と現在の状態を比較する方法(usePrevious)
Reactのカスタムフック「usePrevious」を活用し、ひとつ前の状態と現在の状態を簡単に比較する方法を解説。React v19での注意点やStrict Mode対応についても参考にしてください。
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】glslifyのノイズ(noise)の使い方とデモ
WebGL(GLSL)でよく使うglslifyのノイズ(noise)の使い方を紹介します。 デモもあるので確認してみてください。 【GLSL】glslifyのノイズ(noise)のデモ 通常の2Dノイズ 時間経過と共に細…
WebGL & Three.js
【GLSL】画像の色の入れ替え、反転、座標をずらす、ゆっくり変化させる方法(デモ付き)
WebGL(GLSL)のフラグメントシェーダで色を入れ替えたり、色を反転させたり、色の座標をずらしたり、ゆっくりと色を変化させたり、画像を繰り返したりする方法を紹介します。 元画像の表示から分かるように7つほどデモを用意…
WebGL & Three.js
【WebGL】GLSLの頂点シェーダー(vertexShader バーテックスシェーダー)と頂点データ(attribute,頂点属性)とは？
WebGL(GLSL)を扱うときに必ずでてくる頂点シェーダー(vertexShader、バーテックスシェーダー）とは何か、何に使うのかについて説明します。 また、 attributeについても説明します。 頂点シェーダー…
WebGL & Three.js
【WebGL】GLSLのフラグメントシェーダー(Fragment Shader)とは？わかりやすく解説
WebGL(GLSL)を学習する上で、必ず理解しないといけないものの一つに、フラグメントシェーダー(Fragment Shader)があります。 フラグメントシェーダーとは何かについて、説明します。 Three.jsやW…
WebGL & Three.js
【WebGL】GLSLの曲者varyingとuniformとは？その挙動の説明と使い方について
WebGL(GLSL)において、データを受け渡しする方法には3つあります。 attribute varying uniform その中でもvaryingは特にわかりにくいです。 varyingの挙動が理解できればほぼわか…
WebGL & Three.js
【WebGL】GLSLで使う数学(三角関数、ベクトル)を文系エンジニアのために実務でいるところだけ解説
WebGLにおいてGLSLを書く時、どうしても数学がでてきます。 ここでは数学(三角関数、ベクトル)を文系エンジニアのために、まず最初に抑えておきたいポイントだけ解説します。 難しいことは私もわかりませんし、GLSLを扱…
WebGL & Three.js
【WebGL】GLSLで定数を定義する方法(define, constとその違いと注意点)
WebGL(GLSL)で定数を定義する方法を紹介します。 定数を定義するのは、2通りあります。 define const この2つの使い方、その違いからくる注意点をみてみましょう。 基本的なGLSLの計算方法については、…
WebGL & Three.js
【WebGL】GLSLで円や三角形、四角形、その他多角形の図形を描写する方法
WebGL(GLSL)で円や三角形、四角形、八角形、十角形といった多角形の図形を描写する方法を紹介します。 基本的なGLSLの計算方法については、GLSLで使う数学(三角関数、ベクトル)を文系エンジニアのために実務でいる…
WebGL & Three.js
【GLSL】Three.jsのShaderMaterialを使って画像や動画を出力する方法(デモ付き)
Three.jsのShaderMaterialを使って画像や動画を出力する方法を紹介します。 WebGL(GLSL)を使うので、これができるとWebサイトなどでは即応用ができるようになります。 デモもあるのでまずは確認し…
WebGL & Three.js
【Three.js】マテリアルのテスクチャーに画像や動画を設定する方法(デモ付き)
Three.jsでマテリアルのテスクチャーに画像や動画を設定する方法を紹介します。 さっそくデモを確認してみましょう。 3Dモデルを表示 Three.jsのShaderMaterialを使ってGLSLを記述した画像の貼り…
WebGL & Three.js
【Three.js】物体(メッシュ)を複数ランダムに生成して散りばめる方法(デモあり)
Three.jsを使って、物体(メッシュ)を複数個、ランダムに生成して散りばめる方法を紹介します。 またその応用として、ライトが必要な物体や、物体をランダムに移動させる方法も紹介しています。 大きさも、ジオメトリの種類も…
WebGL & Three.js
【Three.js】ライトで影を落とす方法と影の調整のやり方(デモつき)
Three.jsでライトを使ったとき、物体の影を落とす方法を紹介します。 また影を薄くしたり、濃くしたり、影がギザギザのときの対処方法といった調整のやり方も紹介しています。 まずはサンプルデモがあるので、以下をご確認くだ…
WebGL & Three.js
【Three.js】OrbitControlsを使って視点の操作する簡単な方法(デモあり)
Three.jsでOrbitControlsを使って簡単にマウスで視点の操作する方法を紹介します。 まずはデモを確認してみましょう。 OrbitControlsとは？ OrbitControlsは、3Dシーン内でのカメラ…
WebGL & Three.js
【Three.js】Three.jsの基本的な操作の一連の流れを解説
Three.jsは、WebGLを簡単に使用するための現状最も有名なJavaScriptライブラリです。 Three.jsやWebGLが何？という場合は、WebGLとThree.jsの違いって何？押さえておきたい基本的なこ…
Vue.js
Quasar frameworkの始め方(Vueフレームワーク)
VueフレームワークのQuasar frameworkのインストールからVueファイルの作成までの手順です。 Node.jsの設定（バージョン変更の仕方）、Quasar CLIのインストール、Quasarプロジェクトの作成を説明しています。
React
【React】useContextをいつ使う？別ファイルとデータ共有や再レンダリングについて
ReactのuseContextについて、使い方や、いつ使うのかといった情報を共有します。 また、useContextを使って別ファイルとデータ共有の仕方や再レンダリングについても紹介します。 ReactのuseCont…
React
【React】propsのchildrenの基本的な使い方と実例(再利用性の高い部品作成方法)
Reactでコンポーネントを他のコンポーネントに渡せるpropsのchildrenの使い方を紹介します。 childrenを上手に使うことで、再利用性の高いコンポーネントを作成することができます。 childrenの基本…
React
【React】Redux toolkitの使い方(Slice作成、Redux Dev Toolsでstateを確認)
ReactでReduxを使う方法を紹介します。 ReactでReduxを使う方法 公式の手順は以下にあります。 https://react-redux.js.org/introduction/getting-starte…
React
【React】SVGアイコンを使用する方法
Reactで独自で作成したSVGアイコンや無料のアイコンサービスなど使用する方法を紹介します。 ReactでSVGアイコンを使用する方法 他にも以下のように手軽に使えるやり方を紹介しています。 【React】Font A…
React
【React】Reduxの仕組みを1分で理解する
Reduxを理解するために、まずは仕組みを理解しましょう。 Reduxの仕組みを３分で理解する 引用: https://redux.js.org/tutorials/essentials/part-1-overview-…
React
【React】useEffectとuseLayoutEffectの違い
ReactのuseEffectとuseLayoutEffectの違いを紹介します。 ReactのuseEffectとuseLayoutEffectの違い まず、前提として、useEffectとuseLayoutEffec…
React
【React】useEffectの第二引数の使い方と活用事例と無限ループの注意点
ReactのuseEffectの第二引数の使い方と活用事例と無限ループになってしまう注意点を紹介します。 useEffectの第二引数の役割 useEffectの第二引数は、依存配列と呼ばれます。 useEffectの第…
React
【React】useReducerを使って四則演算の結果を表示するアプリ作成方法
ReactのuseReducerを使って四則演算の結果を表示するアプリの作り方を紹介します。 数字を変更したときも、四則演算のタイプを変更したときもリアルタイムで計算結果が変わる簡単なアプリです。 ReactのuseRe…
React
【React】useStateとuseReducerの違いとuseReducerの使い方と使い所
ReactのuseStateとuseReducerの違いとuseReducerの使い方を紹介します。 useStateとuseReducerの違い まずは簡単なボタンを作成して、数字をカウントアップするときの書き方の違い…