Posts for: #Vite

sveltekit/vite アプリケーションの調査を再開

1時に寝て起きたか起きてないか覚えてない感じで6時に起きた。起きてちょっとゲームして気付いたら7時だった。

kit/vite アプリケーションのデバッグ

先週公開したテックブログ の続き。

vite アプリケーションのバックエンドインテグレーション の詳細を調査している。丸1日デバッグしていていくつか振る舞いがわかってきて、designer アプリケーションを作りたいという要件に対して、こうすればできるんじゃないかという仮説も立てられるようになった。いまやりたい要件は kit の ssr アプリケーションを埋め込みたい。これは要件に満たないが、kit の ssg アプリケーションならば static ディレクトリに置くだけで参照できるし、インポートパスさえ書き換えてやれば別の kit アプリに埋め込むこともできるのを確認した。意図した通りの振る舞い。

vite アプリケーションはビルドオプションで manifest.json を出力し、エントリーポイントやどのファイルがどのファイルをインポートしているかといった情報を管理している。sveltekit はこれらの manifest.json から rollup でバンドルするために manifest.js を生成している。厳密には、sveltekit では production ビルド向けのチューニングをしたビルドツールを adapter と呼び、vite のビルドをフックする場所に1つになっている。node.js サーバー向けに production ビルドするときは adapter-node を使う。この実装を読んでみると、vite がビルドした成果物に対して、再度 rollup でバンドルして成果物を作り直すといったことをしている。そして、vite の成果物 (manifest.json も含む) を抽象化したものが Builder となる。adapter は Builder のインスタンスを使ってビルドの成果物を制御できる。先の manifest.js もこのときに生成していて、rollup でバンドルするためのパラメーターの1つとして使っているようにみえる。しかし、rollup のドキュメントをみても直接的に manifest.js の説明はなく、rollup の拡張の仕組みで manifest.js を作っているというよりは、sveltekit の要件によるもののようにもみえる。ここの背景はまだよくわからない。

私はフロントエンドのことが全然わからないのでライブラリのソースコードを読みながら、ドキュメントとあわせて調べて、1つずつ理解を深めていくというアプローチで進めている。こういった調査のやり方もメンバーへ伝えていければと考えている。

小規模企業共済オンライン手続きポータル

2021年度から小規模企業共済 に加入している。今年から掛け金を7万円/月に変更した。年間で84万円の所得控除となる。ちょうど2023年9月1日からポータルサイトが作成されたらしい。いずれマイナポータルと紐付くのかもしれない。

利用登録しようと思って、メールアドレスを登録しようとしたら会社のメールアドレスはなぜかバリデーションエラーになって gmail のアドレスなら登録できた。その後も氏名の半角カナ入力を強制されたりしながら、マイナンバーカードを読み取って認証チェックして利用登録の申請はできた。しかし、自動で本登録されるわけではなく、おそらく申請内容が先方に届いてなんらかの運用があって本登録されるみたい。オンラインポータルのホームでも半角カナを使っていたり、<title> タグには「マイナ手続きポータル」とあったり、申請しただけでいくつも不備がわかるようなひどいサイトになっている。2023年にまともな開発者が作ったサイトとは思えない。デジタル庁に作り直してもらった方がよいと思う。

フロントエンドのビルドツールと vite

22時に寝て0時に起きて2時間ほどネットで遊んで寝て5時に起きて7時に起きた。16時半にお仕事を終えて、雨降りの中、芦屋まで出掛けて能をみてきた。

svelte/kit と vite

水曜日から vite の機能や振る舞いについて調べている。厳密には svelte/kit (svelte と svelte kit の両方を指している) はどうやって .svelte ファイルや他のソースコードをコンパイルしているのかを調べ始めた。kit のコードを調べても svelte のコンパイルをしているようにはみえない。vite.config.ts には次のように kit が提供しているプラグインを使っているようにみえる。

import { sveltekit } from '@sveltejs/kit/vite';

...

export default defineConfig({
	plugins: [sveltekit()]
});

このコードを追っていくと、次のように vite-plugin-svelte からプラグインを設定するコードがある。

