React
右クリックした際の挙動は、 onContextMenu を使って制御できます。 なので、 Event.preventDefault を使って、既定のアクションが発生しないようにできます。developer.mozilla.org developer.mozilla.org ソースコード（抜粋） import { MouseEvent } from…
かつて制作した、 画面幅375pxを下回る環境で観覧した際はviewportをwidth=375に書き換えるスクリプト ですが、React用にカスタムフックにしました。blog.kimizuka.orguseResizeに関しても、かつて作成した useResize を流用しています。 ソースコード useVi…
Next.jsでDOMをアニメーションさせようと思った際、いつもはトゥイーンを自作していたのですが、いい感じのライブラリがあれば使いたいなと常々思っていました。 そこで、今回はReact + GSAPでDOMのアニメーションを試みてみようと思います。greensock.com …
DEMO kimizuka.org左上のボタンを押すとカメラの位置がスムーズに移動します。 今回の例だとcubeのscaleを変えるのと見栄えは変わらないですが、しっかりとカメラを動かしています。 ソースコード（抜粋） const maxRange = 16; const minRange = 2; export …
React + Three.jsでウェブサイトを作る際、こんな感じのカスタムフックを使って、WebGLRenderer、PerspectiveCamera、Sceneを取得しています。 useThree.tsx import { useEffect, useState } from 'react'; import * as THREE from '~/build/three.module'; …
単純な往復運動であればsin関数を使って実装しますが、これだと等速にはなりません。 いや、数学の得意な人であれば、どうにかして等速にできるのかもしれないですが、今回は単純に区間を区切った式で等速往復を実装します。 DEMO ※ クリックすると動き出し…
CSSのscroll-snapをつかってカルーセルをつくってみました。developer.mozilla.org ループ無し DEMO ソースコード（抜粋） JavaScript const { useEffect, useRef, useState } = React; function App() { const [ list ] = useState([1, 2, 3]); const width…
結論 自作編 基本的な方針 JavaScript（抜粋） DEMO 応用的な方針 JavaScript（抜粋） DEMO 他人のふんどし編 結論 react-textarea-autosize に任せる。github.com 自作編 基本的な方針 textareaのvalueの変更を検知する textareaのheightをautoにする texta…
Cannon.js + Three.js + React.jsで、 マウス座標に応じて床を傾ける 四方を見えない壁で囲う という空間を作って、そのな簡易3Dの球を配置してみました。 DEMO kimizuka.org ソースコード（抜粋） function handleMouseMove(evt) { const deg = 12; const x…
前回は、worldにaddBodyしたCannon.BodyとaddBodyしていないCannon.Bodyに対してPointToPointConstraintを使いました。blog.kimizuka.org今回はPointToPointConstraintの引数に、worldにaddBodyしたCannon.Bodyを2つ渡してみます。 結論としては同じ座標（中…
前回、Cannon.jsを使ってオブジェクトをマウスで掴んで放り投げるモック をつくりました。blog.kimizuka.orgつくりました。が。いきなり盛り盛りすぎたので、要素を分解して検証していきたいと思います。今回は、ものすごくシンプルに、マウスダウン 自分の…
Cannon.js + Three.jsを使って、マウスでオブジェクトを掴めるようにしてみました。 物理演算をしているので放り投げることもできます。ざっくりとした流れとしては、❶ Cannon.jsで計算用のworldをつくる ❷ 毎フレーム、Cannon.jsでオブジェクトの位置を計算…
Cannon.js + Three.jsでオブジェクトの位置を物理演算で算出してみました。ざっくりとした流れとしては、❶ Cannon.jsで計算用のworldをつくる ❷ 毎フレーム、Cannon.jsでオブジェクトの位置を計算する ❸ 毎フレーム、Three.jsのオブジェクトの位置と姿勢をCa…
AR.js + Three.js + Next.js（React.js） でWebARコンテンツを作る際、AR.jsの読み込みをどうするのがスマートなのか、ずーっと悩んでいたのですが、とりあえずカスタムフックを作ってみました。 ソースコード useMakerAr.js import { useEffect, useState }…
blog.kimizuka.orgかつて、 controllerModel.motionController.data にアクセスすることで強引に取得していた、トリガー、A、B、X、Yボタンの状態ですが、VRボタンを、Three.jsのVRButton.jsからImmersive Webのwebxr-button.jsへ切り替えたところ、スマート…
immersive-web.github.io ことの発端 普段はThree.jsでWebVRコンテンツをつくっているので、Three.jsのVRButton.jsを使っています。github.comしかし、以前、gamepadにアクセスしようとした際、sessionが隠蔽されており、外部からスマートにアクセスする方法…
文章での表現がすごく難しいのですが、 const [list, setList] = useState([{ color: 'red', text: 'Ya-Ha-!' },{ color: 'blue', text: 'Yo-Ho-!' },{ color: 'yellow', text: 'Ya-Ha-!' },{ color: 'green', text: 'Yo-Ho-!' }]); と、いう感じでuseState…
テキストエリアに行数制限を作りたくてもろもろ検討しました。 日本語だけの対応でOKであれば、当幅フォントを使って行も列も制限を掛けるのが良いと思いました。 DEMO フォントサイズを10pxに設定 リサイズを不可に設定 大きさを20文字×10行に合わせる 最大…
ことの発端 以前、vwを使って画面幅に合わせたサイズ調整を行うモックをつくりましたが、今回はそれを簡単に設定できるユーティリティ関数を作ろうと思いました。 ひとつひとつを手書きで書いていくのは非常に骨が折れるからです。blog.kimizuka.org 方針と…
以前シンプルに作り直したカスタムフック をほんのり複雑に作り直しました。 具体的には以前のものはウィンドウのスクロール量を測定することに特化していたのですが、引数で測定対象を渡せるように修正した次第です。blog.kimizuka.org useScroll.tsx impor…
めずらしいケースだと思いますが、 <ul> {list.map((item, i) => { return ( <li>{ item.title }</li> <li>{ item.text }</li> ); })} </ul> というような感じで、要素を複数返したいケースに出くわしました。 <ul> {list.map((item, i) => { return ( <> <li>{ item.title }</li> <li>{ item.text }</li> ); </ul>…
基本的には、React.cloneElementを使い、propsを固定した状態のcomponentを作るのがセオリーのようです。ja.reactjs.orgイメージ的には、Function.prototype.bindを使って引数を固定した関数を作るのに似ている気がしました。developer.mozilla.org実際に例…
forwardRefは、以前、子コンポーネントのメソッドを叩こうとしたときに使ったことがあるのですが、今回は単純にrefを渡すだけの記事です。blog.kimizuka.orgただ、公式ドキュメントにもわかりやすい記事があるので、そちらを見た方が早いかもしれないです。j…
creareRefを使ってrefを要素分つくるのが良いみたいです。 import { createRef, useRef } from 'react'; const list = ['', '', '']; export default function Indexpage() { const listRefs = useRef([]); list.forEach((_, i) => { listRefs.current[i] = …
以前作ったカスタムフックが複雑すぎたのでシンプル版を作りました。blog.kimizuka.org useScroll.tsx import { useEffect, useState } from 'react'; export default function useScroll() { const [ scrollTop, setScrollTop ] = useState(0); const [ scr…
結論 childrenに型をつけなければならない場合は、 import { ReactNode } from 'react'; function Parent({ children }: { children: ReactNode }) { return ( <div>{ children }</div> ); という感じで、ReactNodeを使うことにしました。 ことの発端 Reactでコンポーネ…
ja.reactjs.orguseRefといえば、DOMにアクセスする手段としておなじみ ですが、なんとなく使い所がわかったようなわからないような気がしたのでメモを残しておきます。ja.reactjs.org1秒間に1回、useStateを使ってtextを更新するコードを書いた際、下記の書…
blog.kimizuka.org昨日は、React.callbackを使って子コンポーネントのレンダリングをスキップすることに成功しました。今回はその続きです。React.memoを使っても、子コンポーネントのレンダリングをスキップできないケースがあります。それが、propsとして…
ja.reactjs.org 先日、Next.js + PixiJS でアプリーケションを作っている際に、React.memoの使い所が言葉では無く、心で理解できた気がするのでメモを残しておきます。 React.memoとは もしあるコンポーネントが同じ props を与えられたときに同じ結果をレン…
コンポーネントにメソッドを定義できるuseImperativeHandle、refを別のコンポーネントに受け渡すforwardRefを使って実現します。ja.reactjs.org ja.reactjs.org ChildComponent（子） import { forwardRef, useImperativeHandle } from 'react'; export defa…
