🐃

Buf をFlutter(Dart)で使用する 手順

2024/07/29に公開

こんな人におすすめ

・bufとは何か知りたい
・protoファイルからコードを自動生成するとき protoc を使っているが bufに乗り換えたい
・Dartでもbufを使いたい

⭐️ protoファイルの自動コード生成が楽になります

Bufとは

https://buf.build/

proto スキーマファイルを効率的にビルドするためのツールです。
記事をみると破壊的変更の検出やlinterなど複雑なことがでてきますが
シンプルにそれだけ認識すれば最初はokだと思います。
詳しくはこちらをやってみると理解しやすくなると思います。
https://buf.build/docs/tutorials/getting-started-with-buf-cli

また、ほとんどの記事では Golangでの使用例が多いですが
Dartでもクライアント側のコード生成に有効です。

手順

今回はDartのクライアント側での生成例を見ていきたいと思います。

1. protoファイルを定義しよう

ルートに proto フォルダを作成して file.dartを作成し、
サービスのスキーマを定義します。

syntax = "proto3";

package hello;

// The greeting service definition.
service HelloService {
  // Sends a greeting
  rpc SayHello (HelloRequest) returns (HelloReply) {}
}

// The request message containing the user's name.
message HelloRequest {
  string name = 1;
}

// The response message containing the greetings
message HelloReply {
  string message = 1;
}

2. buf.yaml を定義しよう

ルートに buf.yaml ファイルを作成し以下のようにします

version: v1
deps:
  - buf.build/googleapis/googleapis
breaking:
  use:
    - FILE
lint:
  use:
    - DEFAULT

protocの場合は

 $ protoc -I gRPC/ gRPC/reserve.proto --dart_out=grpc:gRPC google/protobuf/timestamp.proto

上記のように google/protobuf/timestamp.proto をインポートしていましたが、
deps でインポートを指定できるようになりました。

💡このように yamlファイルで、インポートを一括管理できるのがbufの利点といえますね!

3. buf.gen.yamlを定義しよう!

おなじく buf.gen.yamlファイルを定義します

version: v1
managed:
  enabled: true

plugins:
  - plugin: buf.build/protocolbuffers/dart:v21.1.2
    out: lib/gen
    opt: 
      - grpc

pluginsで dart用のコードを生成するプラグインを指定して、
コード生成先を指定します。

4. コードを生成しよう

$ buf generate --path proto 

💡buf generateは、gitのプライベートモジュールのprotoファイルを指定できたりします。

以下のようになれば成功です。

最後に

protocの時は インポートの記載など、どうしてもコマンド自体が長くなり、自動生成が非効率でした。
上記のようにyamlファイルを指定してしまい、 Makefileを作成すれば、

$ make buf-gen

だけでコードの更新ができるのは大変いいですよね!
私のプロジェクトではbufを活用しており、便利さを実感しております。
参考になれば幸いです!

Discussion