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[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. 「カスタム...
React[react] レンダリング時に毎回実行したい処理をどこに書くべきか？
概要 useEffectの第2引数を指定しないとレンダリングの度に処理が実行されるが、それは関数コンポーネント内に直接書いた処理と何が違うのか。 例えば、以下の処理ではinitializeとupdateは初回のレンダリング時やstateの更新時など同じタイミングでコンソールに出力される。 const Sample = () => { const = useState(0); console.log...
React[react] useEffectが実行されるタイミング
概要 reactのuseEffectフックは第2引数によって実行されるタイミングが異なる。 第2引数なしレンダリングされる度に実行されるクラスコンポーネントのcomponentDidUpdateメソッドと同等 第2引数が空配列マウント時のみ実行されるクラスコンポーネントのcomponentDidMountメソッドと同等 第2引数が変数を要素に持った配列マウント時および変数が更新された際に実行される...
WordPress[WordPress]Advanced Custom Fieldsの日付に曜日を表示させる方法
概要 WordPressのAdvanced Custom Fieldsプラグインを使って作成した日付型カスタムフィールドは日付しか表示されないため、テーマファイルに曜日表示処理を追加してみました。 修正前 <?=get_field('the_date')?> <!-- the_dateはカスタムフィールドのフィールド名 --> 修正後 <?php $week = array( "日", "月", ...
WordPress[WordPress]投稿ページや固定ページのテンプレートが反映されない？
概要 WordPressのテンプレートには優先順位がある。 固定ページであればpage-xxx.php⇒page.php⇒singular.php⇒index.phpの優先順位となっている。 singular.phpは投稿と固定ページの両方で適用されるファイルであり、古いWordpressにはなかったものである。 これを知らないと、index.phpが適用されていると勘違いしてしまうことになる。 ...
WordPress[WordPress]Contact Form7で確認用アラートを表示させる方法
概要 WordPressのContact Form 7プラグインでは、送信ボタンをクリックするとすぐに送信が実行されてしまう。 Contact Form 7 add confirmなどのプラグインを使えば確認画面を表示させることができるが、確認用アラート（JavaScriptのconfirm）を表示するだけであればプラグインを使わずに実装することができる。 手順 1. Contact Form 7...
Node.jsjwt.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環境では問題ないが、ブラウザ上では正常に...