JavaScript

ドラッグで要素を移動させる - React

導入 ドラッグで要素を移動させるような実装について、方法と注意点等を書きます。 デモをCodesandboxに置いています。 注意が必要な部分について先に箇条書きしておきます。 setPointCapture / releasePointCapture を使わないとスムーズな挙動にならない R…

Reactでコンポーネントの外側がクリックされた際にドロップダウンやモーダルを閉じる等の動作をする

ToC ToC 導入 実装 解説 コンポーネント外クリックの取得 リスナーの登録・解除 参考・関連 導入 こういうやつを関数コンポーネント+フックで書きます。 Material-UI等にも存在しますが、それだけのために依存を追加したくない場合や勉強のために実装しまし…

eslint-plugin-reactのno-exhaustive-depsは何故propsのプロパティの関数を使う際にpropsも依存に要求するのか

TL;DR 背景 理由 挙動の確認 対処法 TL;DR オブジェクトのpropetyの関数をコールする際にthisが渡されるため。 propsは常に分割代入しておくのがよいとされる(react/destructuring-assingmentでESLintに設定可能)。 背景 eslint-plugin-reactのno-exhausti…

JavaScriptの for...of vs forEach

目次 目次 TL;DR 導入 副作用を起こす場合for...ofよりforEachを使う論拠 forEachにより不吉な臭いを明示できる for...ofに対するpollyfilが要求するregenerator-runtimeは重すぎる とはいえfor..ofを使いたいケースもあるのでは? まとめ TL;DR forEachは案…