Next.jsで管理画面的なものを作るのに、フォームをどうするか調べた。

先日読んだ本では、react-hook-formを使っていたので、そのようにしてみる。

思った以上に簡単に実装できた。

積極的に使ていきたい。

結局、いくつか動かして試してみた。additional-propertiesは無指定で。

• Documentation for the typescript-fetch Generator
  • ReferenceError: _ is not defined
• Documentation for the typescript-node Generator
  • Module not found: Can't resolve 'request'
  • requestパッケージはDeprecated!らしい。
• Documentation for the typescript-axios Generator
  • とりあえず動いた。
  • axiosパッケージの追加インストールが必要。

ということで、typescript-axios でやってみようと思う。

E2Eテスト書くなら、OpenAPIのクライアントコードジェネレータ使って出力したもの使えばよいのでは？ と思いついたので、どのクライアントにしようかとGenerators Listを眺める。

せっかくだからTypeScriptが良いなと思うが、11種類もあってどれが適切なのか判断付かない。 実際に生成して使って比較すればよいのだろうけど、そこまで詳しくない言語でそれをやろうとすると挫折する気しかしない。

先日、アドビはFigmaを買収する意向を表明しました。共同クリエイティビティは新時代へというニュースを見て、セールで買って積んであったAmazon.co.jp: Figma for UIデザイン アプリ開発のためのデザイン、プロトタイプ、ハンドオフ eBook : 沢田 俊介: 本を急いで読んだ。

一通りのFigmaでできることを知ることができたと思う。

FlutterFlowと同じような感じかな。

アプリをFlutterで作るならFlutterFLowで、Reactで作るならFigma（＋Amplify）と使い分けられそう。

よくわからない。

ググるとhttptest使う例が良く出てくるけど、型が合わなくて組み立てられない。

仕方ないので、APIサーバー起動してhttp.NewRequestWithContextで叩いて結果を見るという、E2Eっぽいテストに落ち着きそう。

grpc-gatewayでgRPCとREST両対応のサーバを作る | フューチャー技術ブログのサンプルでmux.Handle("/docs/", docsProxy)となっているところを、go-chi/chi: lightweight, idiomatic and composable router for building Go HTTP servicesを使っているのでrouter.Handle("/docs/", docsProxy)と書いたところ、docsは見れるのに、cssやjsが404で見れなくて何でだろうと思った。

昨日のエラーは、grpc-ecosystem/grpc-gateway: gRPC to JSON proxy generator following the gRPC HTTP specにあるようにbuf.yamlに

deps:
  - buf.build/googleapis/googleapis

を追記してbuf mod updateを実行したら直ったような気がする。

気がする、というのは他にもprotoファイルをダウンロードしてきたりとかいろいろやっていて何が決定打だったのかよくわかってない。

結果オーライ。

proto定義何もわからない。。

REST用のパスを定義するために

    option (google.api.http) = {
      get : "/example-messages/{id}"
    };

といった定義が必要で、これを使うには

import "google/api/annotations.proto";

が必要らしいという理解なのだけど、これをビルドしようとすると

event.proto:6:1: Import "google/api/annotations.proto" was not found or had errors.

というエラーが出てしまう。

こういうところで躓くの嫌すぎる。

protoをAPIスキーマのマスターにしようとした場合、既存のOpenAPIで用意していたUIとかどうしよう、ということになるけれど、OpenAPI->gRPCとは違って逆の変換はたくさんツールがあることは調査済み。

全体の作りとしてはgrpc-gatewayでgRPCとREST両対応のサーバを作る | フューチャー技術ブログこんな感じにするのが良さそう。

ということでまずはマネするところからやっていきたい。

今あるOpenAPI用の定義yamlファイルからgRPC用のprotoファイルが生成できないかなと思い、検索したら良さそうなものが見つかった。

• nytimes/openapi2proto: A tool for generating Protobuf v3 schemas and gRPC service definitions from OpenAPI specifications

https://github.com/umemak/eventsite_go/blob/main/openapi.yml でやってみた。

$ go install github.com/NYTimes/openapi2proto/cmd/openapi2proto
$ openapi2proto -spec openapi.yml -annotate
syntax = "proto3";

package eventsite;

import "google/api/annotations.proto";
import "google/protobuf/empty.proto";

service EventsiteService {
    // Get all events.
    rpc GetEvents(google.protobuf.Empty) returns (google.protobuf.Empty) {
        option (google.api.http) = {
            get: "/events"
        };
    }

    // Create event.
    rpc PostEvents(google.protobuf.Empty) returns (google.protobuf.Empty) {
        option (google.api.http) = {
            post: "/events"
        };
    }
}

serviceは作られているけど、messageは作ってくれてないっぽい。