16 posts tagged with "JavaScript"

Reactで複雑な処理を加えたとき、useMemo, useCallbackだらけになったり、 useRef, xxxRef.currentだらけになり、読みにくいコードになることがあります。 クラスベースで、Ctrlクラスを作成し、hookから操作します。 例として、useDelay.tsを定義します。 このフックは、実行を少し遅らせることで、重い処理などが重複するのを防ぎます。 useDelay test - CodeSandbox

Three.jsで、指定したカメラから見た光景を、TextureにするMaterialです。 また、ProjectedMaterialでは、envMapなども指定できたりします。 一つ注意なのが、project()を一度実行する必要があります。

stackoverflowのコードを [jsbench.me][jsbench.me]でベンチマークした結果です。 (markdownの関係で、\| となっていますが、正しくは |です)

lodashを参考に，よく使うrangeをより早く実装してみました。

function range (n=0) {
  const ret = new Array(n)
  for (;n--;) ret[n] = n
  return ret
}

アプリを作成する​

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の合併|と公差&がわかりにくかったので、食事の例で考えてみました。 献立表を作るとき、次のようにサラダとパスタとピザの型を定義します。 今回は、サラダとパスタのトマトは数を数えられるとしてnumber型、 ピザのトマトはペースト状なのでboolean型にしているので注意してください。

type Salad = {tomato: number}
type Pasta = {tomato: number, macaroni: boolean}
type Pizza = {tomato: boolean, cheeze: boolean}

よく指摘されるエラーと、回避させる方法をまとめました。

Reactは簡単にいうと、Webなどの処理と開発を最適化するための新しいエコシステムといえます。 また、hookは関数ベースのみでReactを実装する方法なので、型システムと相性がいいです。

前半では、DOMを直接触らない大体のjsコードをhookで使用する方法をまとめました。 後半では、前半で使ったhookを使って、独自のhookを新たに作る方法をまとめました。