うら紙のメモ JavaScript・TypeScript

[React]要素の横幅を取得するcustom hook

指定した要素の横幅のサイズを取得したい場合のカスタムフック。
※ heightにすれば高さも取得が可能

Custom hook


const useElementWidth = (targetElement: RefObject) => {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    const handleResize = () => {
      if (targetElement?.current) {
        const { width } = targetElement.current.getBoundingClientRect()
        setWidth(width)
      }
    }
    window.addEventListener('resize', handleResize)
    handleResize()
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return width
}

window resize イベントのリスナーをセットしたのは、ブラウザのウインドウサイズを変更した時に動的に要素の幅も再計算されるようにするため。

使用する側


const Sample = () => {
  const targetElement = useRef(null);
  const width = useElementWidth(targetElement)

  useEffect(() => {
    console.log(width)
  }, [width])

  return (
    
      xxxxx
    

  )

Pagetop

[Javascript][ES6]分割代入を利用した変数の入れ替え

ECMAScript6から導入された配列の分割代入機能を利用して２つの変数を入れ替えてみる。

従来は作業変数を用意して、一度作業変数に退避させて、一方を代入した後に残りの一方を退避させていた作業変数から戻すようなことをしていた。

var a = 1;
var b = 2;

console.log(a);    // 1
console.log(b);    // 2

var temp = a;
a = b;
b = temp;

console.log(a);    // 2
console.log(b);    // 1

分割代入を利用した方法

let a = 1;
let b = 2;

console.log(a);    // 1
console.log(b);    // 2

[a, b] = [b, a];

console.log(a);    // 2
console.log(b);    // 1

作業変数が不要になり、1行で記載できるのはいいね。

Pagetop

[Node.js]MongoClientでDB接続しようとしたらエラーになった。。。

MongoClientを使用して以下のようにDB接続してコレクションを取得しようとしたら、警告とエラーが出た。。


  MongoClient.connect('mongodb://localhost:20017/hogehoge_db', (error, db) => {

    // コレクション取得
    var collection = db.collection('sample_collection');

■警告
(node:11789) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect.

■エラー
TypeError: db.collection is not a function

警告の方は、丁寧に解決方法を示してくれていますので、 MongoClient.connect()の第２引数に{ useNewUrlParser: true }のオプションを指定してあげれば、Warningは出なくなる。

エラーのほうは、仕様が変わったみたいで使用するDBを明示的に指定しないといけないらしい。

2点を解消したコードは以下。


  MongoClient.connect('mongodb://localhost:20017/hogehoge_db', {useNewUrlParser: true}, (error, client) => {

    // DBを取得
    var db = client.db('hogehoge_db');

    // コレクション取得
    var collection = db.collection('sample_collection');

Pagetop

[Javascript] 数値の先頭を0埋め（パディング）

数値の桁数を決めて、桁が足りない場合は先頭を0埋めすることがあるので、その方法をメモ。

考え方は、n桁固定にしたい場合、先頭に0を(n-1)個つけて余った先頭の0をsliceで切り捨ててしまうということです。

例えば３桁の場合。

var num = 1;
num = ( '00' + num ).slice( -3 );
console.log(num);
// → “001” が出力される

ES6のTemplate literalを使用した場合は以下のようになる。

let num = 1;
num = (`00${num}`).slice(-3);
 console.log(num);
// → “001” が出力される

注意点としては、元のデータがn桁を超えてしまった場合は先頭が切り捨てられてしまうので、
あらかじめlengthメソッドを使って長さのチェックを入れたほうがいいかもしれない。

Pagetop

[Javascript] Dateを1日ずらす

日付を翌日、もしくは前日にしたいということがしばしばあるのでメモ。

// 翌日にする
const date = new Date();
date.setDate(date.getDate() + 1);

// 前日にする
const date = new Date();
date.setDate(date.getDate() - 1);

月跨ぎが面倒かと思っていたら、setDate()で簡単にできた。
2016/05/31を上記方法で、setDate()で+1したら2016/06/01にちゃんと進められた！！

Pagetop