はてなブックマーク

先日『フロントエンド監視の全体像と実現方法』という記事を投稿しましたが、その中でテレメトリについては触れませんでした（※本記事は上記記事の内容を知らなくても読み進められるようになっています）。 というのは、テレメトリは可観測性を実現するための重要な概念ではあるものの、テレメトリを軸に監視を考えるのは手段の目的化になってしまうと考えているからです。 重要なのはサービスにとって何を観測するべきかを考えることであり、テレメトリはそれを設計や実装に落とし込む際に現れるものです。 一方で監視に対する理解を深める上では、テレメトリを軸に考えることも重要でしょう。 そこで本記事ではフロントエンド監視においてどのようなテレメトリを収集するべきか述べていきます。 監視 SaaS と OpenTelemetry (OTel) Datadog, New Relic, Sentry のいずれかを利用することを考え

React Hook Form は高速。 Formik は早くない。改善は可能。 React Final Form はある程度早い。 React Hook Form が無難ではあるものの、CPU 6× slowdown で 100ms は通常では許容できると考え Formik を採用するのもあり。 比較したライブラリ 計測の対象にしたライブラリは以下の 3 つです。 React Hook Form Formik React Final Form パフォーマンス以外の特徴にも触れておくと、 React Hook Form TypeScript 製 頻繁に更新されている UI とフォームライブラリが密結合になりやすい Formik TypeScript 製 ある程度更新されている UI とフォームライブラリを疎結合にしやすい React Final Form コードのほとんどが JavaScr

タイトルの通りです。 普通（？）のオブジェクト型に対して一部のプロパティを取り出したり削除したりしたい時にはPickやOmitを使いますね。 ただPickとOmitはUnion typesに対して分配的には効きません（後述）。 そこでUnion typesに対して分配的にPickやOmitをする方法を考えていきます。 実際に作ろうと思ったときと同じ手順で説明していくので、これからGeneric typesを書いていきたい方の参考にもなればと思います。 結論 // 補助的な型 type KeyOfUnion<T> = T extends T ? keyof T : never; // 分配的なPick type DistributivePick<T, K extends KeyOfUnion<T>> = T extends T ? Pick<T, Extract<K, keyof T>> :