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
Vue.js 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 「はじめてつくる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学習挫折経験者による挫折しないReact基礎学習」の感想・備忘録 kindle本「React学習挫折経験者による挫折しないReact基礎学習」のまとめ。 点数 50点 感想 CDNを使って関数コンポーネントで実装する、という内容だった。 Props, Stateを少し使って終わりのため、本当の初心者向けの内容だと思う。 2021.09.07 React
JavaScript 【JavaScript】正規表現にgオプションを指定して複数回実行する場合の注意点 概要 JavaScriptの正規表現オブジェクトのtestメソッドをgオプションを指定して実行した場合、正規表現オブジェクト内に次の開始位置が保持される。(lastIndexプロパティ) そのため、同じ正規表現オブジェクトを複数回使い回すと、2回目以降は開始位置が先頭ではなくlastIndexの位置からとなる。 よって、同じ文字列に対して同じ正規表現オブジェクトのtestメソッドを実行しても、1回... 2021.07.25 JavaScript
React 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 【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
JavaScript JavaScript(ES2015, ES6)でオブジェクトをコピーする方法 概要 ES2015から導入された分割代入を使うと、オブジェクトのコピーを簡単に記述することができる。 const obj = {name: 'hoge', age: 20}; const newObj = { …obj }; ES5の場合 Object.assign()を使う。 var obj = {name: 'hoge', age: 20}; var newObj = Object.assig... 2020.09.03 JavaScript
JavaScript 【JavaScript】任意の位置へスクロールさせる方法 概要 JavaScriptで任意の位置へスクロールさせる方法はいくつかある。document.documentElement.scrollTopはブラウザのバージョンによっては動作しない。(Microsoft Edgeなど)要素.scrollIntoView()またはwindow.scrollTo(x, y)を使った方がよい。 要素.scrollIntoView() window.scrollTo... 2020.08.27 JavaScript