React

「作って学ぶ Next.js/React Webサイト構築」の感想・備忘録

作って学ぶ　Next.js/React　Webサイト構築posted with ヨメレバエビスコムマイナビ出版 2022年08月01日頃楽天ブックスで見る楽天koboで見るAmazonで見るKindleで見る ebookjapanで見る点数 77点感想システム開発というよりはCSSなどデザイン系の内容が多かった。この書籍の発売日は2022/7/30とそこまで古くはないのにも関わらず、N...

2023.05.27

React(書評)

「基礎から学ぶ React/React Hooks」の感想・備忘録2

基礎から学ぶ React/React Hooksposted with ヨメレバasakohattori シーアンドアール研究所 2021年08月24日頃楽天ブックスで見る楽天koboで見るAmazonで見るKindleで見る ebookjapanで見る「基礎から学ぶ React/React Hooks」の感想・備忘録1の続き React Hooks useEffectのクリーンアップ関数ク...

2023.05.20

React(書評)

「基礎から学ぶ React/React Hooks」の感想・備忘録1

基礎から学ぶ React/React Hooksposted with ヨメレバasakohattori シーアンドアール研究所 2021年08月24日頃楽天ブックスで見る楽天koboで見るAmazonで見るKindleで見る ebookjapanで見る点数 79点感想 JavaScriptからReact.jsまで幅広く書かれていた。基礎から丁寧に説明されているが、なんとくなく全体的にわか...

2023.05.13

React(書評)

[Next.js] 環境変数を使う方法

概要 APIキーなどをコードに埋め込むのはセキュリティ上好ましくないため、環境変数として用意するのが一般的である。 .env開発・本番に依存しないデフォルト値を定義する。 .env.local開発・本番に依存しないシークレットな値を定義する。(.gitignoreに追加する) Next.jsで使うAPIキーを管理するだけであれば、.env.localを用意すれば良い。 API_KEY=XXXXXX...

2023.05.10

React

[Next.js] Font Awesomeを導入する方法

概要 Next.jsでFont Awesomeを使うための手順をまとめました。インストールコアnpm install @fortawesome/fontawesome-svg-core Reactコンポーネントnpm install @fortawesome/react-fontawesome 以下のアイコンパッケージは必要な分だけインストール。 Solidnpm install @forta...

2023.05.08

React

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

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

2023.05.06

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] import文を絶対パスで記述できるようにする方法

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

2023.04.30

React

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

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

2023.04.28

React

「モダンJavaScriptの基本から始めるReact実践の教科書」の感想・備忘録8

モダンJavaScriptの基本から始める　React実践の教科書posted with ヨメレバじゃけぇ（岡田　拓巳） SBクリエイティブ 2021年09月18日頃楽天ブックス楽天koboAmazonKindle 「モダンJavaScriptの基本から始めるReact実践の教科書」の感想・備忘録7の続きメモアプリの作成カスタムフック化前 npx create-react-app memo-...

2023.04.24

React(書評)