【Flutter】Mason CLI を使って、ソースを自動生成する

プラグイン

対象者

  • Mason CLIについて知りたい方
  • DartやFlutterで定型のコードを毎回作成するので、テンプレートを作って、自動生成したい方
  • Mason CLIのサンプルが欲しい、リファレンスが欲しい方
  • 使い方を忘れているであろう3ヶ月後の私

Mason とはなにか

Masonとはなにか、と言われると正直よく分かりません(←おい)。
コード生成するツールかと思っていたんですけど、pub.devで調べるとロガーとかもあります。この「brickhub.dev」さんの作っているツールのシリーズを指しているのか、コード生成に関わるパッケージのことを指しているのか区別が付きません。
この記事では、Masonの中の「mason_cli」パッケージを使って、ソースの自動生成を行う記事になっています。以下、Masonと出てきたら、このパッケージのことだと思ってください。
ちなみにMasonは Googleの「Package of the Week」にも出た由緒あるパッケージです。

私はMVVMでページ作成しているので、毎回ページ作成に定型のファイルを作成しています。そこで、指定のディレクトリでのディレクトリとファイルの作成をmasonで自動化しています。そちらをサンプルとして記述します。

概要

Masonを実行するには、以下のステップをとります。

  • OSにMason をインストールする
  • プロジェクトにMasonを有効にする
  • テンプレートを作る
  • テンプレートを登録する
  • テンプレートからコードを生成する

システムにMason をインストールする

Masonをシステムにインストールします。

dart pub global activate mason_cli

また、Macだと以下でインストールできました。

brew tap felangel/mason
brew install mason

Windows 11の環境では「C:\Users\ [user_name] \AppData\Roaming\Pub\Cache\bin\mason.bat」または「C:\Users\ [user_name] \AppData\Local\Pub\Cache\bin\mason.bat」にインストールされました([user_name]は適時変更)。環境変数でパスを通すか、実施時にフルパスで指定してください。

プロジェクトにMasonを有効にする

Flutterのプロジェクト直下で以下を実施します。

mason init

すると、プロジェクト直下に「.mason」ディレクトリが作成されます。mason.yamlという設定ファイルができます。

テンプレートを作る

まず、テンプレートの雛形を作成します。以下のコマンドを実行しましょう。そうすると、mvvmというテンプレートが作成されます。このテンプレートのことをMasonではbricsと呼びます。
この例では、mvvmというbricsを作成します。テンプレート名を変更する場合は、そこを変更してください。Flutterプロジェクトで「lib/pages」以下にページごとにディレクトリを作成し、その下にページ用のファイルが作成されるようにします。

mason new mvvm
mason new -o .mason/templates mvvm

-o で出力するディレクトリを設定します。設定しないと、実施ディレクトリに作成されます。実施すると、以下のようにファイルが作成されます。

✓ Created new brick: mvvm (0.1s)
✓ Generated 5 file(s):
  [project_root]/.mason/templates\mvvm/brick.yaml (new)
  [project_root]/.mason/templates\mvvm/README.md (new)
  [project_root]/.mason/templates\mvvm/CHANGELOG.md (new)
  [project_root]/.mason/templates\mvvm/LICENSE (new)
  [project_root]/.mason/templates\mvvm/__brick__/HELLO.md (new)
  • brick.yaml
    このファイルを編集していきます。
    注目するべきは varsです。masonを実行すると、vars内のpromptを質問してきて、その結果がnameという変数に設定されます。
name: mvvm
description: A new brick created with the Mason CLI.
version: 0.1.0+1
environment:
  mason: ">=0.1.0-dev.26 <0.1.0"
vars:
  name:
    type: string
    description: Your name
    default: Dash
    prompt: What is your name?

上記のファイルを以下のように修正します。そうすると、実行時に入力された値が「page_name」に設定されます。複数の値を入力することも可能ですので、そのときはコピペして新しい変数を定義しましょう。

-  name:
+  page_name:
    type: string
-    description: Your name
+    description: 作成するページの名前
-    default: Dash
+    default: test_page
-    prompt: What is your name?
+    prompt: 作成するページの名前を入力してください(末尾はpage推奨)

ファイルを以下のように作成します。冗談かと思われますが「{{page_name}}」というディレクトリ名と「{{page_name}.dart}」というファイル名で、「{{ }}」を含めて名前に設定します。

mvvm
└─__brick__
    └─lib
        └─ui
            └─pages
                └─{{page_name}}
                      ─{{page_name}}.dart
                      └─{{page_name}}_vm.dart
  • {{page_name}}.dart
    しつこいようですが、上記のような名前のファイルを作成します。(箇条書きの点は不要)
import 'package:flutter/material.dart';
import '{{page_name.snakeCase()}}_vm.dart';
class {{page_name.pascalCase()}} extends StatefulWidget {
  const {{page_name.pascalCase()}}({Key? key}) : super(key: key);
  static const String path = '/{{page_name.camelCase()}}';
  @override
  State<{{page_name.pascalCase()}}Page> createState() => _{{page_name.pascalCase()}}State();
}
class _{{page_name.pascalCase()}}State extends State<{{page_name.pascalCase()}}> {
  final {{page_name.pascalCase()}}Vm _vm = {{page_name.pascalCase()}}Vm();
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
  • {{page_name}}_vm.dart
    しつこいようですが、以下略。
import 'package:flutter/material.dart';
class {{page_name.pascalCase()}}Vm {
}

テンプレートを登録する

以下のようにすると、現在使用しているプロジェクトに指定のbricksを登録します。

mason add mvvm
mason add mvvm --path .mason\templates\mvvm

以下のようにすると、システム全体にbricksを登録します。そのため、別のプロジェクトでも登録したbricksを使用することができます。

mason add -g mvvm

テンプレートからコードを生成する

bricksから実際にコードを生成する場合は、以下のようにmakeを実行します。
実行すると、テンプレートに登録した質問が開始され、その入力に基づいてソースが生成されます。

mason make mvvm

生成するファイルがすでに合った場合は、上書きするか確認されます。

テンプレートを未登録にする

登録済みのbricksを未登録にしたい場合は、以下のようにremoveを実行します。

mason remove mvvm

登録済みのテンプレートを見る

登録済みのテンプレートを見たい場合は、listを実行します。取得元が分かります。

mason list

Masonのバージョンアップ

Mason自体のバージョンを上げたい場合は、updateを実行します。

mason update

登録しているテンプレートのアップデート

登録したbricksのバージョンを上げたい場合は、upgradeを実行します。

 mason upgrade

使用できる関数

テンプレート作成中に「page_name.pascalCase()」というように使用できる関数があります。関数と結果をまとめておきます。

関数名 形式
camelCase() helloWorld
pascalCase() HelloWorld
snakeCase() hello_world
constantCase() HELLO_WORLD
dotCase() hello.world
lowerCase() hello world
mustacheCase() {{ Hello World }}
paramCase() hello-world
pathCase() hello/world
sentenceCase() Hello world
titleCase() Hello World
upperCase() HELLO WORLD

まとめ

とうことで、Masonの使用方法をまとめました。最初のテンプレート作成はちょっと手間ですが、一度作成すれば面倒くさい定例作業をしなくてすむようになりますね。

参考