Denoばた会議 Monthly 第22回

2023年8月18日開催。
connpassリンク。

今月のアップデートを追う

Denoのアップデートを追っていくLT。
そのあとの雑談込みでザックリと箇条書き。

@uki00aさんのスライド

Deno v1.36

--deny-*オプションがサポート

• Denoに特定の操作を明示的に拒否させることができる
• 例えば、--allow-read --deny-read=README.mdであればREADME.md以外の読み込みを許可する
• プロンプトも出なくなる
• あんまり使い道が思いつかない
  • 新しいコントリビュータであるAsherさんが実装した
  • 元々のパーミッションができている過程のときにいなかった方
  • 元々あった問題がこれで解決される！ というのはなさそう
• 毎更新で目玉機能がほしいとBartekさんが言ってた
  • 今回の目玉機能はこれとなってる

deno.json(c)でvendorオプションがサポート(unstable)

• 有効化すると、Denoのサードパーティモジュールがvenderディレクトリに、npmパッケージはnode_modulesディレクトリに自動で保存される
• deno venderコマンドで発生した課題を解決するために作られた
  • deno venderコマンドはなくなる方針？
• venderディレクトリに吐き出された依存関係にログを仕込んだりしてデバックできる
• 外部依存をいじって調査するときに便利
• 今まではDENO_DIRというのに保存されていたが、それは探しづらかった
• 議論したときはvendorじゃなくてdeno_modulesという名前だった（Ryanさんのイチオシ）
• 一回deno_modulesでPR出したらコミュニティから異論がありvendorに変更された

deno testでJUnit/dotレポーターがサポート

• --reporter=junit|dotで有効化できる
• --reporter=dot --junit-path=report.xmlでdotレポート形式で標準出力し、JUnitレポート形式のファイル出力ができる
• CircleCIとかJUnitレポートが読めるCIサービスで便利になる
• 成功をドットで表すdotレポート（kt3kさんはPHPUnitでよく眺めた記憶がある）
• JUnitレポート形式は外部連携が楽という社内需要でサポートされた
  • これが本当に必要だったやつ
  • Deno Deployのフレーキーさの解決のために必要だった
  • Deno本体自体のフレーキーも多い
  • Deno本体はcargo testなのでこれを採用しても使えない
• dotレポート形式はBartekさんが必要だったやつ
• レポーターがほしいという意見がある
  • レポーターいらない気がするってRyanさんが反対してた
  • dotレポーターとか嫌がってたけどついに折れた
  • レポーターは本質的ではないと考えているのかも
  • 例えばMochaはお茶目なレポーター入れすぎてるので、そこまで行くと確かに本質的ではないかも

deno benchでDeno.BenchContext型が実装

• Deno.bench("name", (t) => {})でt.start()とt.end()の間のみ計測するなどができるようになった
• 前処理後処理を計測対象から外せるようになった
• 細かい制御ができるようになった

node:testが実装

• Node.jsのビルトインテストランナーが利用できるようになった
• deno testで実行できる
• Node.js自体で使われているのか……？ ましてやDenoで使われる需要はあるのか？
  • Node.jsのテストランナーといえばJestがスタンダードで、Vitestが上がってきているイメージ
  • TAP形式のtapeやNo configのAVAなど、特化したテストランナーは色々ある
  • 用途がいまいち不明
  • 小規模なモジュールを開発し始めたときには使えるかも？

Fresh v1.4

Islandコンポーネントの事前ビルド

• deno task buildで_freshフォルダに事前ビルドできる
• deno task devで自動検知する
• かなりヘビーに使っているdeco.cxというスタートアップがある
  • Marvinさんと密にやり取りをしていて、実情を聞いていた
  • 1番重いIslandがあるページが20秒を超えてしまったので、流石にそれはマズいということで対応
  • ほぼ外部依存を読み込む時間が占めていた

fresh.config.ts

• プラグインなど、Freshに関する設定をまとめられる
• main.tsやdev.tsから、この設定ファイルを読み込むように修正する必要がある
• 1箇所で管理しましょう、というモチベーション
• dev関数の第3引数にconfigが追加された
• 早めに移行しておくと良いかも
• 自動アップグレードからは除外されているので、アップグレードするときは注意
• ブログでNode.jsのconfig煽りをしてたので、若干足並み揃ってない感じありますね
• config多いのは良くないと一番思っているのはRyanさん
• AndyさんはRyanさんの考えをもとに記事を書いた
• FreshのメンテしてるMarvinさんはDeno歴が浅いのでそちらに寄るっていうのはわかる気がする

レイアウト

• routeディレクトリの任意の階層に_layout.tsxを配置できる
• 今までは_app.tsxでできたけど全体で1個しかできないので、この変更でより細やかなレイアウト統一ができるようになった
• Next.jsのApp Routerも同じ感じでしたっけ？ ちょっとフロントの勉強会行ったときに聞いてみます

define*ヘルパー

• defineConfig/defineLayout/defineApp/defineRouteの4つのAPIが追加された
• たとえばdefineRouteは非同期routeコンポーネントを簡単に作ることができる
• defineRouteはreqとかctxに自力で引数の型を書かなくても良くなる
• 非同期ルートコンポーネントはこのほうが書きやすいが、同期だと従来の方法が書きやすい
• これで非同期は迷子になりにくくなる

Route Groups

