【Flutter】masonを利用した自動コード生成について

2022 6/07

2022.05.09 2022.06.07

こんにちは、株式会社Pentagonでアプリ開発をしている石渡港です。

今回はmasonを利用した自動コード生成についてまとめました。
その結果、masonを利用したコード生成の利用方法や注意点がわかりました。

【この記事を読むメリット】

masonを利用する際の注意点がわかる
masonの利用方法がわかる

【こんな方に参考にしていただきたい】

自社プロジェクトでFlutterテンプレートを更に便利に利用したい人

【調査の動機】
masonというライブラリを利用して、テンプレートをうまく使い回せるように調査を行いました。

【調査結果】

masonをインストールする際に注意点があることがわかりました。
masonの利用方法について理解できました。

masonとは

mason generatorを利用したbrickと呼ばれる再利用可能なテンプレートを作成して、それらを利用することができるツールです。
masonで用意しているサンプルを利用して理解を進める場合、最新のREADMEを利用することをおすすめします。

masonをインストールする際の注意点について

masonをインストールする方法は3通りあります。

インストール方法	メリット	デメリット
`dart pub global activate mason_cli`	インストールされているdartのバージョンに合わせられる	最新版のmasonを利用できない
`flutter pub global activate mason_cli`	インストールされているflutterのバージョンに合わせられる	最新版のmasonを利用できない
`brew tap felangel/mason　&& brew install mason`	最新のmasonを利用できる	今後flutterのバージョンに合わせられない可能性がある

それぞれのインストール方法に利点はありますが、masonの最新バージョンかつ最新のFlutterバージョンを利用する場合はbrew installをおすすめします。

masonの利用方法について

masonは下記のような利用方法があります。

用意されているbrickを利用する方法

pubspec.yamlに似たような形で、mason.yamlを下記のような形で取得できます。

bricks:
  hello: any

こちらを利用すると、publicに登録しているhelloという名前のbrickを利用できます。

https://github.com/felangel/mason/tree/master/bricks/hello
ソースは上記をご参照ください。

HELLO.mdというファイルを作成してコマンドライン上で対話して入力したnameの情報をファイル内の{{name}}へ反映します。

Hello {{name}}! 👋

brickを自作して利用する方法

・基本的な利用方法

mason new を実行する。
＜BRICK_NAME＞のディレクトリ配下のbrick.yamlを設定する。
利用する側のmason.yamlを下記のように設定する。
```
bricks:
pentagon:
path:  <BRICK_NAME>
```
mason getを実行後、mason make を実行する。
＜BRICK_NAME＞で設定した内容が表示する。

・変数の埋め込み方法
brick.yaml内のvarsに変数を定義します。
typeはstring、number、booleanなどが定義できます。

brick.yaml

vars:
  file_name:
    type: string
    description: Name of the current user
    default: Dash
    prompt: What is your name?
  age:
    type: number
    description: Age of the current user
    default: 42
    prompt: How old are you?
  isDeveloper:
    type: boolean
    description: If the current user is a developer
    default: false
    prompt: Are you a developer?

brick.yamlで定義した変数は、スクリーンショットのようにファイル名{{file_name.snackCase()}}、ディレクトリ名{{file_name.snackCase()}}、ファイルの中身{{file_name}}のように設定することでfile_nameとして入力した値が挿入されます。

また、booleanを条件式として利用することが可能です。
Built-in Lambdasが用意されており、さまざまなケースに対応できます。

次の行は、ディレクトリ名、ファイル名の設定方法の参考です。
{{file_name.snakeCase()}}/{{file_name.snakeCase()}}.dart

ファイルの中身は、次のソースコードのように設定できます。booleanは#、/、^を利用して設定します。

Hello, my name is {{file_name}}! I am {{age}} years old and I {{#isDeveloper}}am{{/isDeveloper}}{{^isDeveloper}}am not{{/isDeveloper}} a developer.

下記に生成方法のgifを載せます。

このように、brick内のファイルが生成されます。masonを用いることでプロジェクト名、ファイル名、クラス名なども一括で変更することが可能です。

まとめ

masonは注意点を除けば、とても利用しやすいツールであることがわかりました。
弊社ではmasonを利用して、テンプレートプロジェクトを作成できるようにbrickを作ってみようと思います。