🙇‍♂️

Typiaで俺だけいい感じにZodの1500倍速く動こうとした結果

2023/05/14に公開

Next.js

typia

tech

ことの発端はVueを使い続けてきて最近Nextjsを触り始た自分が、次に作るサービスで使うライブラリまわりを探していた時に目にしたこの記事。

ドキュメントを読んでいるとどうやらNextjsで1500倍になるにはGenerationモードとやらを使う必要があり、以下のようなコマンドであらかじめ出力しておいたファイルを使うそう。

npx typia generate \
    --input src/templates \
    --output src/generated \
    --project tsconfig.json

個人的に関係性の高いもの、そこでしか使わないものは近くに置いておきたいのでディレクトリ単位で管理する必要があるこの構成は少し抵抗があった。

だからWebpackプラグインを作ることにした。

ローダーを追加するだけのプラグイン

TypiaにあったGenerationのコードを使ってファイル単位で変換できるようにしただけのローダー

このプラグインを next.config.js で指定する。

const {
  default: TypiaGenerationPlugin,
} = require("@achamaro/typia-utils/webpack"); // 公開していないので `npm link` で追加している

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: true,
  },
  webpack: (config) => {
    // プラグインに追加
    config.plugins.push(new TypiaGenerationPlugin());
    return config;
  },
};

module.exports = nextConfig;

すると typia. という文字列を含むファイルが読み込まれると typia generate で変換されたファイルになって後続の処理に流れていく。

さて、これで自分も1500倍の仲間入りができるとうっきうきでフォーム周りのライブラリを探しているといくつか問題が出てきた。

react-hook-form なるものが使われているみたい
@hookform/resolvers とやらにあるリゾルバーを使って各種バリデーションライブラリと連携できるらしい
Typiaのリゾルバがない
そういえばTypiaってエラーメッセージまわりの仕組みがなさそう？
ちょっとバリデーション関数少ないかも

これらを一通り軽めに実装して、あとは使いながら更新していくかーってひといきついたところでふと我に帰った。

つよつよエンジニアがしっかりメンテナンスしているライブラリ使った方が良くないか？

ということで、Typiaの周辺ライブラリが充実するまで待つことにしたのでした。
おしまい。

だからWebpackプラグインを作ることにした。

ローダーを追加するだけのプラグイン

TypiaにあったGenerationのコードを使ってファイル単位で変換できるようにしただけのローダー

Discussion