JavaScript

[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

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】typeとinterfaceの違い

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

2022.11.05

TypeScript

vue serveコマンドで.vueファイルを実行することができない原因

概要 vue serveコマンドはプロジェクトを作成せずに、.vueファイルを単体で実行することができる。しかし、Vue CLI5では動作しない。（2022年4月現在）解決法 Vue CLI4では正常に動作する。 npm install @vue/cli@4npm install @vue/cli-service-globalnpx vue serve Hoge.vue

2022.04.23

Vue.js

「はじめてつくるReactアプリ with TypeScript」の感想・備忘録

kindle本「はじめてつくるReactアプリ with TypeScript」のまとめ。点数 82点感想とてもわかりやすかった。作成するアプリは簡単なものだが、ひとつひとつの説明が丁寧で理解しやすい内容だった。 Reactのimportが不要になった React version 17からはindex.tsx以外のファイルではimport React from 'react';を省略できる...

2021.09.14

React

「React学習挫折経験者による挫折しないReact基礎学習」の感想・備忘録

kindle本「React学習挫折経験者による挫折しないReact基礎学習」のまとめ。点数 50点感想 CDNを使って関数コンポーネントで実装する、という内容だった。 Props, Stateを少し使って終わりのため、本当の初心者向けの内容だと思う。

2021.09.07

React

【JavaScript】正規表現にgオプションを指定して複数回実行する場合の注意点

概要 JavaScriptの正規表現オブジェクトのtestメソッドをgオプションを指定して実行した場合、正規表現オブジェクト内に次の開始位置が保持される。（lastIndexプロパティ）そのため、同じ正規表現オブジェクトを複数回使い回すと、2回目以降は開始位置が先頭ではなくlastIndexの位置からとなる。よって、同じ文字列に対して同じ正規表現オブジェクトのtestメソッドを実行しても、1回...

2021.07.25

JavaScript

Reactで「Form submission canceled because the form is not connected」となる原因

現象フォームのonSubmitイベントハンドラにて、react-router-domを使ってhistory.push('xxx')のように画面遷移を行うと、コンソールにForm submission canceled because the form is not connectedというエラーが表示される。 import React, {FC, FormEvent} from 'react'...

2020.10.02

React

【JavaScript】ドラッグアンドドロップAPIの使い方と動作しない時の原因

Drag & Drop APIとは Drag & Drop APIは要素をドラッグアンドドロップすることができるHTML5のAPIであり、ほぼ全てのブラウザで動作する。（※スマートフォンでは動作しない） Drag & Drop APIの使い方ドラッグドラッグしたい要素にdraggable="true"を付ける。 <p id="draggable" draggable="true" style=...

2020.09.10

JavaScript