Masonでのディレクトリの自動生成を試してみる。[Flutter]

はじめに

Mason は、Flutter 開発においてコードの生成を効率化するツールです。私はこれまで利用したことがないので、簡単に使い方を確認します。

Flutter アプリテンプレート hukusuke1007 / flutter_app_template で Mason が用いられており、README に準じて開発を進めたいと考えたことがきっかけです。

※ Mason で自動生成される中身の作成は今回しません

hukusuke1007 / flutter_app_template について

flutter_app_template は初めて使ってみているのですが、Flutter + Firebase アプリのスターターキットになっており、サンプル機能がとても充実しています。

個人開発時に利用しようと思っています。

前提

• hukusuke1007 / flutter_app_template の導入（git clone から flutter run まで）が完了していること

目次

Mason を利用した Feature ディレクトリ作成

1. mason_cli のインストール
2. mason getで、Mason に登録されている Brick 取得
3. mason makeで、ディレクトリ作成

Mason とは

Mason は、Flutter 開発においてコードの生成を効率化するツールです。

Brick と呼ばれるテンプレートを使って、決まった形式のディレクトリやファイルを自動生成できます。

hukusuke1007 / flutter_app_template では、以下の mason.yaml (Brick からコードなどを取得するためのファイル)が設置されています。

確認：mason.yaml

bricks:
  project_template:
    git:
      url: https://github.com/never-inc/mason.git
      path: bricks/project_template
  feature:
    git:
      url: https://github.com/never-inc/mason.git
      path: bricks/feature

ちなみに mason は 石工、煉瓦職人、brick は レンガ 🧱 のことだそうです。

Mason を利用した Feature ディレクトリ作成

Mason を使って Feature ディレクトリを作成する方法を確認します。

README 記載を参考に進めます。pub.dev の mason_cli のページも説明が充実しているため、そちらも参考にします。

1. mason_cli のインストール

まずは mason_cli をインストールします。

実行コマンド

# 🎯 Activate from https://pub.dev
dart pub global activate mason_cli

実行結果

# r_yamate @ mbp in ~/development/picture_book_log on git:main x [23:54:02]
$ mason --version
zsh: command not found: mason

# r_yamate @ mbp in ~/development/picture_book_log on git:main x [0:46:25]
$ dart pub global activate mason_cli
+ archive 3.6.1dencies... (3.1s)
+ args 2.5.0
+ async 2.11.0
+ checked_yaml 2.0.3
+ cli_completion 0.5.0
+ cli_util 0.4.1
+ collection 1.18.0 (1.19.0 available)
+ convert 3.1.1
+ crypto 3.0.3
+ equatable 2.0.5
+ ffi 2.1.2
+ file 7.0.0
+ http 1.2.1
+ http_parser 4.0.2 (4.1.0 available)
+ io 1.0.4
+ json_annotation 4.9.0
+ mason 0.1.0-dev.57
+ mason_api 0.1.0-dev.11
+ mason_cli 0.1.0-dev.55
+ mason_logger 0.2.15
+ meta 1.15.0
+ mustache_template 2.0.0
+ path 1.9.0
+ platform 3.1.5
+ pool 1.5.1
+ process 5.0.2
+ pub_semver 2.1.4
+ pub_updater 0.4.0
+ source_span 1.10.0
+ stack_trace 1.11.1
+ string_scanner 1.2.0
+ term_glyph 1.2.1
+ typed_data 1.3.2
+ watcher 1.1.0
+ web 0.5.1
+ win32 5.5.0 (5.5.1 available)
+ yaml 3.1.2
Building package executables... (1:37.1s)
Built mason_cli:mason.
Installed executable mason.
Activated mason_cli 0.1.0-dev.55.

# r_yamate @ mbp in ~/development/picture_book_log on git:main x [9:23:52]
$ mason --version
0.1.0-dev.55

2. mason getで、Mason に登録されている Brick 取得

続いて、プロジェクトで使用する Brick を取得します。

実行コマンド

mason get

このコマンドを実行すると、mason.yaml ファイルに記載されている Brick の依存関係が解決され、必要な Brick（Mason で使用するテンプレート）がダウンロードされます。

実行結果

# r_yamate @ mbp in ~/development/picture_book_log on git:main x [1:10:26] 
$ mason get

Completion files installed. To enable completion, run the following command in your shell:
source /Users/r_yamate/.zshrc

✓ Got bricks (1.7s)

確認：.mason/bricks.json

{
  "feature": "/Users/r_yamate/.mason-cache/git/mason_aHR0cHM6Ly9naXRodWIuY29tL25ldmVyLWluYy9tYXNvbi5naXQ=_99c37e2c9bc2f767e3e43d4467f379839427a1f7/bricks/feature",
  "project_template": "/Users/r_yamate/.mason-cache/git/mason_aHR0cHM6Ly9naXRodWIuY29tL25ldmVyLWluYy9tYXNvbi5naXQ=_99c37e2c9bc2f767e3e43d4467f379839427a1f7/bricks/project_template"
}

3. mason makeで、ディレクトリ作成

次に、取得した Brick を使用して、新しいディレクトリを生成します。

実行コマンド

mason make feature

このコマンドを実行すると、feature という名前の Brick を基にテンプレートが生成されます。

実行結果

# r_yamate @ mbp in ~/development/picture_book_log on git:main x [9:36:36] C:64
$ mason make feature
? What is feature name? search
✓ Generated 5 files. (0.1s)
  created search/repositories/.gitkeep
  created search/use_cases/.gitkeep
  created search/pages/.gitkeep
  created search/pages/widgets/.gitkeep
  created search/entities/.gitkeep

通常、実行時に featureの名前を入力するプロンプトが表示され、それに従ってディレクトリやファイルが作成されます。

作成されたディレクトリ

...
├── lib
...
├── search
│   ├── entities
│   ├── pages
│   │   └── widgets
│   ├── repositories
│   └── use_cases
...

生成されたディレクトリやファイルはデフォルトの場所に作成されますので、これをプロジェクトの適切な場所に移動させます。

実行コマンド

mv new_feature lib/features/

実行時ログ

# r_yamate @ mbp in ~/development/picture_book_log on git:main x [9:41:10] 
$ mv search lib/features/ 

おわりに

Flutter 開発においてコードの生成を効率化するツール Mason の使い方を確認しました。

感想としては、Flutter アプリテンプレートに準備されているのは空のディレクトリを作成する Brick で便利さの実感は得られませんでしたが、使い方の確認はざっくりできたので目的は果たせました。

どのようなテンプレート（Brick）を作成すればいいかなどは、開発が進んで必要に応じて考えていければと思います。

ありがとうございました。

参考

やり残し

Flutter アプリテンプレートに関連して、以下を今後やっていこうと思います。

• テストの方法など、README に書いてある開発方法の確認
• プラグインの確認。プラグインやコードがあるかもしれませんが、不要と分かった段階で削除しながら、開発を進めていこうと思います
• 参考文献の通読