JavaScript

document.querySelectorAll の結果を map や reduce したい

document.querySelectorAll の結果は NodeList で、forEach はできるが map や reduce はできない。 例えば、いくつかのテキストボックスに入力された数字を合計したい場合、document.querySelectorAll の結果をスプレッド構文で配列にするとよさそう。 cons…

iframe 組み込みの YouTube Player をモーダル表示して自動再生したい

iframe 組み込みの YouTube Player をモーダルに表示して、さらにモーダルを表示したタイミングで自動再生したい。あと、同一ページで2つの YouTube 動画を扱うパターン。 YouTube のモーダル表示については軽くググったらいい感じのライブラリがあった。 ka…

Clipboard API

備忘録。 ある要素の click イベントで、Clipboard API を利用して要素内のテキストをクリップボードにコピーする。 document.querySelectorAll('.copy-to-clipboard').forEach((el)=> { el.addEventListener('click', (e) => { const text = e.currentTarge…

リクエストの二重送信防止に UIEvent.detail を利用する

更新系のボタンクリックでローディングを表示して二重クリックを防止する実装をよく見かけるが、次のような操作をするとリクエストが二重送信できることがある。 ボタンクリック (ローディング表示) キーボードの Enter or Space 押下 ボタンクリックでボタ…

JavaScript で 0 と 空文字を == で比較すると true になる

先日、JavaScript でこんな感じのコードを見かけました。 if (val == null || val == '') { // 値がないときの処理 } 値が null か空文字かをチェックするコードです。おそらく文字列を想定していたと思われますが、実際は変数に数値が代入されていました。 …

Vue.js で正数や小数のみ入力を許可するテキストボックスコンポーネントを自作してみる

正数や小数のみ入力を許可するテキストボックスを Vue.js のコンポーネントとして作ってみました。一般的には type="number" を使うといいのかもしれませんが、今回はもろもろの事情により type="text" を使います。あと、Vue.js らしいところはあまりないで…

アロー関数で空のオブジェクト返そうとしてハマる

es6 で空のオブジェクトを返す関数書こうと思って () => {} って書いたら undefined が返っちゃって30分くらいハマってしまった...— kntmr (@knt_mr) 2018年1月9日 普通に考えれば当たり前なんですが、最初なにが起きてるのか分からなくてハマった...。 cons…