カメリアの記事

意味があることやないことを綴ります

JavaScript

JavaScript 自由研究 - 最頻値を求めるコード

「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…

JavaScript で最頻値を求めたら敗北した!

下のようなコードを考えました。 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…

JavaScript の FileReader() で複数のファイルを受け取る

UI から得たファイルを受け取るには FileReader() を使うらしいのですが、複数を処理するにはちょっとコツが必要なようです。 具体的には下のようなコードになります。 function getFiles(event) { let work = [] let collection = event.dataTransfer.files…

JavaScript の module で JSON を読み込んでみた

fetch するのは大げさだな、という気がしていたのです。内部的にどうなっているのか知りませんが、 module で読み込めたら素敵だと思いした。早速「 JSON Modules が使えるようになった」を参考に下のようにやってみました。 import test from "./test.json"…

Promise.all() は Promise の配列ならなんでもいいっぽい

以前「 for 文で Promise.all() 」という記事を書いたんですが、いろいろやってみると Promise.all() としては Promise の配列ならなんでもいいっぽいです。下のようなものも可です。 Promise.all( array.map(rly => fetch(rly)) ) .then(rly => { // 処理 }…

JavaScript の即時関数ってなんだ

即時関数という語を知りました。なんだそれ。とりあえずググって「即時関数の使い方と構造について」という記事を流し読み。ざっくり「即時実行される関数の書き方」というような印象。下のような書き方になります。 (function() { // 処理 })() ショートハ…

JavaScript で同じ文字列の繰り返しから 1 個減らす処理 ――正規表現は奥が深かった――

複数の改行から 1 個減らす処理というのを書いたことがあるのですが、下のようにしていました。 src.replace(/(\r?\n)+/g, rly => { rly.replace(/\r?\n/, "") }) ついさっき気付いたのですが、もっと簡単に書くことができます。 src.replace(/\r?\n((\r?\n)…

JavaScript で if 文を並べると

いろんな条件でいろんな処理をさせようと下のように書いたことがあります。 if () {} if () {} if () {} . . . 条件文がしっかりしていれば全ての if 文が同時的に走って処理が速くなりそうだし、いいかなーと。でも条件文が悪かったのかもしれませんが、上…

JavaScript で element.style.width = element.getBoundingClientRect().width が効かない

element.style.width = element.getBoundingClientRect().width 効かないんです。下のような場合は効くのですが。 element.style.width = window.innerWidth だから誤解していたんです。あれが足りないことに気付かなかった。 element.style.width = element…

JavaScript で括弧を開く(括弧内で改行する)のが僕の昨今の流行り

一般的にどうなのか知らないのですが、なんでも括弧を開くのが僕の最近の流行りです。下のようにします。 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…

配列・連想配列を与えるとテーブルを返す JavaScript のライブラリ maketable.js

table, td, th { border-style: solid !important; border-color: #000 !important; width: unset !important; } table { border-collapse: separate !important; border-spacing: 0 !important; border-width: 1px !important; } td, th { padding: 5px 10p…

JavaScript で配列に見える文字列を配列にする

結論から言うと JSON.parse( 配列に見える文字列 ) です。でも時間が合ったら僕の講釈に付き合ってください。 さて、下のようなものがあったとします。配列に見えますがテキストエリアに書いてあるだけだと文字列です。 JavaScript の中に書いてあると配列な…

JavaScript で配列・連想配列を比較するライブラリ

2 つの配列・連想配列を比較する JavaScript のライブラリです。 GitHub で配布しています。 [ {"key0": 0}, {"key1": 1}, {"key2": ["a", "b", "c", "d"]} ] [ {"key0": 0}, {"key1": 1}, {"key2": ["a", "b", "c", "diff."]} ] github.com #user-cont-cont…

JavaScript の .childNodes と .children の違い

「何を言ってやがる、違わねぇよ! おまえは NodeList で、オレは HTMLCollection だ! そこになんの違いもありゃしねぇだろうが!」 というわけでどう違うのかって話なんですが、僕はよく分かっていません。分かっていることといえば .childNodes はタグの…

文章内の括弧を処理する JavaScript ライブラリ brackettool.js

タイトルのとおりのライブラリを書きました。 説明 処理パターンは 3 つあります。 括弧を削除する 括弧を HTML でマークアップする 括弧を削除して括弧内の文字列を HTML でマークアップする また、括弧とその周辺部のみをピックアップして返すモードがあり…

JavaScript で正規表現のエスケープをする関数

正規表現ではエスケープが必要な文字があります。通常は事前にエスケープしておくわけですが、下のような場合には随時のエスケープが必要になります。 function fn(src, keyword) { let rx = new RegExp(`foo${keyword}baa`, "g") return src.replace(rx, "h…

JavaScript で非同期関数の戻り値を関数の外に出したかった

下のような話です。非同期関数の戻り値は then() で受けるでしょ、それで then() の戻り値は then() で受けるでしょ。あれ、そうすると値は一生 then() の中から出られないの? という困りごとがありました。 function fn() { asyncFunction() .then(() => {…

JavaScript で多次元配列の一次元化を reduce() を使わずにやってみた

嘘です。 reduce() を使わずにやったのではなく、知らないから使えなかったんです。この記事に存在意義はあるのか、そう自問します。いやいいんだよ、無駄なものなんてないさ。そう自答します。 コードは下にあります。その下には GitHub で公開しているとこ…

JSZip でファイル名が文字化けするのを防ぐ

JSZip を使う際にファイル名を 2 バイト文字にしていると文字化するようです。 JavaScript のファイルのエンコードを UTF-16 LE にしてやると防ぐことができます。気になるならスクリプトを呼ぶ際、下のようにしてやるといいかもしれません。 <script src="..." charset="utf-16"></script>

ラジオボタンの値を JavaScript でスマートに取得する

ラジオボタンでは複数のボタンから選択されたボタンの値を取得する必要があります。真正面からやると 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 でマッチするはずの 2 バイト文字にマッチしないとき

どう考えてもマッチするはずの正規表現がマッチしないとき、それはもしかしたら JavaScript を HTML の外部ファイルにしているからかもしれません。この場合はスクリプトを読み込むタグにキャラクターセットを記述すると正常に動作するようになります。下の…

CSS でサイズが決められない要素を JavaScript で中央に表示する

サイズの決まっている要素なら下のようにすると中央に表示することができます。 <div id="center">吾輩は猫である。</div> #center { position: absolute; width: 600px; height: 400px; inset: 0; margin: auto; } ですが、数文字の文を改行させないように表示するには、厳密には幅…

replace() を match() と map() の合成のように使う

なんとなく思い付いて下のように書いてみました。文書中の改行を 1 個減らす処理です。こういう書き方ができない場合、 for 文とか再帰関数を使ってちょっと割に合わない感じのコードを書くことになるような気がします。僕としては大発見でした。 なんか mat…

JavaScript で要素を選択中かどうか識別する

要素というか、ウェブページ上の文章や画像をユーザーが選択中かどうか識別する方法です。イベントが発生しているのかな、と思っていたのですがググってみるとヒットしません。 textarea や input の選択を検知する onselect() とは違うし。ちょっと工夫しな…

JavaScript でドロップしたファイルを読み込む

ウェブページにドロップしたファイルを読み込む方法です。 dataTransfer というのを使うのだそうですが、 MDN を読んでも何を言っているんだか理解できません。サンプルコードもないし。個人サイトを参考にミニマルな記述を模索しました。 コード window.add…

特定サイトの画像をランダムにスライドショーするウェブアプリを書いた

パソコンの前で手書き作業なんかしている際に、画面に何か気の利いた画像を表示させておきたい。時間がたつと画像が切り替わってほしい。という思いから作りました。そもそも「気の利いた画像」というのを GET するのが困難なのですが「ランダムで画像を取得…

HTML を整形する JavaScript のライブラリを書いた

HTML を整形する JavaScript のライブラリを書きました。そこらへんのウェブサービスで簡単にやってくれることではあるのですが、手元で整形してくれると嬉しいな、と思って書きました。 作ったものは下で公開しています。 github.com 難しかったところ とに…

Markdown を HTML に変換する JavaScript のライブラリ

Markdown を HTML に変換する JavaScript のライブラリを書きました。自分で使うために書いたのですが、せっかくなので公開します。嬉し恥ずかしってやつですね。 パーサーは GitHub とかが公開しているのでわざわざ作る必要もない気がしますが、読めない英…

for 文ではない繰り返し(再帰処理)

ごあいさつ まず言い訳をさせてもらいたいのですが、記事を投稿する寸前まで「再帰処理」というものを認識していませんでした。再帰処理が十分に有名なものだという認識も当然なかったのです。つまり下の文章は「再帰処理を自分が初めて思いついたみたいには…