【Flutter】学習・開発効率UP！雛形からサンプル用プロジェクト構築ガイド
はじめに
私はよく学習のために小さなサンプルプロジェクトを作ります。
本当に簡単な内容のサンプルであれば一からサクッと作ってしまいますが、ある程度複雑な内容のものだと構築するのに色々と手間がかかります。
自分としてはある程度実務や実際の開発状況を再現した設定、パッケージ、アーキテクチャでサンプルを作りたいと考えています。
その場合にいちいちゼロから作ると手間がかかってしょうがありません。
それがたとえ、ベースアプリやメモなどからコピペしてくるのでさえも面倒です。
そこで私が考えたのは
「雛形となるアプリ作ってGitHubにアップしておき、サンプルを作る際にはクローンして少し手を加えて別プロジェクトとして扱う」
というものです。
今回はその構築方法をご紹介しようと思います。
記事の対象者
- ちょっと複雑な内容のサンプルプロジェクトをある程度簡単に構築したい方
- GitとGitHubをある程度使いこなせる方
記事を執筆時点での筆者の環境
[✓] Flutter (Channel stable, 3.27.1, on macOS 15.1 24B2082 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.2)
[✓] VS Code (version 1.96.2)
雛形となるプロジェクト
現時点では"Hello world!"しか出てきません。
ソースコード
1. サンプルプロジェクトの作成
まずはサンプルプロジェクトの雛形を作成し、GitHubにプッシュしておきましょう。
この章では私が作った雛形プロジェクトの概要を簡単にお話しします。
まず以下を設定、作成します。
- .vscode/settings.json
- .gitignore
- pubspec.yaml
- analysis_options.yaml
- lib/内のディレクトリと基本ファイルの作成
- assets
.vscode/settings.json
ここはお好みもあるとは思いますので、各自設定してください。
ユーザーセッティングでもいいかとは思ったのですが、ワークスペースセッティングにしておくと
いざ、どんな設定にしていたかも思い出せるので自分のテンプレ目的でも残しておきます。
今回の本筋ではないので詳細の説明は割愛します。
なお、この設定には以下の記事で紹介しているコメントを見やすくするための拡張機能の設定が含まれています。
よろしければご覧ください。
.gitignore
地味に毎回描くのが面倒なので作っておきます。
ここは賛否が分かれるところですが、私は自動生成系のコードは監視対象外にしています。
その他Firebaseやfastlane関連は今回全く関係ありませんが、テンプレートとして意味も込めて書いています。
pubspec.yaml
自分にとってほぼスタメン級で必ず使いそうなものは元からインストールしておきます。
- riverpodとhooks関連
- freezedとjson関連
- logger
- gap
- very_good_analysis
- derry
- rename_app
- utility_widgets // 自作で作ったwidgetの雛形群パッケージ
derryはスクリプトを登録できる便利なパッケージです。
以前以下の記事でも紹介しており、今回もいくつか登録しています。
ちょっとした初期設定が必要ですので、詳細は記事内の 「2-derryを使って効率よく出力する」 をご覧ください。
また今回はrename_appというパッケージを使って後からプロジェクト名を変更するために入れています。
こちらはすでにderryで登録したスクリプト内に組み込んであります。詳細は後述します。
analysis_options.yaml
主にリントのルールを設定しています。
lib/内のディレクトリと基本ファイルの作成
私は基本的に Andrea Bizzotto さんが提唱する Riverpod Architecture を参考に実務でもプライベートでもアプリを作成しています。
ディレクトリやベースのファイル、main.appで行う基本的なローカライズやthemeの設定をすでに書いています。
ここが一番の手間なので、ディレクトリ構成と土台部分はしっかりと作りました。
ディレクトリ構造
lib
├── applications
│ └── services
├── core
│ ├── constants
│ │ └── constants.dart
│ ├── log
│ │ └── logger.dart
│ └── router
├── data
│ ├── repositories
│ └── sources
│ ├── local
│ └── remote
├── domains
│ ├── entities
│ └── models
├── main
│ ├── app_startup
│ │ ├── consumer.dart
│ │ ├── provider.dart
│ │ └── provider.g.dart
│ ├── main_app
│ │ ├── error.dart
│ │ ├── loading.dart
│ │ └── main_app.dart
│ └── main.dart
└── presentations
├── screens
│ └── home
│ ├── screen.dart
│ ├── view_model.dart
│ └── view_model.g.dart
├── shared
└── theme
└── theme.dart
assets
AIに生成してもらった画像をサンプルとして適当に入れてあります。
（AI便利👍）
2. 雛形プロジェクトから別プロジェクトとして作り替えるまで
1. GitHubからリポジトリーのSSHを入手してクローンしてくる
まずはブラウザでGitHubの該当するリポジトリを開き、クローン用のSSHをコピーします
次にターミナル、またはVScodeでターミナルを開き、リポジトリを保存したいディレクトリまで移動します
cd dev
クローンコマンドを実行してリポジトリをクローンします
git clone <ssh>
私のリポジトリでよければ以下を入力します。
git clone [email protected]:HaruhikoMotokawa/base_sample.git
ディレクトリをお好きな名前に変更します
mv <クローンしたフォルダ名> <新しいプロジェクト名>
今回はexample_app_abcに変更します。
mv base_sample example_app_abc
2. FlutterSDKの設定とderryの有効化
クローンしてきたプロジェクトに移動します
cd example_app_abc
fvmコマンドでバージョンを指定します
fvm use 3.27.1
ここでVScodeのターミナルで作業していた場合は再起動するように言われますので、コマンドパレットを開いてリロードを行いましょう。
（⌘ + shift + P）-> Developer: Reload Windowを入力してエンター
VScodeが開き直した時にターミナルに黄色のマークが出てくるので、ターミナルを破棄して再度新しいターミナルを開いてください。
プロジェクトを開いてderryコマンドを有効化します
VScodeでプロジェクトを開きます。
この時点でいくつかエラーが出ていますが、後で解消されますのでご安心ください。
自動生成コードがないことによるエラーです。
次にターミナルで以下のコマンドを叩いてderryを有効化します。
derryはプロジェクト毎に有効化する必要があります。
dart pub global activate derry
3. プロジェクト名の変更と初期化
Constants.appNameとスクリプト内のアプリ名を任意の名前に変えておく
元々は検索で引っかかりやすいようにNewAppNameで登録されています。
スクリーンショットを参考にNewAppNameで検索し、任意の名前に置き換えてください。
検索時点では３件しか出ないはずです。
ダイアログが出てきますので、置換を選択します。
derry init_app で色々と初期化する
ここは名前を変えるどうこう関係なく実行してください。
derry init_app
ここでは以下の内容を順番に実行しています。
- gitの履歴を削除
- gitを初期化
- build_runnerを実行して自動生成コードを作成
- rename_appパッケージによるプロジェクト名を変更するスクリプトを実行（デフォルト名はNewAppName）
rename_appの実行による変更内容は以下です。
変更ファイルたちです。
一旦動作確認してみる
ここまでくるとビルドが通るようになるので動作確認してみましょう。
試しに３台でビルドすると以下のようになります。
左から
- Android
- iOS
- MacOS
この時点ではMacOSはプロジェクト名には反映されていません。
モバイル関連はホーム画面に行ってみるとアプリアイコンしたのアプリ名が変更されています。
左がAndroid、右がiOS
4. yamlのプロジェクト名変更とMacOSのプロジェクト名変更の対応 【任意】
上記までで基本的にはほぼ完了ですが、次からはもうちょっと整えたい方、macosもちゃんと出したい方向けです。
yamlのプロジェクト名の変更
importのパス名が変更前のbase_sample/...になってしまっているので変更します。
まずはpubspec.yamlのnameを変更して保存します。変更するといくつかエラーが出ますが一旦置いておきます。
次に先ほども使ったVScodeの検索と置換で一気に変えていきます。
ただし今回は検索対象のフォルダを./lib配下に限定します。
もしもスクリーンショット⑤の含めるフォルダの項目が出ていない人は
④の横列の３点リーダーをタップすると出てきます。
全部で１３件が検索に引っかかるはずです。
⑥の決定ボタンで置換を実行しましょう。
そうすると先ほど出ていたエラーも消え得るはずです。
MacOSのプロジェクト名の変更対応
AppInfo.xcconfigのPRODUCT_NAME = の後に続けて変更したい任意の名称に変更して保存します。
ファイルパスはmacos/Runner/Configs/AppInfo.xcconfigです。
AppInfo.xcconfigを書き換えると自動的にproject.pbxprojも書き変わります。
これでビルドするとウィンドー枠のアプリ名が変更されたアプリ名に変わります。
5. コミット、プッシュ
お疲れ様でした。
あとはコミットしてプッシュすれば雛形プロジェクトから別プロジェクトとして取り扱うことができます！
終わりに
derryやVScodeの置換機能、rename_appパッケージを活用して雛形アプリをベースにサンプルアプリを作成する手順を紹介しました。
正直、ものすごく簡潔に作れるようになったわけではありませんね😅
しかし、このように雛形を作って活用すればより実務に近い形や自分の普段使い慣れた環境でサンプル作成をすることができます。
ぜひ皆さんも試してみてください。
また、もっと簡単にできる方法やパッケージをご存知でしたらコメントにて教えていただけると嬉しいです。
この記事が誰かのお役に立てれば幸いです🙏
Discussion