🐙

masonリポジトリを作って、個人用brickを管理し、異次元のFlutter開発を検討する

2023/02/04に公開

Flutter

Dart

mason

tech

はじめに

masonパッケージを使うとbrickという単位のテンプレートをもとに、簡単にコード生成が行えます。（mason自体の説明はこの記事がおすすめです。）

今回はmason専用Githubリポジトリを使った、個人用brickの管理方法を具体的なbrickの書き方も踏まえつつ説明します。

記事の概要

mason専用Githubリポジトリを使った、個人用brickの管理方法
実践的なbrickの書き方
作成したbrickを実際に使った例

mason専用Githubリポジトリを使った、個人用brickの管理方法

brickは以下の三つの管理方法（mason.yamlでの指定方法）があるようです。

BrickHubに登録する（BrickHub指定）
専用Githubリポジトリで管理する（git指定）
Flutterプロジェクトなどと同じリポジトリで管理する（ローカルパス指定）

それぞれメリデメありますが、今回は2の「専用Githubリポジトリで管理する」方法を紹介します。
具体的には以下のようなリポジトリ（以下masonリポジトリ）を用意します。

https://github.com/K9i-0/mason

masonリポジトリにはbricksというディレクトリを作り、その中に複数のbrickを格納することにします。

管理方法の使い分け案

BrickHubに登録する（BrickHub指定）

いろんな人に使ってもらいたい汎用的なもの
BrickHub内でユニークな名前になることに注意

専用Githubリポジトリで管理する（git指定）

個人やチーム向けのもの
複数プロジェクトで使いたい場合

Flutterプロジェクトなどと同じリポジトリで管理する（ローカルパス指定）

個人やチーム向けのもの
単一プロジェクトで使いたい場合

利用側の記述方法

githubリポジトリで管理しているbrickを利用する場合はmason.yamlファイルに以下のように記述します。（featureという名前のbrickの場合です。）

URLにGithubリポジトリのURLを指定します
pathにリポジトリ内の相対pathを指定します

mason.yaml

bricks:
  feature:
    git:
      url: https://github.com/K9i-0/mason.git
      path: bricks/feature

brickのバージョン管理

brickをアップデートすることを考えるとバージョン管理がしたくなります。
今回は各brickのバージョンはgit tagで管理することにします。複数のbrickのバージョンをそれぞれ管理することを踏まえて、tag名をbrick名+バージョン名含めた以下の形式にします。

feature-v0.1.0
- 機能名: feature
- バージョン: 0.1.0

masonではrefを使ってtagを指定できるので、先ほどのものにrefを追記します。

mason.yaml

bricks:
  feature:
    git:
      url: https://github.com/K9i-0/mason.git
      path: bricks/feature
      ref: feature-v0.1.0

実践的なbrickの書き方

それではbrickの書き方です。

お題

今回はフィーチャーファーストなディレクトリ構成向けに、以下の条件を満たすコードを生成するbrickを作ります。

lib下にfeaturesディレクトがある
featuresディレクトリ下には機能名のディレクトリ(画像ではhoge)がある
機能はdata、model、uiの三つのディレクトリに分かれている
初期状態でhoge_repository.dart、hoge_state.dart、hoge_notifier.dart、hoge_screen.dartファイルを生成する

lib
├── features
│   └── hoge
│       ├── data
│       │   └── hoge_repository.dart
│       ├── model
│       │   └── hoge_state.dart
│       └── ui
│           ├── hoge_notifier.dart
│           └── hoge_screen.dart

生成ファイルの詳細

各ファイルの内容は以下

hoge_repository.dart

import 'package:hooks_riverpod/hooks_riverpod.dart';

final hogeRepositoryProvider = Provider<HogeRepository>(
  (ref) {
    return HogeRepository(ref);
  },
);

class HogeRepository {
  final Ref _ref;
  const HogeRepository(this._ref);
}

hoge_state.dart

// ignore: unused_import, directives_ordering
import 'package:flutter/foundation.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'hoge_state.freezed.dart';

@freezed
class HogeState with _$HogeState {
  const factory HogeState({
    required String id,
  }) = _HogeState;
}

hoge_notifier.dart

import 'package:hooks_riverpod/hooks_riverpod.dart';

import '../model/hoge_state.dart';

final hogeNotifierProvider = NotifierProvider<HogeNotifier, HogeState>(
  () => HogeNotifier(),
);

class HogeNotifier extends Notifier<HogeState> {
  @override
  HogeState build() {
    return const HogeState(id: 'id');
  }
}

hoge_screen.dart

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class HogeScreen extends HookConsumerWidget {
  const HogeScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hoge'),
      ),
      body: const Center(
        child: Text('Hoge'),
      ),
    );
  }
}

brickを書く

詳細は実際にコードを見てもらうのが分かりやすいです。

ポイントは

varsで受け取ったnameをパス、ファイル名、クラス名等に使う
.snakeCaseなどを使って適切なCaseに変換する

です。

使ってみる

以下のリポジトリで、先ほど作ったbrickを使ってみました。
https://github.com/K9i-0/mason_sample

すでに説明した方法でmason.yamlを編集
mason getでbrickを取得
mason make featureでbrickを実行
機能名を聞かれるので解答
以上のステップで簡単に機能のコードが生成できました。

まとめ

個人用のbrickをリポジトリ管理する方法を説明しました。
複数のプロジェクトで同じテンプレートを使いたいとき今回の方法が便利そうです。brickは複数ファイルを生成したりできる点が便利ですね。
今回はフィーチャーファーストな構成を例にしましたが、レイヤーファーストでもpathをちゃんと書けば問題無いと思います。
mason自体の使い型は結構端折っているので、わからないことがあったら気軽にコメントください。

ファイル内に閉じたテンプレに関してはスニペットがおすすめです

masonの意味

masonは石工という意味らしいです。よく使う言葉だとフリーメイソンのメイソンですね

GitHubで編集を提案