React ステート管理 比較考察2021年7月24日 公開Reactこんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレー Re…全文を見る
useCallbackはとにかく使え! 特にカスタムフックでは2021年2月23日 公開ReactReactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的にはReact.memo、useMemo、そしてuseCallbackです。 React.memoで囲まれた関数コンポーネントは、propsが以前と変わっていない場合に再レンダリングが抑制されます。 また…全文を見る
CSSとコンポーネント設計に対する考察2020年12月20日 公開CSSReact近年のフロントエンド開発にはコンポーネントという概念が付いて回ります。React・Vue・AngularといったViewライブラリでは、コンポーネントを定義してそれを組み合わせてアプリを作ります。また、いわゆるWeb Componentsとして知られる仕様群により…全文を見る
まとまったCSSを別のコンポーネントに分けないでほしい話2020年10月15日 公開Reactこの記事は、ReactでCSSを書くときに関連したCSSを別々のコンポーネントに分けるのをやめようという記事です。主な理由は、スタイリングという機能が複数コンポーネントに分散するのを防ぐためです。これには修正時に複数コン…全文を見る
react-wc: Web ComponentsとReactで実現するCSS in JSの形2020年10月3日 公開ReactCSS in JSはJavaScriptのコードの中にCSSを書く手法の総称で、CSS Modulesやstyled-componentsなどがよく利用されています。 この記事では、筆者がCSS in JSについて考えてたどり着いた一つの解を紹介します。 また…全文を見る
究極のReact向けルーターライブラリ「Rocon」正式リリース2020年8月16日 公開RoconReactTypeScriptこんにちは。前回の記事でご説明したReact向けのルーターライブラリ「Rocon」をこの度正式リリース(1.0.0リリース)したのでご報告します。 Roconに関する詳しいことは前回の記事をご覧いただきたいのですが、簡単に説明するとRoconの特徴は非常に型安全であることです…全文を見る
究極のReact向けルーターライブラリ「Rocon」を作った2020年8月10日 公開RoconReactTypeScriptこんにちは。先月くらいからReact向けのルーターライブラリ「Rocon」を作っていて、この度alphaリリースという形で公開まで漕ぎ着けたので宣伝します。 現在のところ、以下のURLでチュートリアルを読むことができます。…全文を見る
react-routerで現在のlocationを取得する2種類の方法の使い分け方2020年6月10日 公開 / 2020年6月10日 更新ReactJavaScriptSPAを作る際は、URLを変化させたり、URLの変化に反応して画面を変えたりする必要があります。このために使われるのがルーティングライブラリです。Reactにおいては、react-routerが代表格として知られています。 react…全文を見る
useEffectのdeps比較関数をカスタムしたくなったときにやること2020年5月25日 公開ReactJavaScriptReactにおいて、useEffectなどいくつかのフックは第2引数として依存リストを取ります。 例えばuseEffectの場合、レンダリングの度に依存リストのいずれかの値が前回から変化したかどうかがチェックされ、変化していた場合はレンダリング後にコールバック関数が呼び出されます…全文を見る
Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する2020年5月15日 公開ReactRecoilJavaScript昨日、Facebook製のReact用ステート管理ライブラリ**Recoil**が発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで…全文を見る