JavaScript

ReactでrequestAnimationFrameを使う

ふと自分で遊んでる時に、ReactでCanvas触るのどうするんだろなーという気持ちになったので調べた。 ここを読めばすべてのことが書いてある。 https://css-tricks.com/using-requestanimationframe-with-react-hooks/ DEMO https://codesandbox.io/s/mystify…

switchかなんかで条件によって異なる値を返す関数の型の書き方

この間やっててハマったので、意外とハマる人多いのでは?ということでメモ 前提⚠️ typescript v4.0.2 ■ 前提となる変数たち type valueOf<T> = T[keyof T]; const KEY = { foo: 'foo', bar: 'bar' } as const; type Key = valueOf<typeof KEY>; const VALUE = { foo: 'foo'</typeof></t>…

今更だけどまぁまぁ便利なのでgulp4を使う

今更だけどまぁまぁ便利なのでgulp4を使う はい。 今更gulpって、、、って感じもあるし、webpackだのparcelだの、いやいや、そもそも最近はcliが充実してるので、設定ファイル自体書かないんだよってことがあるのは知ってるけど、gulp4結構便利だったので書…

JavaScriptで素数を求めるなどやった

以前、と言っても相当前のことだけれど、会社をやっている友達と飲んでいて、そこの強いエンジニアの人も来ていた。その人はプログラミングを教えるということも行なっており、生徒に出した問題についての話になった。 それが、ある数までの素数を求める、と…

direnvでプロジェクトごとのnodeのバージョンを切り替える

今更ですが、会社でまとめたのでこっちにも貼っときます。 プロジェクトごとにnodeのバージョンが違って、そのたびに思い出しては切り替えることがあります こっちではv8なのにこっちではv10、、、 そもそも覚えてられないし、切り替えるのが面倒、、、、 そ…

EventTarget.addEventListenerでイベントを登録した時、そのイベントの実体はどこに登録されるのか

モチベーション 要素追加時に、その要素にeventを登録したとする。 その後、その要素が削除され、かつその要素がどこからも参照されていない時、登録されたイベントはどうなるのか気になった。 もし、上記の状態でもイベントが削除されないのであれば、remov…

ちょいちょい触って感じたsin/cosの便利なところ

ちょいちょい触って感じたsin/cosの便利なところ canvasとかその辺触るとだいたいsin/cosが出てきて、数学嫌いな僕みたいなのはそれだけでってなりがち。だけどちょっと触ってみると全然複雑なものでもない。 ポイントは2点で sin/cosに同一の値(角度)を与…

2Dのメタボール(Metaball)理解した

2Dのメタボール(metaball)について理解した。 メタボールっつーのは何かと言うとこれです。写経したやつだけど。 (PCで見てくれよな!) See the Pen metaball canvas by bom_phage (@bom_phage) on CodePen. メタボールというか、こういう滑らかにくっつく表…

PIXI.jsであそんでる

PIXI.jsであそんでる。 個人プロジェクトで使おうという意図もあるので、別に遊んでるわけではないけど、割と気に入って最近よく試している。何が気に入っているかと言われると、非常に簡単な点と、パフォーマンスがいいことかなー。 canvasでやっていき問題…

CSSであそぼう

CSSであそぼう CSSであんまり使ってないというか、あんまり挙動理解してないのいろいろあったので遊んでみた。 transformとperspective matrix3D とか正直触ってみたけど行列を理解する頭がまだないので、よくわからん。結局translateとかscaleとかrotateみ…