Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

雑なコード生成のすすめ #nihonbashijs 8 / zatsu-code-genera...

雑なコード生成のすすめ #nihonbashijs 8 / zatsu-code-generation

Masayuki Izumi

December 14, 2023
Tweet

More Decks by Masayuki Izumi

Other Decks in Technology

Transcript

  1. © 2023 LayerX Inc. 2 ▸ Wantedly, Inc. (2018-04 -

    2022-08) ▸ LayerX (2022-09-) ‐ バクラク事業部 Enabling Team ‐ Backend と Web Frontend 中心にやってます ▸ 最近のお気に入りパッケージは @bufbuild/protoplugin, @floating-ui/react 画像を入れてね whoami @izumin5210
  2. © 2023 LayerX Inc. 4 はじめに - 雑なコード生成のすすめ .proto .graphql

    pages/**/*.tsx *_pb.ts, *_connect.ts @bufbuild/protoc-gen-es @connectrpc/protoc-gen-connet-es *.ts $path.ts graphql-codegen など pathpida など APIスキーマをもとに クライアントが自動で作られる! 型もあって安心! ファイルパスをもとに URLビルダーが自動で作られる! 型もあって安心!
  3. © 2023 LayerX Inc. 5 はじめに - 雑なコード生成のすすめ .proto .graphql

    pages/**/*.tsx *_pb.ts, *_connect.ts @bufbuild/protoc-gen-es @connectrpc/protoc-gen-connet-es *.ts $path.ts graphql-codegen など pathpida など APIスキーマをもとに クライアントが自動で作られる! 型もあって安心! ファイルパスをもとに URLビルダーが自動で作られる! 型もあって安心! 他で宣言されているルール(APIスキーマ, ファイル・ディレクトリ構成, etc.)に従って コードを書いている場合、それは自動で生成できる可能性がある TypeScript は型の表現力が高いので、 うまくコードを生成できれば高い生産性を得られる
  4. 目次 Agenda ▸ はじめに ▸ How to 雑コード生成 ▸ How

    to 何かをもとにコード生成 ‐ Protobuf ‐ GraphQL ‐ TypeScript
  5. © 2023 LayerX Inc. 9 雑なコード生成の例 例: public/ 以下のファイル一覧を型に ▸

    モチベーション ‐ Next.js 標準の typedRoutes だと未対応 ▸ じつは40行くらいで作れる。めっちゃ簡単。 ‐ 再帰的にディレクトリを見て、ファイル一覧を作る ‐ ファイル一覧の配列を | で join して union にする
  6. © 2023 LayerX Inc. 11 雑なコード生成の例 雑ポイント②: コードは雑に stdout or

    fs.writeFile でOK fs.writeFile してもいいけど shellscript でリダイレクトするほうが楽(かも)
  7. © 2023 LayerX Inc. 15 何らかの宣言から TypeScript を生成する GraphQL をもとに

    TypeScript を吐く graphql パッケージで構造化されたスキーマを取得できるので、そこから必要な情報を集める (上のコードは InputObject から zod の Object schema を作ろうとしている)
  8. © 2023 LayerX Inc. 16 何らかの宣言から TypeScript を生成する Protobuf をもとに

    TypeScript を吐く @bufbuild/protoplugin を使えば 構造化されたスキーマを元にコード生成ができる (左のコードは Protobuf の message から zod の Object schema を生成しようとしている)
  9. © 2023 LayerX Inc. 17 何らかの宣言から TypeScript を生成する TypeScript をもとに

    TypeScript を吐く typescript や ts-morph でコードを AST に変換できる あとは目的のコードを見つけて処理するだけ (目的のコードの AST 上での表現は AST Explorer で調べる)
  10. © 2023 LayerX Inc. 18 他のなんらかの宣言・定義(APIスキーマ, コード, etc.)をもとに コード生成したいケースは? ↓

    何らかの方法で Tree or リストが得られるので、 それを辿るだけ! はじめに - 雑なコード生成のすすめ
  11. © 2023 LayerX Inc. 19 ▸ コード生成は、こだわりすぎなければ難しくないし手間もかからない ‐ 「雑に文字列 join

    して stdout に出すスクリプト」を「雑に ts-node で動かす」でもそんなに困らない ‐ スキーマやASTを読むのも、限られたユースケースなら複雑なフレームワークに乗る必要もない。 for … of でなんとかなる。 まとめ ▸ ほどよいライブラリが世の中にないときは、 さっと手を動かして雑な(ちょうどいい)コード生成をしてみませんか? ‐ その雑なツールがいつか public になればみんなハッピーかも ‐ 面白いネタがあったら教えてください or 公開まってます!