デザイン

MAI-Image-2.5は、Microsoft AIが発表した画像生成・画像編集向けのAIモデルです。
公式情報では、テキストや写真プロンプトから、デザイン用途に使いやすい高品質な画像を作れるモデルとして ...

デザイン

結論：Reve 2.0は「最終仕上げ」と「ピンポイント修正」に強い画像編集AIとしてとても優秀です。なぜかをMicrosoft MAI Image 2.5、Nano Banana/Gemini 2.5 Flash Ima ...

React

Reactで簡単にタイピングアニメーションを実装できるreact-typicalの使い方を紹介します。reactのバージョンが15か16しか対応していませんが、v17, v18以上で使う方法はあるので合わせて紹介します。 ...

React

Reactに限った話ではありませんが、ネイティブのJavaScriptのSetを使って配列の重複チェックや削除して、ユニークな値だけを取り出す方法を紹介します。本記事では、Reactのプロジェクトでよくある「オブジェクト ...

React

Reactでアコーディオンを作成する方法を紹介します。まずはReactでシンプルなアコーディオンメニューの実装方法を紹介します。その後、アニメーションの付け方や、より便利でサクッと作成できるライブラリの紹介をしています。 ...

Vue.js

Vueのassetsフォルダに入れたimg画像ファイルを表示する方法をまとめました。また、画像パスの@や~@の意味を解説しています。最後に画像がうまく表示されない場合の原因とその対処方法を紹介しています。

React

ReactのuseEffectを使って初回のみ(1回だけ)処理を実行する方法を実例とともに解説します。また、useEffectの使い方を間違えるとエラーやパフォーマンス低下を招くため使うなと言われることがあるかと思います ...

React

Reactで配列を表示する方法について紹介します。まずはReactではどんな方法で配列を表示できるのか単純なリスト表示から解説を始めます。その後、Reactでよく使うmapとfilterで配列を編集したり必要な要素のみ取 ...

gsap

gsapのscrollTriggerのscrubについて紹介します。gsapのscrollTriggerのscrubを使うことで、簡単にスクラブアニメーションや、パララックスの動きを再現できます。

gsap

gsapのscrollTriggerのpinの使い方を紹介します。画像のピン留めの参考例と、ずれるときの対処方法も合わせて紹介します。

React

ReactでSwiper（スライダー）を使う基本的な方法を紹介します。また、より発展的にテストモジュールデータのメモ化やSwiperモジュールの読み込みを動的インポートに切り替える方法も紹介しています。

React

Reactで配列の中のオブジェクトのプロパティすべてをpropsとして渡す方法を紹介します。TypeScriptの使用した場合の書き方、React.memoを使って再レンダリングを防ぐ方法、PropTypesを使う方法、 ...

React

ReactでReduxでクリックしたら複数のdispatchを実行する方法を紹介します。

ReactでReduxでクリックしたら複数のdispatchを実行する方法import { useDispatch, ...

React

Web制作など既存のWebサイトや、そこまでガチガチにReactなどを使う必要がないときでもReactをちょい足ししてリッチする方法を紹介します。
企業サイトを作成する場合は、カタログの一括ダウンロードだっ ...

React

Reactでセッションストレージやローカルストレージのデータを取得する方法を紹介します。
セッションストレージでもローカルストレージでもやり方はまったく同じため、以下の例では、セッションストレージで紹介しま ...

React

React V19で追加された新機能useフック ( use hook)の特徴と基本的な使い方を紹介します。useフックの特徴、基本的な使い方、なぜ使うといいのか、使う場合の制約などを詳しく説明しています。

React

HTMLにscriptタグでjsonデータを埋め込んでそれを取得して使う方法を紹介します。apiを叩いて取得するのではなく、phpなどであらかじめjsonデータをHTMLに落としてそれをJavaScriptで取得して使う ...

React

Reactのカスタムフック「usePrevious」を活用し、ひとつ前の状態と現在の状態を簡単に比較する方法を解説。React v19での注意点やStrict Mode対応についても参考にしてください。

PHP

VS Codeの拡張機能PHP ServerのPHP Not Foundがでるときの対処方法を紹介します。

VS Codeの拡張機能PHP ServerのPHP Not Foundがでるときの対処方法VS C ...

Vue.js

Vue3(CompositionAPI)で複数スライダーを動的に作成する方法を紹介します。Githubにソースコードを上げています。

WebGL & Three.js

Three.jsのコードをシェーダ言語GLSLに書き換えたサンプルコードをデモ付きで解説します。
WebGL(GLSL)の入門として一番最初に知っておくといい内容になっています。

Three.j ...

WebGL & Three.js

ブラウザ上で3Dグラフィクスを描いてみたいと考えたとき、よく出てくる言葉として「WebGL」や「Three.js」と出会う機会があります。WebGLとThree.jsの違い、そもそもどういう意味なのかを説明します。

WebGL & Three.js

WebGL(GLSL)を使って画像を切り替えエフェクト、遷移時にノイズをかける方法を紹介します。
またノイズを応用することで画像を歪ませながら遷移させることもできます。
合わせてデモをたくさん用意し ...

WebGL & Three.js

Three.jsで数値をGUIで変更することができるようになるlil-gui(dat-gui)のカスタマイズ方法と、
パフォーマンスを測ることができるstat-jsの使い方を紹介します。
lil-g ...

WebGL & Three.js

WebGL(GLSL)でよく使うglslifyのノイズ(noise)の使い方を紹介します。
デモもあるので確認してみてください。

【GLSL】glslifyのノイズ(noise)のデモ通常の2Dノイズ ...

WebGL & Three.js

WebGL(GLSL)のフラグメントシェーダで色を入れ替えたり、色を反転させたり、色の座標をずらしたり、ゆっくりと色を変化させたり、画像を繰り返したりする方法を紹介します。
元画像の表示から分かるように7つ ...

WebGL & Three.js

WebGL(GLSL)を扱うときに必ずでてくる頂点シェーダー(vertexShader、バーテックスシェーダー）とは何か、何に使うのかについて説明します。
また、　attributeについても説明します。 ...

WebGL & Three.js

WebGL(GLSL)を学習する上で、必ず理解しないといけないものの一つに、フラグメントシェーダー(Fragment Shader)があります。
フラグメントシェーダーとは何かについて、説明します。 ...

WebGL & Three.js

WebGL(GLSL)において、データを受け渡しする方法には3つあります。

attribute
varying
uniform

その中でもvaryingは特にわかりにくいです。 ...

WebGL & Three.js

WebGLにおいてGLSLを書く時、どうしても数学がでてきます。
ここでは数学(三角関数、ベクトル)を文系エンジニアのために、まず最初に抑えておきたいポイントだけ解説します。
難しいことは私もわかり ...