求人メディアGreen の Flutterの構成について

f:id:atrae_tech:20210218154509p:plain

こんにちは、エンジニアの @muttsu_623 です。

最近、開発を頑張っている自分へのご褒美として念願だった『左右分離型キーボード』のMISTEL『Barocco MD770 静音赤軸』を購入しました。

Mistel BAROCCO MD770 RGB メカニカルキーボード英語配列 85キー左右分離型 CHERRY MX RGB 静音赤軸ブラック MD770-PUSPDBBT1

発売日: 2020/01/30
メディア: Personal Computers

購入してからまだ2週間くらいなのでまだ効果を実感できているわけではありませんが、肩が開かれた状態で姿勢良く開発を行うことができるため、長期的にみればいいお買い物になったかなと思います。

さて本題ですが、先日弊社の「求人サイト Green」のAndroidアプリをFlutterで作成しリリースしました。

Flutterでアプリをリリースしましたー🎉
弊社の主力事業GreenのAndroidアプリです！https://t.co/Qv6jG7cYmC

すでにリリースされているiOSアプリをFlutterに乗り換えることを考えていたり、Flutterの社内普及も考えているので、技術で会社を伸ばしていくことに興味ある方はぜひお話させてください🤗 pic.twitter.com/sWvCTGVLCL
— muttsu (@muttsu_623) February 8, 2021

Flutterのエンジニアの皆さんから想像以上の反響をいただきました。

私がFlutterの可能性に気づくことができ、ここまで着実にFlutterについてキャッチアップを行うことができたのは、私より先にFlutterコミュニティに貢献してくださった多くの方のおかげです。

ありがとうございます。

アプリをリリース後、今度は自分自身が実際にアプリをリリースした身として、実際にどういう構成で運用しているのかをアウトプットすることにより、より多くの企業がFlutterでのアプリ制作を1つの選択肢に入れられ、 Flutterの採用事例が増えていき、よりコミュニティが活発になっていくのではないかと思いこの記事を執筆することにしました。

至らない点がありましたら、Flutterコミュニティを盛り上げていくためにも、ぜひ @muttsu_623 までご連絡いただけますと幸いです。

Flutterの基本的な書き方に関しては多くの記事が出ていると思うので今回はスキップします。

実際にどのような構成で作っているかに関して記載します。

宣伝

先日、一緒に開発を行なった先輩と一緒に社内でインタビューしていただきました。

- なぜ Flutter で開発したのか？
- リリースまでに苦労したことは？
- 開発中にこだわった点は？
- 今回の開発過程で凄かった点はズバリ何？

などを開発裏話を赤裸々に語っておりますので、ご興味ある方はぜひこちらもご覧ください😊

note.com

また、私が所属している株式会社アトラエはこんな会社です。

speakerdeck.com

「求人メディアGreen」とは

株式会社アトラエで開発・運用している IT系人材に強みを持つ成功報酬型求人メディア です。

f:id:atrae_tech:20210218101956p:plain — Greenについて会社紹介資料より

f:id:atrae_tech:20210218102149p:plain — Greenについて会社説明資料より 2

詳細はこちらをご覧ください。

ディレクトリ構成

lib/ : Flutterのコードが存在しているディレクトリ
- di/ : DIを行うためのファイル
- domain/ : Flutterに依存しないピュアDartなクラス（Entity, Repository)
- infrastructure/ : HTTP通信のクラス、ローカルDBのクラス、Daoクラス
- presentation/ : View, State, State Controllerクラス
  - state_controller/ : State Controllerクラス
  - state/ : Stateクラス
  - ui/ : Viewクラス
- util/ : Utilクラス
- app_error.dart : 基本的にアプリ内で起きるエラーについては、AppError 型に変換しています。　
- result.dart : 非同期処理の結果は Result 型に変換して利用しています。

AppError, Result<T> についてはコチラにまとめましたので、ぜひご覧ください。

zenn.dev

