Reactで複雑な処理を加えたとき、useMemo, useCallback
だらけになったり、
useRef, xxxRef.current
だらけになり、読みにくいコードになることがあります。
クラスベースで、Ctrlクラスを作成し、hookから操作します。
例として、useDelay.ts
を定義します。
このフックは、実行を少し遅らせることで、重い処理などが重複するのを防ぎます。
useDelay test - CodeSandbox
16 posts tagged with "JavaScript"
View All TagsProjectedMaterial
Three.jsで、指定したカメラから見た光景を、Texture
にするMaterial
です。
また、ProjectedMaterial
では、envMap
なども指定できたりします。
一つ注意なのが、project()
を一度実行する必要があります。
web midi api
random color
stackoverflowのコードを [jsbench.me][jsbench.me]でベンチマークした結果です。
(markdownの関係で、\|
となっていますが、正しくは |
です)
range function in JavaScript
lodashを参考に,よく使うrange
をより早く実装してみました。
function range (n=0) {
const ret = new Array(n)
for (;n--;) ret[n] = n
return ret
}
JavaScript tips
django manage SPA
アプリを作成する
djangoのstartapp
の代わりに、create-react-app
でアプリを作成します。
node
をインストール後、npm install -g create-react-app
を実行することで使用できます。
django-admin startproject my-project
cd my-project
create-react-app my-react-app
cd my-react-app
Typescript | and &
Typescriptの合併|
と公差&
がわかりにくかったので、食事の例で考えてみました。
献立表を作るとき、次のようにサラダとパスタとピザの型を定義します。
今回は、サラダとパスタのトマトは数を数えられるとしてnumber型、
ピザのトマトはペースト状なのでboolean型にしているので注意してください。
type Salad = {tomato: number}
type Pasta = {tomato: number, macaroni: boolean}
type Pizza = {tomato: boolean, cheeze: boolean}
JS, TS, Error and solution
よく指摘されるエラーと、回避させる方法をまとめました。
React hooks
Reactは簡単にいうと、Webなどの処理と開発を最適化するための新しいエコシステムといえます。 また、hookは関数ベースのみでReactを実装する方法なので、型システムと相性がいいです。
前半では、DOMを直接触らない大体のjsコードをhookで使用する方法をまとめました。 後半では、前半で使ったhookを使って、独自のhookを新たに作る方法をまとめました。