きみはねこみたいなにゃんにゃんなまほう

ねこもスクリプトをかくなり

TypeScript

Material UI の AppBar と Drawer を自分好みに組み合わせる

半年ほどかけてようやく Material UI にも慣れてきました。AppBar と Drawer の組み合わせは昨今のアプリでは定番となっていますが、レスポンシブに Drawer の表示を切り替えようとすると、AppBar との色使いの兼ね合いで迷います。 モバイルなどの狭いスク…

Material-UI と Downshift のスナップショットテストで属性値の差分が出るのを解消する

最近 React のテストを書き始めて、Jest の toMatchSnapshot 便利だなと感じながら使っています。 テスト結果をいちいちテストコード内に頑張って組み立てる必要がなくて楽ですし、 出力結果の差分ってコードの変更の結果としてもとても理解しやすいんですよ…

React のテストは react-dom/test-utils から @testing-library/react に進むと理解しやすそう

lightbulbcat.hatenablog.com の続きです。React のテスト用ライブラリを色々試した結果 react-dom/test-utils をちょっと触った後で、 @testing-library/react を導入するといいんじゃないかなと思いました。学習順序的な話です。 react-dom/test-utils は …

Reactコンポーネントのアンマウント後の更新を避けるために AbortController を使ってみる

これです。 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.…

React で Markdown を扱うときに便利な react-markdown と remove-markdown

Markdown 便利ですよね。使う側にとってはテキストベースでリッチコンテンツを表現できますし、開発者側にとってもアプリを実装する際に Markdown 対応さえしてしまえば、ある程度の表現力を確保できるとともに、XSS対応などもライブラリ側がしてくれている…

useEffect の評価タイミングが分からないので泣きながら試す

useEffect と useState を組み合わせた Hook を作成しようとしたのですが、動作のタイミングが今ひとつわからずうまく処理が噛み合わない Hook ができてしまったので、簡単な例で挙動を探っていきます。 色々試してみましたが、結局よくわかりませんでした。…

ReactRouter のページ遷移で値が切り替わるように Formik の入力値を localStorage に保存する

Formik のフォームの値を localStorage に保存しておくライブラリとして formik-persist というものがありますが、ReactRouter でページ遷移した際に値がうまく切り替わらなかったので自前で Hook を組んで何とか実装してみます。 経緯としては以下の通りで…

HOC と RenderProp と Hook の相互変換はどこまで可能か

React で Cross-Cutting-Concern の文脈で語られ比較されるものと言えば HOC と RenderProp と Hook ですね。 Higher-Order Components – React Render Props – React Hooks at a Glance – React 実際に開発を行っているとライブラリから提供される機能がそ…

dataloader を使ってリクエストを取りまとめる React デモを作る

以前 GraphQL を利用していたときに、サーバサイドのSQLリクエストを減らすために使おうとしていたパッケージに dataloader というものがあります。 現在は GraphQL ではなく gRPC-Web を利用したアプリを書いているのですが、dataloader は別に GraphQL に…

TypeScript の型定義を観点に gRPC-Web の実装ライブラリを比較する

gRPC-Web の実装を調べてみると、どうやら複数の実装があるみたいです。 それぞれ関連ライブラリの組み合わせが決まっており、きちんと区別しないと混乱しそうなのでまとめてみます。 比較のために作成したプロジェクトは以下に置いてあります。 gRPC-Web の…

TypeScript の絶対パスの import をプロジェクトルートから辿るようにする

何やら TypeScript では絶対パスでプロジェクトルートから import を行えるようだと耳にしました。これで相対パス地獄から逃れることができますね。早速動作確認していきたいと思います。 使用した TypeScript のバージョンは 3.0.3 です。 動作確認 src/app…

react-redux-typescript-guide を読んだ感触

Redux + TypeScript の検証作業で疲弊していたところで react-redux-typescript-guide を読んだら思ったより色々まとまっていて、検証のモチベーションがちょっと高まりました、という感想文です。 現在 Redux + TypeScript でアプリを作ろうと色々調べてい…

Redux + TypeScript 周りの調査

最近 Redux に手を伸ばし始めました。JavaScript で経験を積まずにいきなり TypeScript から始めたせいか無駄に試行錯誤したりハマっている気がしますが、めげずに界隈の状況把握から進めていきたいと思います。 今回は主に typesafe-actions と typescript-…