- 2025年1月31日
【React】ユーザーに複雑な条件を構築してもらう必要がある時に便利なReact Query Builderの紹介
しばしばユーザーがなにか複雑なルールを構築するシステムをwebアプリケーション上に実現する必要があります。例えばアンケートシステムの設問の表示・非表示の切り替え条件、顧客がどのよ […]
CATEGORY
React
- 2024年5月8日
【React】【TypeScript】void演算子を使って返り値を持つ関数をuseEffectの処理本体にしても型エラーにしない
ReactのuseEffectは任意のライフサイクルで発火する副作用を管理するためのフックです。ちょっと便利すぎるくらいですがレンダリングの回数が増えるのでなるべく使わないことが […]
- 2023年10月5日
【React】React Routerで同じURLに移動した時に画面をリセットする
この記事で使っている React Router のバージョンは 6.2.2 です。 React Routerは、React用のルーティングライブラリであり、SPA（Single […]
- 2023年6月6日
【React】Pinterestのようなレイアウトを実装できるライブラリ「react-stack-grid」
今回は、子コンポーネントをページに並べる際に導入したライブラリ「react-stack-grid」のご紹介です。 現在開発中のシステムで、カードコンポーネントを複数並べるというレイ […]
- 2023年3月10日
【React】しなくてもいいレンダリングが多そうな時の Why Did You Render を使ったレンダリングチェック方法と速度改善方法の紹介
React のレンダリングアルゴリズムはざっくりいうと「コンポーネントの持つデータに差分があり次第、再レンダリングする」というものです。この差分ですが JavaScript にお […]
- 2023年2月3日
【React】ESLint と eslint-plugin-react-hooks で期待通りのタイミングで動かなそうな useEffect や useMemo などを見つける
React には useEffect、useMemo、useCallbackといった特定の値が変わった時、それを検知して動くフックが用意されています 副作用フックの利用法 – R […]
- 2023年1月19日
【React】「React Image Crop」ライブラリを使って画像を切り抜く
だいぶ久しぶりの投稿になりましたが、今回は「React Image Crop」ライブラリについてです。 現在開発中のプロジェクトで、画像の切り抜き機能を実装する必要があったので、そ […]
- 2023年1月18日
- 2023年1月18日
【React】【TypeScript】データ属性を含めてHTML要素の属性の型を定義する
とりあえず↓の型を使えばいい感じに動いてくれます。 以下は上記の型とその型で何をしたかったのかの説明です。 React のコンポーネントを定義する時、次の様に子要素に透過的に […]
- 2022年12月1日
- 2022年12月1日
【React】任意の要素のドラッグ&ドロップ時にオブジェクト等の自由なデータの受け渡しもする方法
しばしばドラッグ&ドロップで要素を移動した際に値も受け渡したい場合があります。しかなしながら素の JavaScript のドラッグ&ドロップのイベントでは要素 […]
- 2022年10月4日
【React】Date range pickerを実装できるライブラリ「react-dates」
Material UI の Date range picker は Pro Plan でしか使えなかったので、無料で使用できるものを探してたどり着いたのがこちら。 「react-d […]
- 2022年9月16日
- 2022年9月19日
【React】react-leafletで地図上に描画された任意の図形らのGeoJSONをまとめて取得する
Leaflet は地図を描画してその上で様々なことができるライブラリです。react-leaflet はこの Leaflet を React 上で使える様にするライブラリです。 […]
- 2022年9月15日
【React】ブラウザでカメラ撮影を実装できるライブラリ「react-html5-camera-photo」
タイトル通り、ブラウザでカメラを起動し写真を撮影する機能を実装できるライブラリ「react-html5-camera-photo」のご紹介です。 ブラウザでのカメラ機能は、今回初め […]
