概要 localStorageのset/get/removeのパフォーマンスを計測。大量のデータを扱うと確かに遅いが、通常の利用範囲内であれば、パフォーマンス上の懸念は薄いと考えられる。 背景 localStorage使用の懸念点として、「localStorageは同期的に読み書きされるため、パフォーマンス影響が出やすい」旨を聞くことがあります。 たとえば、下記記事でもlocalStorageの短所の一つとして述べられています。 これに対し、実際のlocalStorageのパフォーマンスを実測した記事(2019年以降のもの)はいくつか見つかります。下記2つの記事では、localStorageが同期的な処理である問題はありつつも、処理自体は比較的高速であると結論しています。 しかし、上記記事では、下記のような計測の問題点もあります。 get/setのそれぞれの操作にかかる時間が分離されていな

フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと

2023/3に正式リニューアルされたreactのドキュメントを改めて読む。 https://react.dev/learn のLEARN REACTの部分で気になったところをまとめていく。 Describing the UI Your First Component 特になし Importing and Exporting Components componentをdefault exportとnamed exportどっちにするかは、チームで統一する場合もあるが、特に公式でどちらかを推してるわけではない。 Writing Markup with JSX JSXの利点: ロジックにマークアップをsyncできる。マークアップ上のコンポーネントごとにロジックを分離できる HTMLをJSXに変換してくれる便利ツールがある。class -> classNameとかの属性名変換もやってくれる Jav