複雑な仕様に立ち向かうアーキテクチャ

株式会社LayerXのバクラク事業におけるアプリ開発と、複雑な仕様対応のアーキテクチャについて説明しています。Flutterを基盤としたアーキテクチャで、モジュール分割とレイヤー構造を採用。複雑な仕様には、再利用可能なSpecificationsパターンや、データ管理を効率化するFragment Colocationを組み合わせて対応しています。これにより、柔軟でスケーラブルなシステムを構築しています。

Transcript

1. © LayerX Inc. 複雑な仕様に⽴ち向かうアーキテクチャ 2024/11/29
2. ⽬次 Agenda • ⾃⼰紹介 • アプリの紹介 • アーキテクチャ • 複雑な仕様に⽴ち向かうために • まとめ
3. ⾃⼰紹介
4. 4 © LayerX Inc. ⾃⼰紹介 株式会社LayerX (2023/09~) バクラク事業部 申請‧経費精算開発 APPグループ マネージャー 前⽥ 洋平(yohei) Android 10年 Flutter 3年 Go 4年 #お酒 #マンガ #ラジオ #リノベ
5. プロダクト紹介
6. © LayerX Inc.　 6 「バクラク」シリーズラインナップ ‧AIが請求書を５秒でデータ化 ‧仕訳 / 振込データを⾃動作成 ‧電帳法‧インボイス制度にも対応 仕訳‧⽀払処理効率化 ‧年会費無料で何枚でも発⾏可 ‧カード利⽤制限で統制を実現 ‧すべての決済で1%以上の還元 法⼈カードの発⾏‧管理 ‧帳票の⼀括作成も個別作成も⾃由⾃在 ‧帳票の作成‧稟議‧送付‧保存を⼀本化 ‧レイアウトや項⽬のカスタマイズも可能 請求書発⾏ ‧スキャナ保存データも直接取込  ‧AI-OCRが⾃動読取＆データ化 ‧[取引先][取引⽇][取引⾦額]での検索 帳票保存‧ストレージ ‧AIが⾒積書‧請求書を５秒でデータ ‧スマホからも申請‧承認OK ‧柔軟な通知設定‧承認の催促機能 稟議‧⽀払申請 ‧直感的UIで従業員の負担を軽減 ‧Slack連携で打刻や⾃動リマインド可能 ‧わかりやすい残業 / 休暇管理レポート 勤怠管理 ‧AIが領収書を5秒でデータ化 ‧スマホアプリとSlack連携あり ‧領収書の重複申請などミス防⽌機能 経費精算
7. 7 バクラク申請‧経費精算のiOS/Androidのスマートフォンアプリは、 より使いやすくなるようリニューアルを進めています。 新アプリでは、スマートフォンでお使いいただきやすいインター フェースになり、プッシュ通知機能や連続撮影機能など、これまで多 くのご要望をいただいていた機能が実装されます。これにより、いつ でもどこでもだれでもバクラク申請‧経費精算アプリをご利⽤いただ けやすくなります。 バクラク申請‧経費精算アプリ、リニューアル中！ より使いやすく、スマートフォンに 最適化されたデザインになります 複数のレシートや領収書を⼀度に撮 影し、⼀括でアップロードできます メールやSlackで受けている通知 を、アプリの通知でも受け取れます 利⽤‧リリースについて 9⽉17⽇にリリースしました ご希望に応じて、従来のアプリと並⾏してご利⽤が可能です！ 新アプリの情報はこちらから
8. 利⽤技術
9. © LayerX Inc. 9 • State Management ◦ flutter_hooks ◦ Riverpod • Router ◦ auto_route • Network ◦ graphql_flutter (graphql_codegen) ◦ dio (Open API) • Database ◦ drift 利⽤しているライブラリ📚 利⽤技術
10. アーキテクチャ
11. © LayerX Inc. 11 アーキテクチャ Features Feature A Feature B Feature C Data Application
12. © LayerX Inc. 12 アーキテクチャ Presetation Domain Data Provider Hooks UI Component Parts Compounds Pages Services Specifications Models GraphQL client OpenAPI client Database Notifier State
13. 複雑な仕様にどう取り組むか
14. © LayerX Inc. 14 インボイス制度を御存じでしょうか？ 複雑な仕様とは… 複雑な仕様にどう取り組むか
15. © LayerX Inc. 15 インボイス制度を御存じでしょうか？ 複雑な仕様とは… 複雑な仕様にどう取り組むか 出典: https://www.nta.go.jp/taxes/shiraberu/zeimokubetsu/shohi/keigenzeiritsu/invoice_about.htm
16. © LayerX Inc. 16 バクラクの⽀払申請でのインボイス制度チェック 複雑な仕様にどう取り組むか
17. © LayerX Inc. 17 バクラクの⽀払申請でのインボイス制度チェック 複雑な仕様にどう取り組むか 取引先マスタ の情報 AI-OCR読み取 り結果の情報 国税庁の登録 情報
18. © LayerX Inc. 18 バクラクの⽀払申請でのインボイス制度チェック 複雑な仕様にどう取り組むか 取引先マスタ の情報 AI-OCR読み取 り結果の情報 国税庁の登録 情報 チェックにも いっぱいデータが必要🤯
19. © LayerX Inc. 19 バクラクの⽀払申請でのインボイス制度チェック 複雑な仕様にどう取り組むか 取引先マスタ の情報 AI-OCR読み取 り結果の情報 国税庁の登録 情報 Specification🧙 & Fragment Colocation🪄
20. © LayerX Inc. 20 • 仕様を表すパターン ◦ 複雑な仕様を表現する実装パターン(DDDで出てきたりする) • Bool or Enumを返す ◦ 基本的にはboolだが、Enumも許容している • Unit Testは必須 ◦ CIで落ちるようになっている Specification🧙 複雑な仕様にどう取り組むか
21. © LayerX Inc. 21 Specification🧙 複雑な仕様にどう取り組むか インボイス判定結果のenum インボイス判定ロジックを記載
22. © LayerX Inc. 22 Specification🧙 複雑な仕様にどう取り組むか インボイス判定結果のenum インボイス判定ロジックを記載 必要なデータはどう 取ってくる？🤔
23. © LayerX Inc. 23 Specification🧙 複雑な仕様にどう取り組むか インボイス判定結果のenum インボイス判定ロジックを記載 Fragment Colocation🪄
24. © LayerX Inc. 24 • 複数の Query や Mutation で共有したいフィールドをまとめて Fragment として宣⾔することがで きる • Fragmentを利⽤することで、Colocation（コンポーネントとコンポーネントに必要なデータを近 くに配置すること）を実現しようとする設計の考え⽅ • WidgetとGraphQLファイルをセットで置く Fragment Colocation🪄 複雑な仕様にどう取り組むか
25. © LayerX Inc. 25 Fragment Colocation🪄 複雑な仕様にどう取り組むか
26. © LayerX Inc. 26 Fragment Colocation🪄 複雑な仕様にどう取り組むか Specificationとセットで 使うと便利そう
27. © LayerX Inc. 27 • SpecificationとFragmentファイルをセットでおいてあげる Specification🧙& Fragment Colocation🪄 複雑な仕様にどう取り組むか
28. © LayerX Inc. 28 複雑な仕様にどう取り組むか
29. © LayerX Inc. 29 複雑な仕様にどう取り組むか 必要なデータがわかりやすく なった🙌
30. まとめ
31. © LayerX Inc. 31 • ⼤枠Features/Application/Dataでモジュール分け • Featuresの中⾝ Presentation/Domainでレイヤー分け • 複雑な仕様にはSpecifications & Fragment Colocationで⽴ち向かおう まとめ まとめ
32. © LayerX Inc. 32 もう少し詳しく聞きたい⼈はカジュアルに⾯談しましょう！ We are hiring! 今後の展望 • LayerXについてもっと知りたい • どうやって開発してるのかしりたい • Flutterについて相談したい • お酒知りたい 「LayerX 採⽤ エンジニア」で検索🔍
33. © LayerX Inc. ありがとうございました