Tips
Observer
JavaScriptのなんとかObserver
— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) January 17, 2021
・IntersectionObserver
要素の交差を監視https://t.co/NWWhHES14V
・MutationObserver
要素の変化を監視https://t.co/Jd1UWlFtc6
・ResizeObserver
要素の変形を監視https://t.co/8lB8npPzqN
知人とRxJS・Observableの話をしたときに出た話題#JavaScript
JavaScriptのEventTargetについて
— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) January 17, 2021
・new EventTarget()
・extends EventTarget
が「全モダンブラウザで」可能に💐
Safariが未対応でしたが、BigSurのSafari 14にて漸く対応✨
一定時間後にメッセージを表示するクラスのデモを作りました🍜
ずっと待ってた☺️https://t.co/xeCWHO8x97#JavaScript pic.twitter.com/pdkOEVzx0i
Location
"window.location Cheatsheet" by @samantha_minghttps://t.co/leKaBc7J0g
— ダーシノ / NES.css (@bc_rikko) May 7, 2020
locationについてのまとめ
Locationはコンソールで表示して内容確認して使うみたいに完全に理解してなかったけど、同じようなプロパティ、メソッドでも若干動作が異なるんだね。
Replace
ES2021に入るであろう新仕様が一つ決まりました。
— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) June 25, 2020
String.prototype.replaceAll。
"隣の客はよく柿食う客だ".replaceAll("客", "😸")
で、"客"が"😸"になります。
Firefox, Safariは現行版で対応済み。
Chromeは85から対応。https://t.co/8PPVDiRkZX#JavaScript #ES2021 pic.twitter.com/tyVcG5FQcQ
Form
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
その他
JavaScriptで背景色から文字色を導出するこのブログポストは GitHub のラベルのように、背景色をユーザーが自由に決めて、中に表示するテキストの色を計算で導出する、ということを実装する時に調べたことのメモです。
https://zenn.dev/hyiromori/articles/hatena-20201112-182643
配列ループでindexと要素が同時にほしいときArray.prototype.entries()を使うとモダンな書き方ができる
— ダーシノ / NES.css (@bc_rikko) March 25, 2020
const arr = […]
// 従来の書き方
for (const i = 0; i < arr.length; i++) {
// i, arr[i]
}
// モダンな書き方
for (const [i, val] of arr.entries()) {
// i, val
}
📌addEventListener()でAbortController()が使えるように!
— たかもそ/Web Developer (@takamosoo) February 23, 2021
これにより、ドラッグ&ドロップ実装のときのようなremoveEventListener()を複数書く必要がなくなり、見やすくなります! pic.twitter.com/y2JbQrHylZ
ページでリロードされたかどうか判定する方法https://t.co/DAfVZ8Alw0
— ダーシノ / NES.css (@bc_rikko) June 2, 2020
const isReload = performance.getEntriesByType('navigation')[0].type === 'reload'
※ただしIEとSafariは非サポート
配列の最初の要素、長さ、最終要素をワンライナーで取得するテクニック。
— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) June 27, 2020
なるほどすぎて目からコンタクトレンズが落ちました🙀
コードhttps://t.co/aZOgLPemzm
参考https://t.co/xZguF68UnZ#JavaScript #TypeScript pic.twitter.com/IXwOUQqKon
配列のsome()の使い途。
— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) January 17, 2019
検索システムで該当データがない時に「該当なし」と表示したい。
「配列内に該当データがあるかを返す」関数を作る際にfor文やfind()よりsome()を使う方が適切。
配列の単体テストでも有用。
ちなみにforEach()のbreak目的でのsome()を見かけるが、someの用途的に不適切。 pic.twitter.com/dOTDRMDqc9
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。
— Takeshi Kano 鹿野 壮 (@tonkotsuboy_com) October 23, 2019
HTML要素に対してdocument.querySelectorAll(要素).forEach()する場合は、ジェネリクスとして<HTMLElement>を指定するのがオススメ(図参照)。
参考
forEach()https://t.co/oqVACdT7ka
NodeListhttps://t.co/xqJzKieinb#TypeScript #JavaScript pic.twitter.com/Vz7ha4C4bL
YouTubeって最速でも2倍速までしかなくて、1時間の動画を見るためには最短でも30分かかるのつらい…と調べてたところ、playbackRateプロパティを使えば再生速度を自由に変更できることを知った!
— ダーシノ / NES.css (@bc_rikko) March 21, 2020
// 2.5倍速
document.querySelector('video').playbackRate = 2.5; https://t.co/i4RW1KUsxy
ライブラリ関連
前の記事: [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
— ダーシノ / NES.css (@bc_rikko) September 17, 2020
こういうIssue、めっちょありがたい!
webpackって便利なようで、何かややこしいな。統合ツールは最大公約数的に機能が拡張されていくし、ネットの情報は散逸的。要らない機能切り分けるだけで疲れた。とりあえずgulpでファイル連結してminify後にjavascript-obfuscatorで難読化したいだけなんだけど。webpack使わなければ即解決する。
— たぁぼまる@沖縄暮らし (@turbomaru_hiro) November 29, 2020
Node.js
`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
コメントは受け付けていません。