カメリアの記事

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

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

element.style.width = element.getBoundingClientRect().width

効かないんです。下のような場合は効くのですが。

element.style.width = window.innerWidth

だから誤解していたんです。あれが足りないことに気付かなかった。

element.style.width = element.getBoundingClientRect().width + "px"

たったこれだけでした。

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

一般的にどうなのか知らないのですが、なんでも括弧を開くのが僕の最近の流行りです。下のようにします。

something.push(
  // 処理
)

resolve(
  // 処理
)

if (
  a === 0
  &&
  b !== 0
) {}

上の二つなんかは変数に代入しないから二度手間にならなくていいかなぁ、と思っています。下の if のやつは別の記事「条件式の書き方の提案」で話を出したことがあります。一般的に使われている手法なのか知らないのですが、複雑な条件式も理解しやすくなります。

僕としては console.log() も開きたくなります。下のように書きたいのです。

console.log(() => {
  return true
})

出力されるのは下のとおりです。

() => {
  return true
}

そのまま返されてしまいました。コマンドの echo みたいですね。くそう。

配列か連想配列か、いや、両方だ!

下のような何かがあったとします。これは配列でしょうか、連想配列でしょうか。

let something = [0]

確かめてみましょう。下のようになりました。

console.log(typeof something)            // object
console.log(something instanceof Array)  // true
console.log(something instanceof Object) // true
console.log(Array.isArray(something))    // true

これは配列であると同時に連想配列である、ということになるのではないでしょうか。そもそも Array は Object 系列の存在のようです。下のようになります。

console.log(Array instanceof Object) // true
console.log(Object instanceof Array) // false

つまり「連想配列であり配列ではない」=「 Object であり Array ではない」ことを確かめるには下のような二つの条件のチェックが必要になるようです。

if (something instanceof Object && !(something instanceof Array)) {
  console.log("object")
}

なんか面倒ですね。もうちょっとすっきりした書き方はないんでしょうか。合ってもよさそうなんですが、必死になってググるのも面倒なので僕はこのくらいで納得しておくことにします。

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

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

第 2 引数の thead は省略可能です。ここにはフォームがありませんがテーブルに与える id と class を引数に与えることができます。詳細は GitHub のページを参照してください。


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

結論から言うと JSON.parse( 配列に見える文字列 ) です。でも時間が合ったら僕の講釈に付き合ってください。

さて、下のようなものがあったとします。配列に見えますがテキストエリアに書いてあるだけだと文字列です。 JavaScript の中に書いてあると配列なんですが。

これを配列にするのにどうしたらいいでしょう。下のようにすることもできます。え、できるからってなんでもいいわけじゃねぇよ。何が言いたかったかというと split() じゃダメってことです。

`["a", "b", "c"]`
.slice(1, -1)
.split(", ")
.map(rly => rly.slice(1, -1))

僕は思い付きました。 Array を作るなら Array でしょ!

Array.from(`["a", "b", "c"]`)

さて、配列はできるでしょうか。結果は下のとおり。全部バラバラです。ぜんぜんダメ。

['[', '"', 'a', '"', ',', ' ', '"', 'b', '"', ',', ' ', '"', 'c', '"', ']']

そして最終的に気付いたわけです。下のようにします。知ってた。知ってたけどね。

JSON.parse(`["a", "b", "c"]`)