自分しかいないメモ用のdiscordサーバーでシェル実行できたら便利だなと思って作った ngmtine/discord_bot

実際に動いているところはこんな感じ

見たい配信あるけど出先で見れないよ～って時とかにurl投げてアレしたりできるのでかなり体験がいい

ワイは自鯖運用してるintel n100マシンで動かしてるけどスマホパクられた時とかどう考えてもやばいので皆さんは適当にvps借りて動かせばいいと思います

便利でよかったですね　おわり

賀正

各セルが編集可能なテーブル（つまり tr > td > input ということ）を扱いたい時を考える

普通に実装すると、ラッパーコンポーネントのuseStateでデータと更新関数を初期化してセルコンポーネントまでバケツリレーし、
セルコンポーネントのonChangeでデータ更新…という感じになると思う
データ量がそれほどでも無いときはこれで全く問題ないが、データが増えてくるとブラウザが重くなりしんどみが発生する

具体的には10万セルで初期表示とセル編集に各5秒程度ラグる
https://ngmtine.github.io/table_virtuoso_example/
↑の「プレーンなreactでのテーブル実装例（仮想スクロールライブラリ不使用）」が愚直な実装例
セルクリックしたり（クリックするとピンク色になります）、「編集済みのみ表示」ボタン押すときの挙動がアホほど重いのがわかると思います

（本筋とは逸れるけどgithub pagesでurl遷移を扱うのわかんなくて匙投げた、
url直打ちしても404になるので手でページ移動してください）

この実装でブラウザが重くなる理由は当然で、セル編集が発生するたびにテーブル全体のデータが更新されご丁寧に全セルが再レンダリングされるため

ではセルごとに独立して状態を持ってメモ化すればと考えても初期レンダリングに時間がかかるのは変わらないし、そもそもDOMというのは重いため行数がある程度になってくるとどうしてもブラウザが硬直してしまう
以前別件でデカめのデータ扱った時、バニラjsですら10数万行程度で指定端末のブラウザが死ぬということがあった（そもそもページネーション使えという話だが…）

というわけで仮想スクロールライブラリの使用を検討する
なんかいろいろあるっぽいけどざっと見てみた感じ react-virtuoso がシンプルで良さげだったので実装してみた
使用感は先程のurlの「rect-virtuoso 実装例」の方です

f12開いて分かる通り、スクロールするたびに画面内に表示するだけのtrがレンダリングされる
このため初期表示もセル編集時もシャキシャキで非常に体験が良い
実装はこちら
スタイリングがカスなのは本筋とは関係ないからです

注意点として、仮想スクロールはスクロールのたびに要素が削除＆作成されるため、セルが独立して状態を持てない（const [hoge] = useState()とかしてもスクロールで初期化される）

TableVirtuosoに渡すitemContentとfixedHeaderContentは呼び出し元コンポーネント内で定義すればクロージャで呼び出し元コンポーネントの変数にアクセスできる
当初セルコンポーネント内で元データ使用するためにハンドラ関数のカスタムフック作ったりjotaiとかのグローバル状態管理ライブラリ使ったりしてたのでこれ気づいた時アハ体験だった、もしかしてreactあるあるイディオムだったりするのかしら

あといくら仮想スクロールといえど、例えばタブレットで勢いよくスワイプしたりロジマウスとかのベアリングホイールでシュイーンってしたりするときも律儀に要素の削除と作成が実行されるので微妙にもたつきを感じるかもしれない
これはどうしようもない

というわけで今回の実装はセルのonChangeでデータ更新があったときにどうしても全セル再レンダリングされるのを仮想スクロールで緩和しましょうというお話でした
ベストは仮想スクロールかつデータ更新時に単一セルのみ再レンダリングされるような実装にすることだけどそんな方法あんのか？セルのメモ化だけでできるのかしら　よく分からなかったので今後の宿題としましょう

ともあれテーブルサクサクでよかったですね　おわり

まず前提として、vim でヤンクペーストするテキストは vim のレジスタ内で完結しているので、 例えば wsl 上で vim を動かしているときにテキストをホスト側とやり取りするには vimrc に何かしらの設定が必要、というのは周知の通りだとおもいますが

-- 一例
vim.cmd([[ set clipboard^=unnamedplus ]])

vim.g.clipboard = {
	name = ''win32yank'',
	copy = {
		[''+''] = ''win32yank.exe -i'',
		[''*''] = ''win32yank.exe -i''
	},
	paste = {
		[''+''] = ''win32yank.exe -o'',
		[''*''] = ''win32yank.exe -o''
	},
	cache_enabled = 1
}

win 上でコピーしたテキストを vim 側にペーストするときに改行コードの違いでバグってて、 ↑^M が残る

まあ vscode とか windows terminal とかの vim フロントエンド側のペースト使えばいいだけだから全く困ってなくて放置してたんだけどいい加減直すかと思って直してもらったら直った

https://chat.openai.com/share/9e4e3fa5-125d-44fa-a2c2-394c01f8b641

gist はこちら https://gist.github.com/ngmtine/0afbf207d73edfcc8a975a0c2f4e41ff

おれたちはもうお喋り AI のいない世界には戻れない lua のこと 1 ミリも知らないのでもしバグってたら chat gpt に文句言ってください

おわり

追記：これ書いてるときに vim の開発者 Bram Moolenaar 氏が亡くなったそうです RIP

ググったらそのものズバリの回答があったので覚え書き、こちらのコメ欄が参考 wsl2 で ssh サーバを起動し、外部からそこに接続 - Qiita

接続先端末の wsl 上で sshd を起動しておく

sudo vi /etc/ssh/sshd_config
sudo service ssh start

接続先端末で powershell を管理者起動して以下実行 ディストリ名はよしなに

$IP = (wsl -d Ubuntu-22.04 exec hostname -I).Trim()
netsh.exe interface portproxy delete v4tov4 listenport=22
netsh.exe interface portproxy add v4tov4 listenport=22 connectaddress=$IP

初回のみファイアウォールでブロックされてる ssh 接続を開放

New-NetFirewallRule -DisplayName 'SSH' -Direction Inbound -LocalPort 22 -Protocol TCP -Action Allow

あとは接続元端末でアクセスするだけ、特に設定しなくても名前解決してくれた

ssh [user]@[hostname] -p 22

よかったですね　おわり

本体は next.js (app router), スタイリングは tailwind, 記事自体は markdown で記述し、それを react-markdown と gray-matter つかってコンポーネント化してます

ホスト先は vercel です github のリポジトリ指定するだけで一瞬でデプロイされかなり体験がいい

というわけで名に負けないようなお料理ブログにしていくぞという気持ちです かかってこい　よろしくお願いします