JavaScript

JavaScriptのなんとかObserver

・IntersectionObserver
要素の交差を監視https://t.co/NWWhHES14V

・MutationObserver
要素の変化を監視https://t.co/Jd1UWlFtc6

・ResizeObserver
要素の変形を監視https://t.co/8lB8npPzqN

知人とRxJS・Observableの話をしたときに出た話題#JavaScript

— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) January 17, 2021

JavaScriptのEventTargetについて
・new EventTarget()
・extends EventTarget
が「全モダンブラウザで」可能に💐

Safariが未対応でしたが、BigSurのSafari 14にて漸く対応✨

一定時間後にメッセージを表示するクラスのデモを作りました🍜

ずっと待ってた☺️https://t.co/xeCWHO8x97#JavaScript pic.twitter.com/pdkOEVzx0i

— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) January 17, 2021

"window.location Cheatsheet" by @samantha_minghttps://t.co/leKaBc7J0g

locationについてのまとめ

Locationはコンソールで表示して内容確認して使うみたいに完全に理解してなかったけど、同じようなプロパティ、メソッドでも若干動作が異なるんだね。

— ダーシノ / NES.css (@bc_rikko) May 7, 2020

ES2021に入るであろう新仕様が一つ決まりました。

String.prototype.replaceAll。

"隣の客はよく柿食う客だ".replaceAll("客", "😸")
で、"客"が"😸"になります。

Firefox, Safariは現行版で対応済み。

Chromeは85から対応。https://t.co/8PPVDiRkZX#JavaScript #ES2021 pic.twitter.com/tyVcG5FQcQ

— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) June 25, 2020

checkboxの値がString型になって、なんでやー！ってなってた。そしてhttps://t.co/CkIHWLvRpS.checkedを使えば解消すると気づくのに10分くらいかかった。

今日めっちょ集中してたのでさすがに集中力切れたのかな？

— ダーシノ / NES.css (@bc_rikko) October 2, 2020

new URL() の searchParams の append の存在しらなかった！めちゃ便利やん？URLのライブラリいらんやん？

— tacamy (@tacamy) July 1, 2020

配列ループでindexと要素が同時にほしいときArray.prototype.entries()を使うとモダンな書き方ができる

const arr = […]

// 従来の書き方
for (const i = 0; i < arr.length; i++) {
// i, arr[i]
}

// モダンな書き方
for (const [i, val] of arr.entries()) {
// i, val
}

— ダーシノ / NES.css (@bc_rikko) March 25, 2020

📌addEventListener()でAbortController()が使えるように！

これにより、ドラッグ&ドロップ実装のときのようなremoveEventListener()を複数書く必要がなくなり、見やすくなります！ pic.twitter.com/y2JbQrHylZ

— たかもそ／Web Developer (@takamosoo) February 23, 2021

ページでリロードされたかどうか判定する方法https://t.co/DAfVZ8Alw0

const isReload = performance.getEntriesByType('navigation')[0].type === 'reload'

※ただしIEとSafariは非サポート

— ダーシノ / NES.css (@bc_rikko) June 2, 2020

配列の最初の要素、長さ、最終要素をワンライナーで取得するテクニック。

なるほどすぎて目からコンタクトレンズが落ちました🙀

コードhttps://t.co/aZOgLPemzm

参考https://t.co/xZguF68UnZ#JavaScript #TypeScript pic.twitter.com/IXwOUQqKon

— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) June 27, 2020

配列のsome()の使い途。

検索システムで該当データがない時に「該当なし」と表示したい。

「配列内に該当データがあるかを返す」関数を作る際にfor文やfind()よりsome()を使う方が適切。

配列の単体テストでも有用。

ちなみにforEach()のbreak目的でのsome()を見かけるが、someの用途的に不適切。 pic.twitter.com/dOTDRMDqc9

— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) January 17, 2019

Array.from(Array(30), () => Math.floor(Math.random() * 100))

— すぎゃーん💯 (@sugyan) February 3, 2020

JavaScriptで、シード付きの乱数作成ができる Math.seededPRNG()メソッドをずっと楽しみにしているのですが、全然ステージが上がりません😇https://t.co/2gogQ6Yg2t#JavaScript

— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) July 20, 2020

TypeScript。

HTML要素に対してdocument.querySelectorAll(要素).forEach()する場合は、ジェネリクスとして<HTMLElement>を指定するのがオススメ（図参照）。

参考
forEach()https://t.co/oqVACdT7ka

NodeListhttps://t.co/xqJzKieinb#TypeScript #JavaScript pic.twitter.com/Vz7ha4C4bL

— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) October 23, 2019

YouTubeって最速でも2倍速までしかなくて、1時間の動画を見るためには最短でも30分かかるのつらい…と調べてたところ、playbackRateプロパティを使えば再生速度を自由に変更できることを知った！

// 2.5倍速
document.querySelector('video').playbackRate = 2.5; https://t.co/i4RW1KUsxy

— ダーシノ / NES.css (@bc_rikko) March 21, 2020

前の記事: [JS]レスポンシブ対応のカラーピッカーを簡単に実装できる超軽量のスクリプト -Pickr https://t.co/KJqZ3Gb18Q

— コリス🍡 (@colisscom) July 3, 2020

chart.jsが依存しているmoment.jsをday.jsに置き換える · Issue #2079 · tokyo-metropolitan-gov/covid19https://t.co/oNFnroqtG3

こういうIssue、めっちょありがたい！

— ダーシノ / NES.css (@bc_rikko) September 17, 2020

webpackって便利なようで、何かややこしいな。統合ツールは最大公約数的に機能が拡張されていくし、ネットの情報は散逸的。要らない機能切り分けるだけで疲れた。とりあえずgulpでファイル連結してminify後にjavascript-obfuscatorで難読化したいだけなんだけど。webpack使わなければ即解決する。

— たぁぼまる@沖縄暮らし (@turbomaru_hiro) November 29, 2020

`npm root -g` でグローバルにインストールしたnode_modulesのパスが取得できること知らなかった。

— ダーシノ / NES.css (@bc_rikko) June 3, 2020

最近npm installするたびnode-gyp rebuildが失敗してXcodeインストールし直してるんだけどなんなんだ… https://t.co/0te93CnkRS

— tacamy (@tacamy) April 28, 2020

パッチは違うけど、マイナーまでは指定バージョンが使われるようにしてます。今後それでやってみます。めっちゃ助かります😭😭

— tacamy (@tacamy) April 28, 2020