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

# はじめに

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

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

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

## hukusuke1007 / [flutter_app_template](https://github.com/hukusuke1007/flutter_app_template) について

https://github.com/hukusuke1007/flutter_app_template

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

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

## 前提

- **hukusuke1007 / [flutter_app_template](https://github.com/hukusuke1007/flutter_app_template)** の導入（`git clone` から `flutter run` まで）が完了していること

https://qiita.com/ryamate/items/f50aa769dbc34a39fa64

## 目次

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

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

## Mason とは

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

https://pub.dev/packages/mason_cli

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

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

```yaml:確認：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 ディレクトリを作成する方法を確認します。

https://github.com/hukusuke1007/flutter_app_template/tree/main/feature_first

https://github.com/never-inc/mason

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

## 1. mason_cli のインストール

まずは [**mason_cli**](https://pub.dev/packages/mason_cli) をインストールします。

```bash:実行コマンド
# 🎯 Activate from https://pub.dev
dart pub global activate mason_cli
```

https://pub.dev/packages/mason_cli

```bash:実行結果
# 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 を取得します。

```bash:実行コマンド
mason get
```

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


```bash:実行結果
# 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)

```

```json:確認：.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 を使用して、新しいディレクトリを生成します。

```bash:実行コマンド
mason make feature
```

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

```bash:実行結果
# 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の名前を入力するプロンプトが表示され、それに従ってディレクトリやファイルが作成されます。

```bash:作成されたディレクトリ
...
├── lib
...
├── search
│   ├── entities
│   ├── pages
│   │   └── widgets
│   ├── repositories
│   └── use_cases
...
```

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

```bash:実行コマンド
mv new_feature lib/features/
```

```bash:実行時ログ
# r_yamate @ mbp in ~/development/picture_book_log on git:main x [9:41:10] 
$ mv search lib/features/ 
```

# おわりに

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

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

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

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

## 参考

https://pub.dev/packages/mason_cli

https://github.com/hukusuke1007/flutter_app_template/tree/main/feature_first

https://github.com/never-inc/mason

https://flutter.salon/plugin/mason/

## やり残し

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

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