今回のFlutterでの開発には、私以外にサーバーサイドの経験が長いエンジニア2名、Androidの経験が長いエンジニアが1名参加しました。

参加してもらうエンジニア3名がスムーズにFlutterの開発に入れるよう、Flutterに依存したモジュールとFlutterに依存していない部分がわかりやすい構成になるように心がけました。

Controller, ViewModel, Usecase ⇄(Entity, Value Onject)⇄ Repository ⇄(Entity, Value Onject)⇄ Dao

上記の流れに関しては、開発しているプロジェクトがFlutterであっても、Goであっても、Kotlin(Android)であっても共通して行われる処理となり、基本的にはFlutterに依存したコードは薄くなります。

Repository, Dao それぞれは Interface になっているため、これらを継承した実体を Injection する際はFlutterや、DIライブラリに依存したコードが存在しますが、それ以外はピュアなDartのファイルたちになります。

言語仕様は多少勉強してもらうことになりますが、それ以外は普段から慣れている構成で作っていただける状態にしています。

State Controller, State, View は Flutterに依存したファイルたちになりますが、逆にいうと基本的にはそれらのみがFlutterに依存した状態になります。

状態管理

状態管理には StateNotifier, Riverpod を利用しています。

pub.dev

アプリ内で、求人情報State, メッセージスレッドState などのように扱いたい情報を State として管理するようにしています。

State Controller というクラスは、StateNotifier を継承してつくっており、このクラスが Repository を通してデータを取得や更新を行い、 State を変更します。

また、State の変更を扱いやすくするため、 flutter_hooks というライブラリも利用しています。

pub.dev

class JobOfferPage extends StatelessWidget  {
  ...
  return Center(
    child: HookBuilder(builder: (BuildContext context) {
      final companyName = useProvider(jobOfferStateControllerProvider.state.select((value) => value.companyName));
      return Text(companyName);
    }),
  );
}

class JobOfferState {
  const JobOfferState(this.id, this.companyName);

  final int id;
  final String companyName;
  ...
}

final jobOfferStateControllerProvider = StateNotifierProvider.autoDispose.family(
  (ref, int jobOfferId) => JobOfferStateController(
    JobOfferState(id: jobOfferId),
    ref.read(jobOfferRepositoryImplProvider),
  ),
);

class JobOfferStateController extends StateNotifier {
  JobOfferStateController(
    JobOfferState state,
    this.repository,
  ): super(state);

  final JobOfferRepository repository;

  void getJobOffer() {
    ...
  }
  
  ...

}

State も State Controller もあくまでデータの状態を管理するものとして、View に関するロジックは含んでいません。

そのため、用意しているメソッドたちも

void onButtonPressed() {
  ...
}

のようなものは生えていなく、

void getJobOffer() {
  ...
}

のようなメソッドのみ生えています。

View から直接 jobOfferStateController.getJobOffer というメソッドを呼ぶ形で実装を行なっています。

View は State Controller から情報を得ることはなく、あくまでも State の状態が変わった通知を受けて、 View を再描画する MVC のような構成になっています。

StateNotifier の State を変更する際に、メンバ変数が複数存在していると値を変更するのがめんどうなため、 freezed を利用し、変更したい値のみを変更すればいいようにしています。

pub.dev

Aというクラスの b というメンバ変数のみを変更したい場合

freezedを利用しない場合

// in A
class A {
  const A(this.b, this.c, this.d);

  final B b;
  final C c;
  final D d;
}

// in A Controller
class AController extends StateNotifier {
  const AController();
  fun change(B newB) {
    state = A(newB, state.c, state.d)
  }
}

freezedを利用したい場合(freezedは)

// in A
part 'a.freezed.dart'

@freezed
abstract class A with _$A {
  factory A({
    B b,
    C c,
    D d,
  }) = _A;
  A._();

// in A Controller
class AController extends StateNotifier {
  const AController();
  fun change(B newB) {
    state = state.copyWith(b: b);
  }
}