0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[Flutter 開発を効率化] 自分専用フォルダ構成テンプレート”を自動生成

Posted at

🚀 Flutter 開発を爆速化する:

mason で“自分専用フォルダ構成テンプレート”を自動生成する方法

(MVP → 大規模アプリまで使える完全版)

Flutter で新しいアプリを作るたびに

  • 同じフォルダ作るの面倒
  • 構成が毎回バラバラ
  • 大きいアプリになると管理が崩壊する

と悩んでいませんか?

そんな問題を 一撃で解決するのが
テンプレート自動生成ツール「mason」 です。

この記事では、あなたのアプリに最適なフォルダ構成を
毎回 “自動生成” できるテンプレート(brick)を作るところまで
丁寧に解説します。

この記事を読み終える頃には…

flutter create my_app
cd my_app
mason make my_flutter_skeleton

これだけで:

lib/app/
lib/core/
lib/config/
lib/services/
lib/features/auth/
lib/features/timer/
lib/features/tasks/
lib/features/profile/

が "自動で生成" されるようになります。


📌 この記事で作るテンプレートの完成イメージ

lib/
  app/
    routes.dart
    theme.dart

  core/
    utils/
    widgets/
    constants/

  config/
    env.dart

  services/
    firebase_service.dart

  features/
    auth/
      data/
      domain/
      presentation/
    timer/
      data/
      domain/
      presentation/
    tasks/
      data/
      domain/
      presentation/
    profile/
      data/
      domain/
      presentation/

Flutter × Firebase の中規模〜大規模アプリがそのまま作れる構成です。


✅ Step 1. mason をインストールする

まずは CLI を入れます。

dart pub global activate mason_cli

バージョン確認:

mason --version

✅ Step 2. 新しい brick(テンプレート)を作成する

自分のテンプレートの“入れ物”を作ります。

mason new my_flutter_skeleton

これで次のような構造ができます:

my_flutter_skeleton/
  bricks/
    my_flutter_skeleton/
      brick.yaml
      __brick__/
        HELLO.md(最初はこれしかない)

✅ Step 3. テンプレ(brick)にフォルダ構成を入れる

テンプレートの中で 必ず編集する場所は __brick__/ の中だけ。

例:

cd my_flutter_skeleton/bricks/my_flutter_skeleton/__brick__

ここに lib/ フォルダを作り、構成を配置します。

── フォルダ一括作成コマンド(コピペOK)

mkdir -p lib/app
mkdir -p lib/core/{utils,widgets,constants}
mkdir -p lib/config
mkdir -p lib/services
mkdir -p lib/features/{auth,timer,tasks,profile}/{data,domain,presentation}

❗重要:mason は「空フォルダを生成しない」

mason の仕様:

  • 中に1つもファイルが無いフォルダは生成しない
  • フォルダだけ作ってもスキップされてしまう

つまり、何も入れないと生成されず HELLO.md だけ出る


✅ Step 4. 各フォルダにダミーファイルを入れる(必須)

空フォルダでも生成させるために
.gitkeep を全フォルダに自動で入れます。

cd my_flutter_skeleton/bricks/my_flutter_skeleton/__brick__
find lib -type d -exec touch {}/.gitkeep \;

これで全フォルダが “空じゃない” ものとして扱われる。


🔥 Step 5. Flutter プロジェクト側を準備する

テンプレを使いたい Flutter アプリ側で:

mason init

これで mason.yaml が生成される。


🔥 Step 6. brick を Flutter プロジェクトに登録する

Flutter アプリの直下で:

mason add my_flutter_skeleton --path ../my_flutter_skeleton/bricks/my_flutter_skeleton

../my_flutter_skeleton/... はあなたの PC に合わせて変更)

登録されると mason.yaml がこうなる:

bricks:
  my_flutter_skeleton:
    path: ../my_flutter_skeleton/bricks/my_flutter_skeleton

🚀 Step 7. テンプレートを生成する

Flutter アプリ内で:

mason make my_flutter_skeleton

成功すればフォルダ構成が一気に生成される!

既存のファイルに上書きしたいときは:

mason make my_flutter_skeleton --on-conflict overwrite

🎉 完成!アプリ新規作成 → テンプレ適用の最短ルート

これで今後は:

flutter create my_app
cd my_app
mason init
mason add my_flutter_skeleton --path ../my_flutter_skeleton/bricks/my_flutter_skeleton
mason make my_flutter_skeleton

毎回同じ最強構成のアプリが自動生成される。


💡応用編(さらに便利にしたい人向け)

✔ Feature 自動生成テンプレも作れる

例:

mason new feature
mason make feature --name timer

✔ GitHub にテンプレを置けばチームでも共有可能

mason add my_flutter_skeleton --git-url https://github.com/you/skeleton

✔ 初期ファイル(routes.dart など)を中に含めることも可能

→ より実戦的になる


🏁 まとめ

mason を使えば、Flutter 開発はこう変わる:

  • 新規アプリ作成の手間がゼロ
  • 毎回同じ構成で統一できる
  • 大規模化しても壊れにくい
  • チーム開発や複数プロジェクトに最適

今後あなたが作る MoveFive / MyFave / GChat など全アプリで
完全に同じ開発基盤を使えるようになったので、開発スピードが早くなります!

了解!
記事の最後に入れる 「あなたの作ったテンプレート(GitHub版)をそのまま使う方法」 を、
めちゃわかりやすく & コピペだけで動く形でまとめたよ。

Markdown 形式で、そのまま記事の末尾に貼れるように仕上げてる。


📦【補足】私(penginfly)が作ったテンプレートをそのまま使う方法

私自身が作った Flutter スケルトンテンプレートは
GitHub に公開されているので、これを利用する方法もあります!!

👇 テンプレートの GitHub
https://github.com/penginfly/my_flutter_skeleton


✅ 1. Flutter プロジェクトを作る

flutter create my_app
cd my_app

✅ 2. mason を初期化する

mason init

mason.yaml が生成される。


✅ 3. GitHub から brick を追加する(あなた版)

私が作ったテンプレートを GitHub から直接登録します:

mason add my_flutter_skeleton --git-url https://github.com/penginfly/my_flutter_skeleton

成功すると mason.yaml にこう書き込まれます👇

bricks:
  my_flutter_skeleton:
    git:
      url: https://github.com/penginfly/my_flutter_skeleton

🚀 4. テンプレートを実行してフォルダ構成を自動生成

mason make my_flutter_skeleton

これだけで…

lib/app/
lib/core/
lib/config/
lib/services/
lib/features/auth/
lib/features/home/
lib/features/profile/

など、あなたの GitHub に置いてあるテンプレそのままの構成が
ズバッと一瞬で展開されます✨


🔄(任意)既存ファイルに上書きしたいとき

mason make my_flutter_skeleton --on-conflict overwrite

🧩 追加Tips:ローカルへ Pull & 編集したい場合

「GitHub のテンプレをローカルで編集したい」
という場合は以下:

git clone https://github.com/penginfly/my_flutter_skeleton
cd my_flutter_skeleton

修正後、GitHub に push すれば
他のプロジェクトでも常に最新版が使えるようになります。


🎉 完成

GitHub 版のテンプレートは、他の開発者も以下だけで利用できます👇

mason add my_flutter_skeleton --git-url https://github.com/penginfly/my_flutter_skeleton
mason make my_flutter_skeleton

フォルダ構成テンプレが、即時に展開される!


0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?