JavaScript

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サーバ

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

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

2021.07.25

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(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で任意の位置へスクロールさせる方法はいくつかある。document.documentElement.scrollTopはブラウザのバージョンによっては動作しない。(Microsoft Edgeなど)要素.scrollIntoView()またはwindow.scrollTo(x, y)を使った方がよい。要素.scrollIntoView() window.scrollTo...

2020.08.27

JavaScript

【JavaScript】スクロール量(位置・座標)の取得方法

Windowのスクロール量 window.pageYOffsetで取得することができる。ただし、IE8以前は非対応のためdocument.documentElement.scrollTopとする必要がある。よって、(window.pageYOffset || document.documentElement.scrollTop)と書くことで、クロスブラウザ対応することができる。 window.a...

2020.05.22

JavaScript

【脱jQuery】JavaScriptだけで要素のwidth, heightを取得・設定する方法

jQueryのwidthメソッド、heightメソッドをJavaScriptだけで実装する方法をまとめました。 width, heightの取得 jQuery const width = $('#hoge').width(); const height = $('#hoge').height(); JavaScript // borderとscrollbarの高さをめない場合 const widt...

2020.05.11

JavaScript

「JavaScriptエンジニアのためのNode.js入門」の感想・備忘録

posted with ヨメレバAmazonで見るKindleで見る Kindle本「JavaScriptエンジニアのためのNode.js入門」のまとめ。点数 77点感想 Node.js超入門と似たような内容だが、こちらはページ数が少ないこともあり大雑把な説明だった。cookie-parserなど、こちらにしか書かれていないなこともあった。2つの書籍を読んだことで、理解度をアップすることができ...

2020.05.04

JavaScript(書評)

【脱jQuery】jQueryのliveメソッド、 onメソッドをJavaScriptだけで記述する方法

概要【脱jQuery】JavaScriptだけでイベント処理を行うでは、既に存在する要素のイベントハンドラを定義したが、jQueryのonメソッド（古いバージョンではliveメソッド）は要素が後から追加された場合でもイベントハンドラが実行される。これをJavaScriptだけで実現させる場合、以下のようにdocumentオブジェクトに対してaddEventListenerでイベントハンドラを登...

2020.04.16

JavaScript

【JavaScript】ブラウザバック(戻るボタン)を無効化する方法

概要 JavaScriptのHistory APIでブラウザの戻るボタンを無効化することができる。サンプル window.history.pushState(null, null, null); window.addEventListener("popstate", function() { window.history.pushState(null, null, null); return; ...

2020.04.08

JavaScript