React(書評)「基礎から学ぶ React/React Hooks」の感想・備忘録1
基礎から学ぶ React/React Hooksposted with ヨメレバasakohattori シーアンドアール研究所 2021年08月24日頃 楽天ブックスで見る楽天koboで見るAmazonで見るKindleで見る ebookjapanで見る 点数 79点 感想 JavaScriptからReact.jsまで幅広く書かれていた。 基礎から丁寧に説明されているが、なんとくなく全体的にわか...
React(書評)
Docker[docker] MySQLで日本語が文字化けしてしまう場合の解決法
概要 dockerのMySQLコンテナはそのまま使うと日本語が文字化けしてしまう。MySQLの設定ファイルmy.cnfで文字コードを指定することで、文字化けを解消することができる。 手順 1. my.cnfを用意し、任意のディレクトリ内に格納する ここではmysql/my.cnfとする。 character_set_server = utf8mb4 collation-server=utf8mb4...
React[Next.js] 環境変数を使う方法
概要 APIキーなどをコードに埋め込むのはセキュリティ上好ましくないため、環境変数として用意するのが一般的である。 .env開発・本番に依存しないデフォルト値を定義する。 .env.local開発・本番に依存しないシークレットな値を定義する。(.gitignoreに追加する) Next.jsで使うAPIキーを管理するだけであれば、.env.localを用意すれば良い。 API_KEY=XXXXXX...
React[Next.js] Font Awesomeを導入する方法
概要 Next.jsでFont Awesomeを使うための手順をまとめました。 インストール コアnpm install @fortawesome/fontawesome-svg-core Reactコンポーネントnpm install @fortawesome/react-fontawesome 以下のアイコンパッケージは必要な分だけインストール。 Solidnpm install @forta...
React[Next.js] window, sessionStorage, localStorageなどが使用できない原因
概要 Next.jsでwindowなどブラウザオブジェクトにアクセスするとReferenceErrorとなってしまう。 console.log(window) // ReferenceError: window is not defined これはデフォルトでサーバサイドレンダリングが有効になっているからであり、if文でブラウザオブジェクトが存在するかどうかを判定することでエラーを回避することがで...
React[Next.js] SSRを無効にする方法
概要 Nuxt.jsはデフォルトでサーバサイドレンダリングが有効になっているため、サーバサイドでは存在しないwindow, localStorage, sessionStorageなどのオブジェクトを参照しようとするとエラーになってしまう。 Nuxt.jsの場合はnuxt.config.tsでssr: falseを指定することでSSRを無効にすることができるが、Next.jsの場合はnext/dy...
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...
React[React] import文を絶対パスで記述できるようにする方法
概要 React.jsでの開発において、jsconfig.json（TypeScriptの場合はtsconfig.json）のcompilerOptionsにbaseUrlを指定すると、import文を絶対パスで記述できるようになる。 { "compilerOptions": { // 省略 "baseUrl": "." } } これによりimport Header from '../../../...
React[React] 多次元配列(オブジェクト)のsetStateが2回実行されてしまう原因
概要 ReactのuseStateフックを使って管理している多次元の配列やオブジェクトを更新する場合、元の配列・オブジェクトをディープコピーしなければならない。 シャローコピーだと破壊的変更となってしまい、StrictモードではsetStateが2回呼び出されてしまう。 例 検証用コード import {useCallback, useState} from 'react' export defa...
WordPress[WordPress]SEOパネルなどの位置を右から下に移動する
概要 WordPressのブロックエディタにて、元々は画面の一番下にあったSEOパネルの位置が右に移動して戻せなくなってしまったが、以下の手順で元の位置に戻すことができた。 おそらく、カスタムフィールドを有効にすることでSEOパネルをドロップする場所が作成されたのだと思われる。 手順 1. 右上の縦三点リーダー「︙」をクリック 2. 「設定」をクリック 3. 「パネル」をクリック 4. 「カスタム...