英語が読める？じゃあこれ読んで終わりな！
https://stackoverflow.com/questions/58187115/typescript-paths-not-working-in-an-express-project

(っ◞‸◟c)

何が問題なのか

expressみたいな鯖をnode + tsとかで自前で環境入れていくと、vue-cliでやってくれるようなdevコマンド一発でホットリロードつきビルドが標準で出来ない。
でnodemon使って自前でそのあたりのスクリプト書くんだけど微妙にnodemonのドキュメントが不親切で情報がとっちらかってるのでまとめておく。

結論

devDepenciesにnodemon, ts-node, tsconfig-pathsを追加して、プロジェクトのルートにnodemon.jsonを作成する。
tsconfig-pathsはtsconfigでpathsを使わない（インポート時のパスを@/とかから始められるエイリアス的なやつ）ならいらないけどあると便利だよ
jsonの中身はこんな感じ

{
  "ignore": [
    "**/*.test.ts",
    "**/*.spec.ts",
    ".git",
    "node_modules"
  ],
  "watch": [
    "src"
  ],
  "exec": "node -r tsconfig-paths/register -r ts-node/register ./src/index.ts",
  "ext": "ts, js"
}

あとはpackage.json内のscriptで"dev":"yarn nodemon"とでも書いておけばよろし。

余談

nodemonは何処にも書いてないんだがどうも標準でts-nodeを使ってくれるらしく、前述のパスの問題が気にならないなら
yarn nodemon src/index.tsとかで一発らしいよ。びっくりだね。ドキュメント書いとけ。

https://drroot.page/wp/wp-content/uploads/2022/09/shibes.html

https://shibe.online/
しばいぬAPIのクライアントページを作成した。
公式サイトでも出来る事だが、ボタン一つで更新をかけられるようになっている。

https://drroot.page/wp/?p=227
この記事でアプリケーション（Node.js）からブラウザのフリして配信のチャットを引っこ抜くコードを紹介したが、正規表現でContinuationを引っこ抜く処理に抜けがあり、上位チャットしか取ってこれてない状態だった。
というわけで上位でなく全体のコメント向けContinuationを取得するコードも書いた。以下でcontinuation keyがstringとして得られる。

// videoId=配信ページとかのURL末尾のID
const res = await axios.get('https://www.youtube.com/live_chat', {
  headers: "user-agent":
      "Mozilla/5.0 (Windows NT 6.3; Win64; x64) " +
      "AppleWebKit/537.36 (KHTML, like Gecko) " +
      "Chrome/86.0.4240.111 Safari/537.36",
  params: { v: videoId }
});

const html: string = res.data;
const matchedCtn = html.matchAll(
  /"reloadContinuationData":.*?"continuation":"(.+?)"/g
);
const matchedCtnList = [...matchedCtn];

// matched = Regex結果の集合 一個の結果が更に配列でマッチ結果を持つ
// Youtubeの場合matched[0]が上位チャット、matched[1]が全体チャットの筈
const continuation = matchedCtnList[1][1];

事象

Live Shareのクライアント側のみ、シンタックスハイライトやらLintやらとにかく拡張機能の類が信頼設定してるのに機能しなくなる

原因

LiveShareのクライアント側は、Virtual Workspace機能を用いており、拡張機能がこれに対応していない場合有効にならない。

対策

無理やり拡張機能を仮想スペースでも有効化するよう設定を流す。
VSCodeの共通設定を開いて、
"extensions.supportVirtualWorkspaces": { "<extensionID>": true }
を追加する。<extensionID>はUnique Identifierの事であり、例えばeslintならdbaeumer.vscode-eslintである。

詳細はこれをよんで
https://code.visualstudio.com/blogs/2021/06/10/remote-repositories

子孫要素のLoadイベントを単一のElementで拾いたい

問題点

imgタグは自身の読み込みが終わった時にloadイベントを発火させる。
例えばあるコンポーネントを末端までスクロールさせるJavascriptを書きたいが、画像の読み込みは非同期で行われるので、
末端までスクロール→画像が読み込まれ高さが変わる→現在のスクロール位置が末端じゃなくなる
という事象が起こりうる。
ウィンドウ全体の要素を対象に準備が終わったことを検知するなら、windowのloadイベントやdocumentのonChangedReadyStateが存在するが、こいつらはSPAのようなモダンなページでは機能しやがらない。
とはいえ、子要素のimgやらvideoやらに全部loadを書くのもアホらしいので、上記の例ならスクロール処理をしたいコンポーネントに一個loadを書いておきたい気分になる。
特にNuxt(Vue Router)みたいなフレーム上ではぶら下がってるコンポーネントが単離されてたりするので、そのコンポーネントにloadイベントの集約と発火をさせるのはものすごく馬鹿らしい。

続きを読む →