• (routes)で書いたディレクトリはURLとしてマッピングされず、Routeのグルーピングに利用できる
• (_components)というようにアンダースコアで始まるRoute Groupsは無視されるため、特定のrouteにのみ使われるコンポーネントが定義しやすくなった
• (_islands)は特殊なパターンで、この中に定義されたものはIslandとして扱われる

その他の話題

Deno Fest

• Deno Festというイベントが秋葉原で開催される
• 開催日時は10月20日金曜日の13時から20時10分
• 特設ページも作られている
• 開発チームに聞こう、のコーナーは参加する開発チームにランダムで質問を投げるコーナー
  • Deno社のメンバーがかなりくる
  • Deno offsiteで東京にくるので
  • 全社員20人のうち10人ちょっとが来る
  • coming soonはDeno開発チームがしゃべる予定
• 他の参加者
  • Denoを特殊な使い方をしている福野泰介さん
  • Deno KVハッカソン入賞者のChiezoさん
  • オンライン万華鏡をDenoで作った鳥居さん
  • primordialsに積極的にコントリビュートしている森内さん
    • 福岡なのでリモート参加
  • Software DesignでDenoの短期連載してたゴリラさん
• 人をいっぱい呼んだら盛りだくさんなスケジュールになった
• 懇親会あり枠は埋まっているけど、金曜日開催だということに気づいてない人がいたらキャンセルされるかもなので、チャンスは残っているかも

質問共有コーナー

Twindの更新止まってる疑惑ありましたけど、あれってFreshではどうする予定なんですか？

• v1というのを別ブランチで作っていて、それがリリースされたことで状況は改善された
  • 使い続けても問題なさそうという判断
• UnoCSSのプラグインがないけど書ける仕組みはできたので、もうすぐできるかも
• Tailwind CSSを直接使うFresh TailwindCSSというものもある
  • Twindは1個1個その場で作るJITが売りだった
  • Tailwind CSS本体もJITを持つようになった
  • JITでFresh読み込んでる？
  • 将来的には本体だけになるかも……？
• Twindはワンマン体制
• UnoCSSはAnthonyさんがリードしているけど、コミュニティ運営体制
  • Anthonyさんのなぜ作ったかという記事が良い
• Fresh自体もUnoCSSの利用やTailwind CSSを直接使うことに注目している

URLショートナーをDenoとDeno Deployで作るGist

• Deno KVでデータ保存して、Deno.serveで動かす
• 言語ランタイムでKV持ってるのはズルいので、そのズルさを活かしたサンプルと言える

自分用のTwitter（times-kt3k）を作った

• TwitterがXに変わって、プラットフォームに依存してつぶやくということに疑問を抱いた
• つぶやければ問題ないということに気づいた
• GitHub上にMarkdownファイルをコミットすることでつぶやいている
  • ファイルを取りに行くというのはDeno Deploy背後のGoogle Cloud Storage
  • GitHubと連携するとすべてのファイルがアップロードされる
• ファイル数1000以下であれば問題ない
  • つぶやきだと1000超える可能性があるし、そこまで行くと高負荷になる
  • Deno Blogのようなブログ記事は1000超えることはそうそうないので、Markdownでも問題ないと思う
• 将来的に、Deno KVや外部のDBにする形に変更したほうがよいかも
  • Markdownが使える外部DBのSNSとしては、Supabaseを使っているLeavesがある
• RSSフィードでの購読も対応したい

deno_stdでXMLパーサーを入れようという話になった

• deno_stdにXML周りのものがない
• XMLパーサーってDOMParserであるんだけど、それと互換性あったほうが良いよね？ という話になり複雑な作業になるので断念
• npmパッケージでfast-xml-parserというのがあるので、uki00aさんはこれ使ってる
  • 2017年から始まってる
  • ほぼ個人が更新しているが、活発そう

Deno本体でKVのリモート接続

• Deno.openKvの引数にプロジェクトのKVページにあるURLを指定して本番のKVをいじれる
  • 運用で使う機会があるかも
• SassKitでも重宝しそう
  • SassKitをやってる人がデータ構造をしょっちゅう変えてる
  • マイグレーションスクリプトを走らせて変えてる
  • カラム追加ならともかく、関係性を変えるマイグレーションもし始めた
  • その変更があっているかどうか確認するすべがない
  • この機能を使ってリモートのKVに接続して確認できる
  • 本番のレプリカをローカルで作って確認することもできる
  • リモートのKVに繋いでローカルのファイルパス指定でKVを開いてローカルのKVにデータを流し込んだりできる

参考資料

上記をまとめる際に眺め、かつ箇条書きの中に含められなかった資料です。
名前だけ掠ってて関係ない資料もあるかと思いますが、まとめる作業の可視化として残しています。
読まなくて大丈夫です。

• 「フロントエンドのテストは“不安定さ・壊れやすさ”との戦い」　和田卓人×倉見洋輔×古川陽介が語る、アクセシビリティの重要性 - ログミーTech
• Next.js 13.4 | Next.js
• Use primordials everywhere · Issue #11224 · denoland/deno · GitHub
• refactor: introduce primordials by lucacasonato · Pull Request #10939 · denoland/deno · GitHub
• Use frozen primordials for internal runtime code · Issue #10756 · denoland/deno · GitHub
• node/lib/internal/per_context/primordials.js at 2eeb4e1d944b4ebebcf80261d9250bc86eadc89a · nodejs/node · GitHub
• What are primordials in Node.js? - Stack Overflow
• node/doc/contributing/primordials.md at main · nodejs/node · GitHub
• Wind preset
• UnoCSS VS Code Extension