18 posts tagged with "JavaScript"

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を新たに作る方法をまとめました。

useStateのような状態を扱う自作hookを作る際、引数に関数を使うことがあります。 Reactのpropsなど、引数代入することで型を特定できたり、コードが縮小できて便利です。 たとえば、useStateでは初期値の計算が重かったり前の値を扱痛い場合、引数に関数を指定させます。 const [rows, setRows] = useState(() => createRows(props.count));

このuseStateのソースコードをみると、引数の型は(()=>S)|Sとして、初めに引数自体に関数の結果を代入していました。

アプリにはcss等のファイルが扱えるwebpack, ライブラリには一つのファイルに縮小して変換してくれるrollupが使いやすいです。 特にcreate-react-appでReact環境を作成後、デモページの作成と同時にライブラリを開発するのが安定しているのでおすすめです。 今回は、cross-envでグローバル変数を設定し、react-app-rewiredでcreate-react-appの中の設定を変更します. tsやcssなど追加で用いる場合はrollup/plugins: 🍣からプラグインを選んで使います。

• create-react-app {yourapp} and cd {yourapp}
• npm i -D cross-env react-app-rewired rollup @rollup/plugin-babel @rollup/plugin-node-resolve @rollup/plugin-commonjs fs

THREE.js は WebGL を用いて3D表現ができるライブラリです。 従来の js だと大規模なアプリになると予期しないことが多く起こるので、 view に特化した React のライフサイクル上で安全に構築します。

css in jsではメディアクエリ(@media)でのスタイルの場合分けができないので、 styledやRadiumというライブラリを使ってましたが、 typescriptやReactの新しいバージョンへの対応が遅かったり変なエラーが多かったり不便なので、 代わりとして、自作hookのライブラリを公開しました。 use-mediaというリポジトリを参考にしています。