import { svelte } from '@sveltejs/vite-plugin-svelte';
...
export async function sveltekit() {
    ...
    return [...svelte(vite_plugin_svelte_options), ...kit({ svelte_config })];
}

vite-plugin-svelte のコードを調べていくと、load や transform といったフックポイント に svelte のコンパイラを呼び出すコードがみえてくるようになる。

compileData = await compileSvelte(svelteRequest, code, options);

svelte のコンパイルは vite の仕組みを使って vite-plugin-svelte に実装されている。それなら vite はどうやってフレームワークのコンパイルを実現しているのだろうか?という疑問に行き着く。その背景を調べたり、ドキュメントを読んだり、実際にサンプルコードを動かしながら検証したりをこの3日間やっていた。自分なりの仮説はできたけれど、本当にその仮説のような振る舞いをしているかの実証がまだできていない。週末に余裕があれば、それをやっていきたい。

2階席からの能鑑賞

行きは三ノ宮から JR で8分、帰りは阪神電車で12分の芦屋駅から徒歩10分ほどで芦屋ルナホールへ着く。第二十二回芦屋能・狂言鑑賞の会 へ行ってきた。前月に 蝉丸の予習 をして準備万端で臨んだ。芦屋ルナホールに着いたら17時過ぎで受付をしてエレベーターで4Fまで。ホールの2階席が物理的には4Fにあった。芦屋ルナホールの2階席は見晴らしがよくて、能を斜め上から俯瞰してみるという、これはこれで独特の視点をもってみれておもしろい。ホールは能舞台ではないので、普通の舞台に高座の床を敷いて周りに松をいけて、簡易の能舞台をこしらえていた。

ちょうど一調の「花月」が終わったところで、2つめの演目の狂言「濯ぎ川」をみて、芦屋市長挨拶して、能の蝉丸という順番だった。芦屋市長と言えば 歴代最年少26歳で市長になった 方で挨拶を聞いていても生徒会長が挨拶をしているような雰囲気で若い。こういった若くて優秀な方が若い感性で活躍してほしいと思う。

蝉丸が始まった。シテは逆髪で、ツレが蝉丸になるという。どちらも能面をしていた。ワキは能面をつけないことは知っていたが、ツレは能面をつけていいんだということを知った。

ストーリーを知っていると謡や詞章が聞き取れるかと期待したが、まだまだそんなことはなくて、紙に書いたものがないと付いていけない。「能のことばを読んでみる会」でもらった詞章をもっていけばよかった。あとイヤホンがあれば朝原さんのスマホ解説を聞けるのだが、それを聞きたいと思いつつ、いつもイヤホンを忘れてしまって聞けない。次回こそイヤホンを忘れないようにしたい。

それでも所々、記憶に残っている内容と演者が話しているところは理解できて、普段よりも能の物語の展開を理解できたと思う。一方で地謡 (横に座っていて集団で謡う人たち) が能の所々で謡が始まるとき、シテやワキがずっと待っていて時が止まっているかのような感覚になる。いままでもそういう展開だったはずだけど、今回はストーリーが頭も中に入っているので、逆髪、蝉丸、清貫のやり取りが止まってしまって、続きが待ち遠しいように思えた。テレビをみていて CM が入るような感覚。

囃子は笛・大鼓・小鼓の3人体制だった。これも物語の要所で盛り上がりを演出している。囃子の盛り上がりを聞いていると、ここが見せ場の場面なのだと自然に観客を引き込むことができる。最後の逆髪がじゃあまたねって、あっさり帰るところに蝉丸がもう帰っちゃうの?と嘆くところとか、囃子が盛り上げるのかと思ったらそうでもなかった。途中のどこかの場面が一番盛り上がりを演出していた。

予習してこんな物語の展開になるのかな?と予想していたものと、実際の能をみているとイメージ通りではなかった。それは地謡の謡いの合間が私の頭の中には入っていなかったから。次に「能のことばを読んでみる会」へ行くと地謡のところがこんな雰囲気なのかとイメージできるようになる。いずれにしても、詞章と能の関係における解像度は少し上がったように思う。まだまだ能をみていて幻視をみるというのはほど遠い。こうやって少しずつ解像度を上げていければと思う。