【9num】部分更新【開発記】

今回の概略

Ui:render 再実行で部分更新が効かない時は render 内の直書き要素を変数に代入して置き換えするといいぽ🤤

#Misskey #Play #AiScript

9num
https://misskey.io/play/9dlcgfia6c

let uiMsg = "ui_message"
let lo =
[
	Ui:C:mfm({
		text:	""
	} uiMsg)
	Ui:C:button({
		text: "exit"
		onClick: @(){ testOver() }
	})
]

var msg = "test message"
@updateMsg()
{
	Ui:get(uiMsg).update({text: `{msg}`})
}

@testOver()
{
	Ui:render([
		Ui:C:text({text: "test over"})
		Ui:C:button({text: "retry" onClick: @(){ main() })
	])
}

@main()
{
	Ui:render(lo)
	updateMsg()
}

main()

---

部分更新

クラスもどきでも書いたけど 9num のスクリプトとしての見どころは

・ Async
・ class モドキ
・ UI の部分更新

の3つ🤤
今回は UI の部分更新の事を書こうかな🤔
Async は…まぁ注意点がそれほど無いので多分触れない😑

冒頭のコード見てもらうと分かるけど、調べてすぐ出てくる部分更新とかなり違う構成してると思う😑
もしよく見る感じに書くなら

@main()
{
	Ui:render([
		Ui:C:mfm({
			text:	`{msg}`
		} uiMsg)
		Ui:C:button({
			text: "exit"
			onClick: @(){ testOver() }
		})
	])
}

こんな感じになって msg を何かしら変更して updateMsg() ってなると思う🤤
よく見かける終了したら戻らない様な play ならそれで大丈夫なんだけど問題は @testOver の retry ボタンの存在😑
詳しい理屈は分からないけど↑みたいに render 内に直接全部書いてある方法だと retry で main() 再実行すると何故か部分更新できなくなるのよね🙄
(恐らく DOM 上にキャッシュとして残っていて古い方が表示されるけど操作可能なのは新しく render した UI で HTML 的な ID 衝突による物じゃないかなと推測)

でも冒頭のコードみたく変数に入れた状態の物を render すると想定通りの動作をするようになるのよね😑
恐らく直で書くとキャッシュして古い方が表示され、変数経由だと「可変」と見なして再生成する…(≒キャッシュが効かない)…なのかなと🙄
で、冒頭の方の変数への定義は書換予定の部分は全て空にしておく必要が有るんだけど、変数参照をしないなら onClick のとこみたいに書いちゃって大丈夫🤤
onClick の挙動も書き換えたりするなら空の関数を置いとくのがいいかな🤔

よく有る play みたいに「終了したら再実行はリロードしかない」形式なら↑の直書きで行けるけど retry を可能にする場合は「書換部分が空っぽのレイアウトを入れた変数」「所定の部分を更新する関数」を別々に作って Ui:render するとうまく行くぽ🤤

まぁそういう事で再 render した UI がうまく部分更新できなくなったら render 直書きじゃなく分離してみて🤤

次回は

9num としての記事は終了だけど VSCode のシンタックスハイライトの話に戻るお🤔