> For the complete documentation index, see [llms.txt](https://docs.wantedly.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wantedly.dev/fields/apps/mobile-native-app.md).

# モバイルネイティブアプリについて

この章では、Wantedly のモバイルアプリのアーキテクチャをまとめます。 まず Wantedly が提供するアプリの全体像を示したうえで、以降はもっとも開発が活発でアーキテクチャの中心となっている Wantedly アプリに絞って解説します。

この文書は継続的にメンテナンスされ、モバイルエンジニアのオンボーディングと日常的な開発作業の指針となることを目的としています。

## Why

モバイルアプリにおいて、アーキテクチャに世代が生まれるのは必然です。 既存のアーキテクチャの課題を解決するために新しい世代のアーキテクチャが生まれ、また、パラダイムシフトが起きるとアーキテクチャが変わっていきます。

アーキテクチャは、世代が新しくなるたびに改善していきます。 しかし、古くなったアーキテクチャをすべて一度にリニューアルするのは、膨大なコストが掛かるため非現実的であり、徐々に古いものを新しくしていくのが現実的です。 そのため、常に古い世代のアーキテクチャと向き合う必要があります。

この章では、古いアーキテクチャについては軽く、現在のアーキテクチャについてはより詳細にまとめます。

## Wantedly のモバイルアプリ

現在、モバイルアプリとして Wantedly・Wantedly Intern・People・Perk を公開しています。

### Wantedly

Wantedly アプリは、ユーザーと会社が気軽にマッチングできるアプリです。

* 2014 年から提供しています。
* 2018 年の iOS リニューアル時に React Native が導入されました。
* 2021 年に React Native は取り除かれ、KMP（Kotlin Multiplatform）が導入されました。

Wantedly アプリは iOS / Android の 2 プラットフォームで提供しており、ビジネスロジックの多くを KMP で共有しています。 現在、これらは単一のモノレポ [wantedly/visit-app](https://github.com/wantedly/visit-app) に統合されており、次の構成になっています。

* `iosApp/` — iOS アプリ（Swift）
* `androidApp/` — Android アプリ（Kotlin）
* `shared/` — iOS / Android で共有する KMP コード

### Wantedly Intern

Wantedly Intern は、学生の流入を目的としたアプリで、Wantedly アプリと同じリポジトリ・同じコードでできています。 そのため、Wantedly アプリと全く同じアーキテクチャで同じ機能を持ちます。

### People

People は、名刺や人脈を管理するアプリです。 2016 年から提供しています。 つながりの情報をローカルに保持し、各 OS の連絡先に同期する機能があります。このために一部に Realm が使われています。 名刺撮影機能のために OpenCV が使われています。 両 OS どちらも MVVM アーキテクチャを採用しています。

### Perk

Perk は、企業の従業員が提携先の優待などを利用できる福利厚生アプリです。 Flutter 製で、iOS / Android を単一のコードベースで提供しています。 アプリの大部分は WebView で構成され、認証などはネイティブ側が担っています。 アーキテクチャは domains / infrastructure / usecases / features の 4 層からなるクリーンアーキテクチャを採用し、状態管理と DI には `provider` パッケージを使っています。

## アーキテクチャの遷移

以降は、もっとも開発が活発な Wantedly アプリを対象に、そのアーキテクチャの移り変わりを示します。細かな点は省いています。

| OS      | 世代 | 言語     | アーキテクチャパターン                  | UI実装                 | 備考                                 |
| ------- | -- | ------ | ---------------------------- | -------------------- | ---------------------------------- |
| iOS     | 1  | Swift  | Flux(ReactorKit)             | UIKit(No Storyboard) | 2018年リニューアル                        |
| iOS     | 2  | Swift  | Flux(KMP Reactor)            | UIKit(No Storyboard) | KMP導入(2021年)                       |
| iOS     | 3  | Swift  | Flux(KMP Reactor)            | SwiftUI              | SwiftUI導入(2022年)。パッケージ管理は SPM に一本化 |
| Android | 1  | Java   | MVC                          | XML                  | 段階的リニューアル開始                        |
| Android | 2  | Kotlin | Flux(ReactorKitライクViewModel) | XML                  | UdfViewModel採用                     |
| Android | 3  | Kotlin | Flux(KMP Reactor)            | XML                  | KMP Reactor導入                      |
| Android | 4  | Kotlin | Flux(KMP Reactor)            | Jetpack Compose      | Compose移行中                         |

## サブページ

Wantedly アプリの現在のアーキテクチャを、共有ロジックと各プラットフォームに分けて解説します。 詳細は以下のサブページを参照してください。

* [iOS](https://docs.wantedly.dev/fields/apps/mobile-ios) — iOS アプリのアーキテクチャ。依存性注入、Coordinator パターンなど。
* [Android](https://docs.wantedly.dev/fields/apps/mobile-android) — Android アプリのアーキテクチャ。依存性注入、ナビゲーションなど。
* [Kotlin Multiplatform (KMP)](https://docs.wantedly.dev/fields/apps/mobile-kmp) — iOS / Android で共有するビジネスロジック層。Reactor / SQLDelight / GraphQL。

## 参考資料

### 技術ブログ・記事

* [React Nativeをやめる話とKotlin Multiplatform](https://www.wantedly.com/companies/wantedly/post_articles/282562)
* [Wantedly VisitにおけるKotlin Multiplatformの導入と実装](https://www.wantedly.com/companies/wantedly/post_articles/300999)

### 質問・相談

* Slack: [#mobile\_chapter](https://wantedly.slack.com/archives/C014VN3KKB9)