アーカイブ：2021年 5月
-
【React】「React Query」について
05.30
React Queryとは？ 2020年2月にリリースされた。 メリット fetchの回数を減らせる。 サーバーから取得したデータをキャッシュに格納できるようになり、不要なAPI fetchの回数を減らすことができるようになったus…
-
【React】パフォーマンス改善対策
05.30
Reactのパフォーマンス改善対策には、主に2つあります。 1.サーバーからのデータ取得回数を減らす キャッシュをすることが重要。従来のuseContextやReduxはキャッシュのメカニズムを持っていない。 近年登場したサーバー…
-
Reduxで非同期の場合のSliceの作り方は下記のようになります。 [crayon-6179554d0d05b122559723/] createAsyncThunk 従来のreduxだとredux-thunkなどのミドルウェアで行…
-
Error Boundaryとは？ Error Boundary という子コンポーネントツリーでエラーが発生した際にクラッシュした UI を表示させる代わりに、フォールバック用の UI を表示するコンポーネントがあります。React16以…
-
as、any TypeScriptが提供する型安全を否定する行為であり基本的に使ってはいけない。 anyやasを使って良いケース TypeScriptのコンパイルが完璧ではなく使用を余儀なくされるケースがある。 ? オブジェクト（…
-
useSWRとは？ 「クライアントサイドレンダリング」の技術です。 「静的なページでSEO対策をしつつ、さらにリアルタイムにデータを取得する」と言うことを実現できます。 非同期なので少しラグがあった上で実行されます。公式ページ…
-
【Next.js】ページ遷移について
05.16
リンク形式でページ遷移をさせたい場合 NextJsのLinkコンポーネントを使う。 ページ遷移を実現できるコンポーネントです。 [crayon-6179554d0e125147451251/] 以下のように使います。 [crayo…
-
getStaticPropsとは？ Next.js内（フロントエンド）で定義した関数が必ずバックエンドで実行される。 pages内でのみ使用可能 「npm run dev」の場合はリクエスト毎に実行される。 「n…
-
【Next.js】「コンポーネント」一覧
05.09
Head [crayon-6179554d0e8c2130229121/] 以下のように使います。タイトルが表示されます。 [crayon-6179554d0e8cc817079285/] Link ページ遷移を実現できるコンポー…
-
【Next.js】導入
05.08
Next.jsプロジェクトのインストール [crayon-6179554d0ed2c314072583/] コマンド npm run dev ローカルサーバーを起動する。以下のURLでアクセスすることができます。 [crayon-…