【Flutter】Freezedの開発効率を向上させる裏技3選

この記事は、Flutter大学アドベントカレンダー 2023 8日目の記事です。

Freezedパッケージを使用してモデルクラスを作成する際の開発効率を向上させる方法を３つ紹介します。

1. VSCodeの拡張機能

1つ目はVSCodeの拡張機能を使った方法です。
Freezedでモデルを作成する際に、毎回build_runnerコマンドを叩くのは面倒ですよね。
そこで、必ず役に立つのがこの拡張機能です。

まずは事前に下記二つの拡張機能をインストールしておきます。

使い方は簡単で、

• Macは (command + shift + B)
• Windowsは (ctrl + shift + B)

でbuild_runnnerを走らせることが出来ます。

一度このショートカットを実行すれば、変更を監視している状態の場合、ファイルを保存するたびに自動でbuild_runnerが走ります。

VSCode下部メニュー↓

変更を監視している状態	変更を監視していない状態

2. 生成時間の短縮

次は、build_runner実行時の時間を短縮する方法について紹介します。
まずは、プロジェクトのルートディレクトリに下記の中身のbuild.yamlを作成します。
この設定をしておくことによって、build_runnerが走ってスキャンされる範囲を限定することができるため、結果的に生成速度の上昇につながります。

build.yaml

targets:
  $default:
    builders:
      source_gen|combining_builder:
        options:
          build_extensions:
            '^lib/{{}}.dart': 'lib/[生成先のパス]/{{}}.g.dart'
      freezed:
        options:
          build_extensions:
            '^lib/{{}}.dart': 'lib/[生成先のパス]/{{}}.freezed.dart'

[生成先のパス]の部分にdomainやmodel等の保存先を指定します。

この時、元ファイルとは別のディレクトリを指定して、生成ファイルだけ別のフォルダに格納しておくことによってmodelフォルダが見やすくすることも出来ます。

下記は生成ファイルをlib/model/generateに格納したい場合の例です。

build.yaml

targets:
  $default:
    builders:
      source_gen|combining_builder:
        options:
          build_extensions:
            '^lib/{{}}.dart': 'lib/model/generate/{{}}.g.dart'
      freezed:
        options:
          build_extensions:
            '^lib/{{}}.dart': 'lib/model/generate/{{}}.freezed.dart'

こんな感じになる↓

 └── - /model
     ├── - /generate
     │   ├── - a.g.dart
     │   ├── - a.freezed.dart
     │   ├── - b.g.dart
     │   ├── - b.freezed.dart
     │   ├── - c.g.dart
     │   └── - c.freezed.dart
     ├── - a.dart
     ├── - b.dart
     └── - c.dart

人それぞれ好みが分かれそうですが、個人的にはまとめた方がスッキリ見えるため好きです。

3. JSONをFreezedモデルに変換するWebアプリ

DartJはJSON形式のデータを元に、Freezedのモデルを自動生成してくれるWebアプリです。
深い階層のデータやリスト等にも対応しているため、ミスなく簡単にモデルを作成出来そうです。

実際の画面↓

最後までご覧いただきありがとうございました。
その他に、Freezedの開発効率を向上させる方法などがあれば教えていただけると幸いです！

お世話になっているコミュニティ

https://flutteruniv.com/
https://galirage.com/