ELW株式会社 テックブログ

リアルなログをそのままお届けします。

vinxiやviteなどのエコシステムを整理

CTOの村上です。現在Tanstack Startの採用を検討していますので、 そこで使われているツールやSDKなどについて整理してみました。

  • vinxi (ヴィンシ): フルスタックアプリケーションやJavaScriptフレームワークを構築するためのツールキット・SDK
    • viteとnitro, H3を用いている
      • Nitroの上でH3のHTTPサーバーを立ち上げている
    • SolidStart、TanStack Startで使われている
      • サーバーサイドレンダリング(SSR)やファイルベースルーティングなどを提供する「メタフレームワーク」を構築するための基盤として使われている
      • 注: TanStack Startは直接vite, nitroで構築するように置き換わる予定
  • vite(ヴィート): ビルドツール
    • 開発用のビルドにはesbuildを用いている
      • なのでhot reloadが高速
    • 本番用のビルドには内部的にRollupを用いている
  • nitro: サーバーツールキット、アプリケーションサーバ
    • 単独でも使用できるが、フレームワークのサーバーサイド部分のためのエンジンとして使われることが多い

      • 単独で動かす例
        • 設定を書いた上で、server/routes/index.tsに以下を記述 (後述のH3を用いている)
          export default defineEventHandler((event) => {
            return "Start by editing <code>server/routes/index.ts</code>.";
          });
        
    • 複数のhosting provider (AWS Amplify, Vercelなど)に対応し、それぞれに合わせて自動で出力を変更する

  • H3: HTTP フレームワーク
    • HTTP のリクエスト/レスポンス処理やルーティングを提供
    • https://v1.h3.dev/examples/from-expressjs-to-h3

        import { createApp, defineEventHandler } from "h3";
      
        export const app = createApp();
      
        app.use(
          "/",
          defineEventHandler((event) => {
            return "Hello World";
          }),
        );
      

議事録

  • Turbopackは単独で使えるがそこまで評判よくない