JavaScript
イベントが取得できない、発火しない、と困っていました。下のようなコードです。 let element = null new Promise(resolve => { // 処理 }) .then(rly => { element.innerHTML = rly }) element.onclick = () => { // 処理 } これだと onclick が取得できま…
ある処理の終了と、諸要素のロードの両方が終了したタイミングで次の処理に移る書き方です。 let promise0 = new Promise(resolve => { // 処理 }) let promise1 = new Promise(resolve => { window.onload = () => { resolve() } }) Promise.all([ promise0…
Unicode Property Escapesの「Han」は次の記号を含みます（僕とChatGPT調べ）。 〜、。〈〉《》「」『』【】〔〕〖〗〘〙〃〆・〓 なので本当に感じだけにマッチさせるには次のように書くといいと思います。 /(?
Notionの開いているページの文字数を数えて表示する JavaScript です。Chromeの拡張機能「User JavaScript and CSS」を使用して導入してください。 JavaScript /* count word */ (() => { document.querySelector(`body`).innerHTML += `<div class="count-word">Count</button>` let countWor…
「javascript 配列の最頻値を求める | mebee」にあった以下のコードについて研究しました。 'use strict' const arr = ["a", "a", "a", "b", "c", "d", "d", "e", "e", "e", "e"]; const c = (x, i, v) => (x[i] ? x[i].add(v) : x[i] = new Set(v), i); con…
下のようなコードを考えました。 let array = [1, 2, 2, 3, 4, 5] let add = {} for (let i in array) { if (add[array[i]]) { add[array[i]]++ } else { add[array[i]] = 1 } } let max = 0 for (let i = 1; i < Object.keys(add).length; i++) { if (add[i…
UI から得たファイルを受け取るには FileReader() を使うらしいのですが、複数を処理するにはちょっとコツが必要なようです。 具体的には下のようなコードになります。 function getFiles(event) { let work = [] let collection = event.dataTransfer.files…
fetch するのは大げさだな、という気がしていたのです。内部的にどうなっているのか知りませんが、 module で読み込めたら素敵だと思いした。早速「 JSON Modules が使えるようになった」を参考に下のようにやってみました。 import test from "./test.json"…
以前「 for 文で Promise.all() 」という記事を書いたんですが、いろいろやってみると Promise.all() としては Promise の配列ならなんでもいいっぽいです。下のようなものも可です。 Promise.all( array.map(rly => fetch(rly)) ) .then(rly => { // 処理 }…
即時関数という語を知りました。なんだそれ。とりあえずググって「即時関数の使い方と構造について」という記事を流し読み。ざっくり「即時実行される関数の書き方」というような印象。下のような書き方になります。 (function() { // 処理 })() ショートハ…
複数の改行から 1 個減らす処理というのを書いたことがあるのですが、下のようにしていました。 src.replace(/(\r?\n)+/g, rly => { rly.replace(/\r?\n/, "") }) ついさっき気付いたのですが、もっと簡単に書くことができます。 src.replace(/\r?\n((\r?\n)…
いろんな条件でいろんな処理をさせようと下のように書いたことがあります。 if () {} if () {} if () {} . . . 条件文がしっかりしていれば全ての if 文が同時的に走って処理が速くなりそうだし、いいかなーと。でも条件文が悪かったのかもしれませんが、上…
element.style.width = element.getBoundingClientRect().width 効かないんです。下のような場合は効くのですが。 element.style.width = window.innerWidth だから誤解していたんです。あれが足りないことに気付かなかった。 element.style.width = element…
一般的にどうなのか知らないのですが、なんでも括弧を開くのが僕の最近の流行りです。下のようにします。 something.push( // 処理 ) resolve( // 処理 ) if ( a === 0 && b !== 0 ) {} 上の二つなんかは変数に代入しないから二度手間にならなくていいかなぁ…
下のような何かがあったとします。これは配列でしょうか、連想配列でしょうか。 let something = [0] 確かめてみましょう。下のようになりました。 console.log(typeof something) // object console.log(something instanceof Array) // true console.log(s…
結論から言うと JSON.parse( 配列に見える文字列 ) です。でも時間が合ったら僕の講釈に付き合ってください。 さて、下のようなものがあったとします。配列に見えますがテキストエリアに書いてあるだけだと文字列です。 JavaScript の中に書いてあると配列な…
「何を言ってやがる、違わねぇよ！ おまえは NodeList で、オレは HTMLCollection だ！ そこになんの違いもありゃしねぇだろうが！」 というわけでどう違うのかって話なんですが、僕はよく分かっていません。分かっていることといえば .childNodes はタグの…
下のような話です。非同期関数の戻り値は then() で受けるでしょ、それで then() の戻り値は then() で受けるでしょ。あれ、そうすると値は一生 then() の中から出られないの？ という困りごとがありました。 function fn() { asyncFunction() .then(() => {…
JSZip を使う際にファイル名を 2 バイト文字にしていると文字化するようです。 JavaScript のファイルのエンコードを UTF-16 LE にしてやると防ぐことができます。気になるならスクリプトを呼ぶ際、下のようにしてやるといいかもしれません。 <script src="..." charset="utf-16"></script>
ラジオボタンでは複数のボタンから選択されたボタンの値を取得する必要があります。真正面からやると for 文を使ったりすることになりそうです。ですがちょっと工夫をしてスマートに取得してみました。 <label><input name="grp" value="1" checked>item 1</label> <label><input name="grp" value="2">item 2</label> <label><input name="grp" value="3">item 3</label> let radio = document.quarySele…
どう考えてもマッチするはずの正規表現がマッチしないとき、それはもしかしたら JavaScript を HTML の外部ファイルにしているからかもしれません。この場合はスクリプトを読み込むタグにキャラクターセットを記述すると正常に動作するようになります。下の…
サイズの決まっている要素なら下のようにすると中央に表示することができます。 <div id="center">吾輩は猫である。</div> #center { position: absolute; width: 600px; height: 400px; inset: 0; margin: auto; } ですが、数文字の文を改行させないように表示するには、厳密には幅…
なんとなく思い付いて下のように書いてみました。文書中の改行を 1 個減らす処理です。こういう書き方ができない場合、 for 文とか再帰関数を使ってちょっと割に合わない感じのコードを書くことになるような気がします。僕としては大発見でした。 なんか mat…
要素というか、ウェブページ上の文章や画像をユーザーが選択中かどうか識別する方法です。イベントが発生しているのかな、と思っていたのですがググってみるとヒットしません。 textarea や input の選択を検知する onselect() とは違うし。ちょっと工夫しな…
ウェブページにドロップしたファイルを読み込む方法です。 dataTransfer というのを使うのだそうですが、 MDN を読んでも何を言っているんだか理解できません。サンプルコードもないし。個人サイトを参考にミニマルな記述を模索しました。 コード window.add…
ごあいさつ まず言い訳をさせてもらいたいのですが、記事を投稿する寸前まで「再帰処理」というものを認識していませんでした。再帰処理が十分に有名なものだという認識も当然なかったのです。つまり下の文章は「再帰処理を自分が初めて思いついたみたいには…
下のようなコードを書いていました。正常に答えが返ってきません。 w は console.log() で見ると一見中身のない配列。でも表示を展開すると中身が見えます。だけど join() すると無が生成されます。変な配列が生成されるのです。配列の問題だと思ってググる…
for in の変数は数字じゃなくて文字列なんですね。そんなことで大丈夫なのかと思うのですが、一応動いています。いくら書き方が簡単になったからといって変数を使って計算する際には Number(i) などとせねばならずスマートじゃありません。果たしてこの書き…
例えば apple, orange, prune, mango のどれかが、引数 fruit によって与えられ、それぞれ異なる関数を実行する際に下のようにするといいと思います。 let arr_proc = { apple: () => {...}, orange: () => {...}, prune: () => {...}, mango: () => {...} }…
言い換えると「 EOF の改行を削除する」になります。下のようにすると、どうにもスマートじゃない気がするのですが、例えばグローバルサーチの match(/.*$/) で最後にヒットした部分の位置を数えて削除するというのもスマートでありません。 let w = src .sp…
