Link and Motivation Developers' Blog

リンクアンドモチベーションの開発者ブログです

【Vue Fes 勝手に応援企画】UnJSについてちょっと予習してみた

はじめに

こんにちは、リンクアンドモチベーションの小宮です。

先日、弊社中上からの記事 でも触れていましたが、 今年もVue Fes Japan 2024にプラチナスポンサーとして協賛しております！ 当日は私もブース運営として参加するので、立ち寄りの際はぜひお声がけください^ ^

今日はVue Fes 勝手に応援企画と題して、中上に続き、私も事前予習を兼ねて記事を書きました〜 多くの魅力的なセッションがありますが、今回は"UnJS: The Missing Tools for the Modern Web"について述べていこうと思います！

セッション概要

以下のURLからセッション概要について述べられている内容を見てみると、UnJSを作った背景から、NuxtとNitroとの相互作用について、Web開発をどのように簡素化するなど、幅広い情報が聞けそうですね！

vuefes.jp

UnJSというのは、TypeScriptのライブラリ群のことを指しており、その数なんと現時点で63個とのことです！

unjs.io

UnJSに関する更に詳しいお話は、こちらのzennの記事がよくまとまっているので、そちらをご参照ください！

zenn.dev

その中でも今回は概要にも取り上げられていたのと、 先日のViteConfでもNitro v3について触れられていたので、こちらで話されていた内容をおさらいしていこうと思います！

www.youtube.com

A First Look at Nitro v3

Nitroに関する説明

そもそもNitroとは様々なホスティングプロバイダーに適した出力形式を生成出来るサーバーツールキットで、ホスティング先のことを意識したコードを書かなくて良くなるのが嬉しいポイントです。

また、Nitroはランタイムとビルダーの大きく分けて2つの部分に分かれています。

ランタイム

様々な機能が提供されています。

  • Directory構成を利用したAPIルーティング
    • 内部的には h3 と呼ばれる同じくUnJS製のライブラリの1つを利用している
  • サーバー起動時に実行されるプラグイン
    • これもデプロイプロバイダーに依存していない
  • フレームワークが利用するレンダリング層
  • 組み込みのStorageシステム
  • タスクランナーやcronジョブランナー
  • データベースレイヤー

ビルダー

nitro build コマンドであったり、フレームワークのbuildコマンドを実行すると、configの内容に応じて各デプロイプロバイダーに適した形で出力してくれます。 これはRollupによって実装されているようです。これについては クロストーク で触れられるかも？🤔

$ npm run build

> build
> nitro build

✔ Generated public .output/public                       nitro 1:30:06
ℹ Building Nitro Server (preset: node-server)     nitro 1:30:06
// 略
✔ You can preview this build using node .output/server/index.mjs

Nitro v3のアップデート

Web標準

Nitroは初期からWeb標準との互換性を念頭に置いて設計されており、Cloudflare Workersなどのエッジプラットフォームへのデプロイを可能にしています。 しかし、過去にはNode.jsがエコシステムの主流であったため、既存のnpmライブラリとの互換性を維持するために、Node.js API上に強力な互換レイヤーを構築してきました。 Nitro v3では、Web標準を第一級サポートとしつつ、Node.jsの完全なサポートとパフォーマンスも維持しています。

これは実際にアーカイブ動画の7分20秒あたりを見てほしいのですが、Web標準の形で書かれたサーバーAPIは、Requestオブジェクトを受け取り、Responseオブジェクトを明示的に返します。これにより、クライアントサイドと同じインターフェースになり、コードの一貫性や理解しやすさ、テストの容易さなど、様々なメリットがあります。

H3 v2

先述した通り、NitroのルーティングにはH3というライブラリが使われています。 H3 v2におけるUpdateとして、60%のバンドルサイズ削減と、Web レスポンスの処理が10xになっていることが述べられています。

Viteとの統合

現在実験中の内容として、Nitro用のViteプラグイン vite-plugin-nitro を作成することを考えていることや、rolllupの代替ビルダーとしてViteを使うことが検討されていることが話されていました。

Node.js互換性の向上

Cloudflareの開発チームと協働して作成したエッジにおけるNode.js互換性を担っている、unenvという互換レイヤーのv2の内容についても最後に述べられていました。 Cloudflare Workersに統合されており、既存のNPMエコシステムとの互換性がさらに向上しています。

最後に

いかがだったでしょうか？自分は去年もVue Fesに参加させて頂いたのですが、フロントエンドのお祭り感があって1日があっという間でした。 今年のVue Fesも去年以上に学び、楽しみ、ブースも盛り上げていきたいなと思うので、よろしくお願いします！

今日はもう一本、弊社 酒井による事前予習記事が投稿される予定ですので、お楽しみに〜！