Melos を利用したデザインシステム構築のことはじめ

この記事は YUMEMI Flutter Advent Calendar 2023 の 17 日目の記事です。

はじめに

こんにちは、たっつー ( @tatsutakein ) です。

ネイティブアプリ開発ではよく採用されるマルチモジュールですが、 Flutter 開発では意外とマルチパッケージの採用事例を聞かない気がするので、私の事例を紹介できればと思います。

※ あくまでも個人の意見です。 Android アプリ開発でのマルチモジュールと異なり、パフォーマンス面でのアプローチにはなり得ない点にはご注意ください。

Melos

マルチパッケージは Dart のパッケージとして標準で利用できますが、 Melos を利用すると便利な機能があるので私は基本的に Melos を採用しています。
もしよければ以前 LT で発表した際の資料もご確認いただけると幸いです。

3.2.0 では FEAT: support syncing common dependency versions が追加され、外部パッケージのバージョン管理が楽になりました 🎉

マルチパッケージの構成

今回は以下のパッケージ構成を想定しています。

.
├── apps
│   ├── catalog
│   └── frontend
└── packages
    ├── core
    │   ├── ...
    │   ├── designsystem # 今回はこのパッケージが対象
    │   └── ...
    └── feature
        ├── ...
        └── top

packages/core/designsystem の icons ディレクトリ構成は以下の感じです。

.
├── ...
└── designsystem
    ├── assets
    └── lib
        ├── gen
        ├── l10n
        ├── src
        │   ├── components
        │   ├── ...
        │   ├── icons
        │   │   ├── hoge_icons.dart # 今回はここを対象としています
        │   │   └── index.dart
        │   └── themes
        └── core_designsystem.dart

designsystem パッケージの定義

packages/core/designsystem 側での手順を記載します。

アイコンクラスの定義

各 feature パッケージで利用するアイコンを共通で定義します。

packages/core/designsystem/lib/src/icons/hoge_icons.dart

import 'package:flutter/material.dart';

final class HogeIcons {
  const HogeIcons._();

  ...

  static const IconData favorite = Icons.favorite;

  ...
}

余談ですが, IntelliJ 系の IDE を利用していると使用するアイコンがパッと確認できていいですね。
VSCode にも同様の拡張機能はあるのでしょうか？ 👀

バレルの定義

バレルを記載します。

packages/core/designsystem/lib/src/icons/index.dart

export 'hoge_icons.dart';

パッケージとしてのエクスポート

こちらも忘れずに記載します。

packages/core/designsystem/lib/core_designsystem.dart

library core_designsystem;

...
export 'src/icons/index.dart';
...

使用例

packages/feature/top を例に記載します。

pubspec.yaml の記載

依存に core_designsystem を追加します。

packages/feature/top/pubspec.yaml

name: feature_top

...

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

  ...

+ core_designsystem:
+   path: ../../core/designsystem
...

core_designsystem で定義したアイコンを利用する

普段のライブラリのようにパッケージを import し、定義したアイコンを利用できます 🙌

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

final class FavoriteIconButton extends StatelessWidget {
  const FavoriteIconButton({super.key});

  @override
  Widget build(BuildContext context) {
    return IconButton(
      onPressed: () { /** do nothing. */ },
      icon: Icon(HogeIcons.favorite),
    );
  }
}

おわりに

いかがでしたでしょうか。マルチパッケージをうまく活用して、見通しの良いコードで開発が進められると良いですね 🙌

次は @takashimelon さんです。