2023-01

React

【React × Vite】Uncaught ReferenceError: global is not defined

ReactとViteとFirebaseで構築したアプリで以下のエラーが発生したのでその解消方法をまとめました。 Uncaught ReferenceError: global is not defined エラー原...
React

【React】Headless UIのDialogの使い方を丁寧に解説

ReactでDialog(Modal)を実装するUIライブラリといえば、王道はMaterial UIかと思います。 ですが、今注目を集めているUIライブラリといえばtailwindCSSではないでしょうか。 Material ...
React

【React】MUI DataGrid リストから詳細に遷移する3つの方法

Reactでリストを作るといえばコレですよねMUIのDataGrid! そのDataGridを使い、リストから詳細ページへの遷移をさせたいと思うことが多いのではないでしょうか。 詳細ページへの遷移方法はいろいろあります...
React

【React Hook Form】MUIライブラリと素のHTMLの違いをラジオボタンで比較

Reactでフォームを作成するときに便利で優秀なライブラリ、React Hook Form! 素のHTMLで使用するなら導入は簡単ですが、MUI等のUIライブラリと組み合わせると、記述が少し複雑になりますよね。その違いを比較して整理...
JavaScript

【GAS】覚えておきたい頻出メソッド集

業務の自動化を行うため、SpreadSheetでGASを使ったスクリプトをよく組んでいます。 しかし、何かを作るたびにググってとても効率が悪いことを繰り返しているのでこの度メソッドをまとめ、GASおまとめ集を作ることにしました。 ...
React

【React × Firebase】CRUDを学ぶ

本記事は、firebaseでのCRUDのクエリの書き方を手っ取り早く知りたい方のために書きました。 はじめに Reactで使用するFirebaseのJavaScriptのSDKは2021年8月25日にv8→v9へメジャーバージ...
Next.js

【Next.js】SWRとTanStack Queryの違いを比較

useEffectを使ったデータ取得から脱却し、高速化を図るイケてるライブラリであるよく似た2つ、"SWR"と"TanStack Query"を同じデータの取得を通し、違いの比較をしました。 この記事を見ていただくことで、両者の使い...
React

【React】Suspenseのすごさ(Streaming HTML と Selective Hydration)

Suspenseはすごいです! Next.jsでSSRでアプリを作ったものの、初回レンダリング時何も表示されない画面の待機時間が長く、UX悪すぎだろ!それならCSRで作るわ!とSSRの使用を諦めてしまってませんか? はい、私が...
React

【React】TanStack QueryとSuspenseを使って、data fetch, loading, errorの表示

2023年1月時点、TanStack Queryの最新バージョンはv4です。v3までは名前がReact Queryでしたがv4より変更となっておりますのでお間違いなく。 環境 react @18.2.0 ...
React

【React × TypeScript】childrenとonClickイベントがある場合のButtonのComponent化

ReactのComponent化は習得した、childrenの使い方もわかった、onClickイベントの使い方もTypeSciptもある程度わかるようになった。 がしかし!onClickイベントを含んだButtonのComponen...