2021年のまとめ・反省 - mizchi's blog

2021年のまとめ・反省

年内に間に合わなかった…

2021年に主にお世話になった言語・ライブラリ

  • TypeScript
  • React
  • Node
  • Vite
    • esbuild
  • Docker(=> lima)

とりあえず挙げてみたが、なにか特定のライブラリを使う、という感じではなく、レイヤーが一つ下にいった感じがあり、実際にはなんかもうちょっと下のミドルウェアみたいなものを作っていることが多かった気がする。ASTをいじるコンパイラ周辺ツールを作っていることが多かった。

サクッとなにか作る場合、 React + TypeScript + Vite(esbuild) が鉄板という感じで、 esbuild が異次元に速すぎて、typescript の変換もバンドルも、もはやこれ一本でいい気がしてる。 microsoft/typescript はもはや言語仕様の定義と型検査がメインであって、コンパイルは別の実装に任せたほうがよさそう。

2021 年は Next.js も Webpack もほとんど使っていない。 Next.js に興味がなくなったわけではなく、自分の扱う範囲だとさくっとプラグインを書けて、都度細かくチューニングができる vite のほうが合っていた。 とはいえ No bundle の体験が良すぎるのもあって、webpack も基本使わなくなったし、世代交代を感じている。 webpack はプラグインを書く際の挙動の確認が大変で、あまり深入りしたくない。コードもしんどい。

Remix も気になってはいるのだが、同じ作者の react-router に嫌な記憶がありすぎて気が進まず、触れていない。あと、何度も Edge Worker が来る、来るといいつつも、自分で触ることができていない。

今後の予想と自分が力を入れたい範囲

Rust+Wasm がとても完成度が高く、これでフロントエンド周りのツールチェインが段階的に書き直されるのがほぼ既定路線。

rustwasm/wasm-pack: 📦✨ your favorite rust -> wasm workflow tool!

フロントエンドは下回りを全部 Rust で書き直すトレンドが続きそうで、 vercel, deno, rome あたりがキープレーヤーになりそう。vercel は特に人材が集中している。

Vercel welcomes Rich Harris, creator of Svelte – Vercel

Rust+Wasm はまだ Deno 周辺を中心にツールチェインを部分的に置き換えている段階だが、 dynamic link の仕様が落ち着いたらフロントエンドでも小さなライブラリを置き換えていく感じになると思う。

https://github.com/WebAssembly/tool-conventions/blob/main/DynamicLinking.md

フロントエンドの Rust はおそらく初期段階では特定のライブラリ作者が書くもので、誰でも書くというものにはならないと思っている。が、段階的にフロントエンド側にも Rust のコードが露出してくるだろう。

個人的にも Rust を暇を見つけて勉強しているが、まだ書きたいコードを書けるという状態には至っておらず、無理やり実戦投入する場所を見つけたい。

Edge Worker はユースケースが増えてきたが、まだ普及に至ってるとは言い難い。実際会社で何度か使おうとしたのだが、まだ k8sのような柔軟な権限やネットワークの構成ができないし、インフラエンジニア向けに Edge Worker でないといけない必要性をうまく説明できていない気がしている。Edge Wokrker の CDN のパフォーマンス特性が非機能要件なので、パフォーマンス面での訴求を行わないといけない。

Deno はまだ小回りが効かないが、開発体験がかなりよくなってきた。来年ぐらいから本格的に本番環境に投入できる時代が来ると思うので、そろそろ本腰を入れたい。 node 12~ の ESM のネイティブサポート denoify などでを積極的に自作ライブラリは両対応していきたい。

それはそうと、自分は k8s 周りのキャッチアップが進んでなくて、触る際も社内にあるボイラープレートをコピペして改造する程度になってるのが良くない。 okteto あたりで素振りをしたい。

https://okteto.com/

今まで Docker のパフォーマンスの劣化が嫌で node はネイティブに動かしていたのだが、 M1 Pro にして、 Docker というか lima がかなり高速になったので、これをメインに活用していきたい気持ちがある。が、まだ周辺ツールが追いついてない感覚もある。 deno を lima で動かそうとするとしたら linux-arm64 バイナリがなくて動かないとか。

作ったもの: ブラウザ完結型フロントエンドに向けて

フロントエンドの開発はブラウザで完結すべきだ、という持論があり、今年もそれを個人的に研究していた。

この分野で今年一番の進歩は https://vscode.dev/ だろう。制限付きとはいえ、ブラウザで vscode が一通り動くようになったのは大幅な進歩。とはいえ部分的にビルドして使うみたいなのはまだ難しそう。

自分が今考えているのは、ただ monaco-editor のようなコードエディタをもってくるだけではなく、プログラマと非プログラマをつなぐものを作るべきだと思っていて、AST からノーコードインターフェースを生成するのを何パターンも試作している。

一昨年作った mizchi/vistree もそうだし、https://github.com/mizchi/tsx-source-jump は視覚的なUIとコードの対応をとるためにつくったもの。 6kb の typescript コンパイラである https://github.com/mizchi/mints は、そのままだとブラウザで typescript が動かせないので、service-worker に仕込んで透過的に ts を書けるようにするために作った。typescript は重すぎるので、runtime に仕込める程度の最低限のサイズにした。

