JavaScript

スポンサーリンク
React

[Next.js] window, sessionStorage, localStorageなどが使用できない原因

概要 Next.jsでwindowなどブラウザオブジェクトにアクセスするとReferenceErrorとなってしまう。 console.log(window) // ReferenceError: window is not defined これはデフォルトでサーバサイドレンダリングが有効になっているからであり、if文でブラウザオブジェクトが存在するかどうかを判定することでエラーを回避することがで...
2023.05.06
React
React

[Next.js] SSRを無効にする方法

概要 Nuxt.jsはデフォルトでサーバサイドレンダリングが有効になっているため、サーバサイドでは存在しないwindow, localStorage, sessionStorageなどのオブジェクトを参照しようとするとエラーになってしまう。 Nuxt.jsの場合はnuxt.config.tsでssr: falseを指定することでSSRを無効にすることができるが、Next.jsの場合はnext/dy...
2023.05.04
React
React

[Next.js] CDN版のCSSやJavaScriptを使う方法

概要 Next.jsで外部のCSSやJavaScriptを使う場合、通常はnpmパッケージをインストールしたものをimportする。何らかの事情でCDN版を使いたい場合は、linkタグやscriptタグをNext.jsのルールに則った場所に記述する必要がある。 linkタグ pages/_document.js（拡張子はjsx, ts, tsxなど環境に依存）内に記述する。 import { He...
2023.05.02
React
スポンサーリンク
React

[React] import文を絶対パスで記述できるようにする方法

概要 React.jsでの開発において、jsconfig.json（TypeScriptの場合はtsconfig.json）のcompilerOptionsにbaseUrlを指定すると、import文を絶対パスで記述できるようになる。 { "compilerOptions": { // 省略 "baseUrl": "." } } これによりimport Header from '../../../...
2023.04.30
React
React

[React] 多次元配列(オブジェクト)のsetStateが2回実行されてしまう原因

概要 ReactのuseStateフックを使って管理している多次元の配列やオブジェクトを更新する場合、元の配列・オブジェクトをディープコピーしなければならない。 シャローコピーだと破壊的変更となってしまい、StrictモードではsetStateが2回呼び出されてしまう。 例 検証用コード import {useCallback, useState} from 'react' export defa...
2023.04.28
React
React

[react] レンダリング時に毎回実行したい処理をどこに書くべきか？

概要 useEffectの第2引数を指定しないとレンダリングの度に処理が実行されるが、それは関数コンポーネント内に直接書いた処理と何が違うのか。 例えば、以下の処理ではinitializeとupdateは初回のレンダリング時やstateの更新時など同じタイミングでコンソールに出力される。 const Sample = () => { const = useState(0); console.log...
2023.04.01
React
React

[react] useEffectが実行されるタイミング

概要 reactのuseEffectフックは第2引数によって実行されるタイミングが異なる。 第2引数なしレンダリングされる度に実行されるクラスコンポーネントのcomponentDidUpdateメソッドと同等 第2引数が空配列マウント時のみ実行されるクラスコンポーネントのcomponentDidMountメソッドと同等 第2引数が変数を要素に持った配列マウント時および変数が更新された際に実行される...
2023.03.16
React
Node.js

jwt.verify()でRight-hand side of ‘instanceof’ is not an objectとなる原因

概要 npmのjsonwebtokenパッケージのverifyメソッドを使ってjwt.sign(token, 'hoge');のようにJWTトークンをデコードするとRight-hand side of 'instanceof' is not an objectとなり例外が発生してしまうことがある。 原因 jsonwebtokenのバージョン9はNode.js環境では問題ないが、ブラウザ上では正常に...
2023.01.28
Node.js
Node.js

MongooseでlocalhostのmongoDBに接続できない原因

概要 localhostだと接続できないが127.0.0.1だと接続できるとのこと。 OK mongodb://127.0.0.1:27017/xxx import mongoose from 'mongoose' const connectDB = async () => { try { await mongoose.connect('mongodb://127.0.0.1:27017/xxx'...
2023.01.22
Node.jsサーバ
TypeScript

【TypeScript】typeとinterfaceの違い

概要 TypeScriptで型を定義するには、typeまたはinterfaceを使う。 typeとinterfaceには細かい違いはいくつかあるが、普通に型を定義するだけであれば違いはない。 混在するとわかりづらくなるため、どちらを使うかプロジェクト内で統一するとよい。 定義方法の違い typeは代入、interfaceは宣言 type type User = { name: string; ag...
2022.11.05
TypeScript
スポンサーリンク
次のページ