16 posts tagged with "JavaScript"

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表現ができるライブラリで、 GLSLファイルもビルドしてくれるのでとてもわくわくできます。 （トップページにglslを利用してます。） 従来のjsだと大規模なアプリになると予期しないことが多く起こるので、 viewに特化したReactのライフサイクル上で安全に構築します。(特にhookだと関数型プログラミングできる。)

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