JavaScript のわかりづらい {}
これはそれぞれどんな結果を出力するでしょう?

<script>
let x = "arr"
if(x){
{arr: {forEach: function forEach(fn, a){for(const [k, v] of a.entries()){fn(v, k)}}}}[x].forEach(e => console.log(e), [1, 2, 3])
}
if(x) {arr: {forEach: function forEach(fn, a){for(const [k, v] of a.entries()){fn(v, k)}}}}[x].forEach(e => console.log(e), [1, 2, 3])
</script>


上は if の中だから {} がオブジェクトで x に入った "arr" プロパティをとりだしてるから forEach プロパティの入ったオブジェクトになって それの forEach プロパティを取り出しているので 実行する関数はその場で定義してる forEach で 1, 2, 3 がそれぞれ console.log で表示される

下は {} が if の {} になるから arr: はラベル扱い
次の {} はただのブロック扱いで中の forEach: もまたラベル扱い
forEach 関数を定義してるけどそれは使われず無視されて [x] の配列に対する組み込みの forEach になって 2 つ目の引数は意味ないから無視されて 配列の要素の "arr" だけ表示される


……と思いがちですが そうじゃないんです
上側の {} もブロック扱いで arr や forEach はラベル扱いです
結果 上下どちらも "arr" と表示されます


⇩ でも 1 とは表示されず ["x"] は関数ではないとエラーになります

<script>
{x: () => console.log(1)}["x"]()
</script>

Chrome に限らず IE や Firefox などでもです
何度見てもよくハマるんですよね
文が ( や [ から始まるときはセミコロンを前に書くのと同じように { から始まるときは () で囲むか ! や ~ などの単項演算子で始めると気をつけたほうが良さそうです
どっちかというとセミコロンより function(){} と同じで式とみなさせないといけないやつです

SPA じゃないけど SPA ぽくしたいとき
SPA になってないけど ページのロードじゃなくて SPA みたいな遷移したいとき
行き先の HTML を fetch して document.write で全書き換えすれば行けるんじゃないかなって思った

条件として customElements.define だったり setInterval だったりグローバルに影響することはいっさいしないこと
古い DOM が消えて GC されれば完全に消えるような作りが必要

URL は history.push で書き換えて back したときに元の URL の HTML を再 fetch して document.write する
メモリ的に余裕あれば捨てないでおいて back のときにもとに戻せば bfcache (ページバックで戻ったときに JavaScript で処理したものも残ってる) になっていい感じ?

暇な時に試してみよう
深いネストで全部自動で広げたい
こういう構造で

<div class="a">
<div class="b1">message</div>
<div class="b2">
<div class="c1">message</div>
<div class="c2">
<div class="d1">message</div>
<div class="d2">
<div class="e1">message</div>
<div class="e2">
spread max
</div>
</div>
</div>
</div>
</div>

外側の a はサイドバーみたいなもので ウィンドウサイズに応じて高さが変わって 子孫要素の大きさは関係なく親に応じてサイズが変わる
そのときに一番深い e2 の div が下の隙間いっぱいに広がってほしい

高さ固定は無理だし JavaScript でリサイズごとに高さ指定もしたくない
となると CSS で全部 flexbox 化するしかなさそう

.a, .b2, .c2, .d2 {
display: flex;
flex-flow: column nowrap;
}

.b2, .c2, .d2, .e2 {
flex: 1 1 auto;
}

むやみに flexbox 増やすと思わぬ動きしたり困ること多いし もっと楽で良い方法ってないものかなー
e2 を広げる以外に b2, c2, d2 を flexbox にする必要ないんだけど
openpyxl は罫線消えるのがけっこう致命的
Excel を自動で操作したくて C# より Python のほうが楽でいいかなと Python のツールを探して見るとフリーだと xlwings か openpyxl が人気みたい
xlwings は C# の標準の Excel 操作みたいに Excel が必要でマクロ風に Excel 自体を操作できるものらしい
openpyxl のほうはバイナリファイル(といっても xml)を処理するもので Excel 不要

Linux のサーバで動かす予定なので openpyxl を選んで使ってみたらけっこう使いやすくていい感じ
Excel 直接操作にありそうな範囲全体のコピペができないのは不便だけど for でループしてセルごとに処理しても対して遅くない

だけど保存してみたら 罫線が壊れてた
けっこう有名な既知の問題らしくて何年も議論されてるのに直ってない

対処法に openpyxl で全部の罫線を引き直すというのがあるみたいだけど 例を見るとコード中に太さや色等を指定してる
これを見る限りは正しい罫線情報を openpyxl 中で取得もできなそう
ただデータを出力するだけのものならともかく見た目を調整して罫線もいっぱいあるものだと全部手動でやるなんてやってられないので結局使えなかった

openpyxl 中で引いた罫線は残るなら テンプレートを使わず 1 から openpyxl でフォーマット作ればできそうだけどそれはそれで大変すぎるし
罫線使わずただデータを出力するだけなら問題なさそうだけどそれなら pandas とかでもできそうだし あえてこれ使う必要もなさそう