vscode.dev を見て、 mizchi/file-system-editor でローカルファイルを全書き換えするのが Chrome 限定で可能なことを確認した。file system api の最初のバージョンではできなかった気がしたが、どこかでAPIが拡張されたのだろうか

tsx-source-jump の構成技術と file-system-api を使えば、ブラウザ内で自己書き換え機能を備えた React Component が作れる気がしていて、近々試作するつもり。

ブラウザ上で node を動かすカーネル周辺を実装する stackblitz/webcontainer-core は期待していたが、どうやらカーネル相当の実装がソース非公開でプロプライエタリなものになりそうで、もはや自分で作るしかないのではないか? と思い始めている。

正直ブラウザで動かすのは node.js より Deno のWeb標準志向のセマンティクスが有用だと思っていて、 mizchi/frontend-deno というのを試作した。これは mints を service-worker に仕込むことで、 deno 用のTSのコードがブラウザでそのまま動くことを実証した。

低レベルの必要性

暇を見つけては Rust や Wasm の仕様を読んだりしてみたが、自分が CS どころか基本情報レベルの概念を理解してないのを IEEE 754 とか LEB128 がリファレンスなしで出てくるたびに感じている。詰まるたびに妻に聞いてそんなのもわかんないの?これだからフロントエンドは〜とバカにされている。

とりあえず下回りからと、 https://store.steampowered.com/app/576030/MHRD/ で全加算器まで作ったりした。(そこで飽きた)

https://github.com/jlongster/absurd-sql を調べる過程で Atomics のドキュメントを読んだ際も、ただ wait と notify が futex のセマンティクスであるとだけ書いてあり、 futex は mutex のマルチスレッド応用ということはわかったが、ここから先はデータベースを自作するなどして肌感を掴む必要があると感じて、一旦後回しにしている。

仕事では主に 3rd party script に関わる仕事をやってるのだが、そこでも高速化のためになんらかのバイナリに圧縮したりすることが多く、枯れた gzip や deflate、最近だと cbor を脳死で採用しがちで、状況に応じた効率的なメモリ配置や圧縮アルゴリズムを選択できていない感覚がある。

CBOR — Concise Binary Object Representation | Overview

自分が低レベルな操作になれていないので、 ArrayBuffer と DataView を通じてデータ構造を変更するのに毎度詰まっている。JSでバイナリを操作する系の Web の資料は node の Buffer を使ったものが多く、ブラウザでやろうとすると UInt8Array/UInt16Array で書き直すことがとても多い。ブラウザで動く Buffer のポリフィルはビルドサイズが大きく採用できない。

JSのビット操作の演算子にまだ抵抗感があるが、一つ一つイディオムとして覚えると便利、という感覚を得られてはいる。とはいえなぜJSでやってるんだ感もある。

というか、 cbor や wasm や http3 がそうなのだが、 Web が全体的にテキストからバイナリに回帰している感がある。

親知らずの話

突然だが、今年の後半は体調を悪くしがちで、一番つらかったのは親知らずの抜歯(右側8番水平埋伏智歯)に伴う体調悪化だった。8月ぐらいから今までずっと続いている。

ただの親知らずの抜歯ではなく、最初は 3年ほど前に近所の歯医者で抜歯に失敗した。その後何度か引っ越しをはさみ別の歯医者に行っていたが、特に指摘されず、最近になって抜歯(失敗)痕が悪化していることを指摘され、総合病院の歯科口腔外科を紹介された。

歯科口腔外科の抜歯も失敗し、3回目に全身麻酔下でやっと抜けた。歯科医曰く、十数年に一度の難症例とのこと。

3回とも抜歯成功/失敗に関わらず、顎が腫れ上がるのと舌の筋肉の炎症で発声が困難になり、炎症で熱も出て一週間ほど寝込むことになっていた。ひどいときは口が 1cm ほどしか開かず、物理的に食べ物が口の隙間を通らない(看病してくれた妻に感謝)。経過観察でギターのカポのような謎の金具で口をこじ開けられたときは死ぬかと思った。

治療は終わったはずだが、現在でも歯根の一部が組織内に迷入している。おそらく影響はないはずだが、仮に影響が出た場合、それはもはや歯科口腔外科ではなく ICU で脳外科に近い治療になるとのこと。

また、治療後にめまいが続きなかなかコードが書けず、それで仕事の進みが悪く、結構凹んでいた。歯科口腔外科の先生に相談したら、精神的なものもあるので、そうやって気に病むのもほどほどにしたほうがいいとアドバイスを受けた。

コロナには罹ってないが、ワクチン二度目の接種で異物混入ロットを引いた。

モデルナ製ワクチンの異物混入について 墨田区公式ウェブサイト

歯科口腔外科の先生には、あまりにも珍しい事例を連続で引いたので、「今年宝くじ勝ったら当たるかもよ」と謎の励ましを受けた。結局買っていない。

モデルナのワクチンの副反応も結構しんどかった記憶があるが、親知らずのインパクトが強すぎてよく思い出せない。

おわり

全体的に体調悪くてあんまり動けなかったという反省があり、 2022 年はいい感じにしたい。