モバイルアプリを React Native から Compose Multiplatform へ移行するよ

こんにちは！アルダグラムでエンジニアをしている渡邊です。

弊社では KANNA というサービスを提供しており、モバイルアプリは React Native で作られています。

そのモバイルアプリにおいて、現在 Kotlin Multiplatform と Compose Multiplatform を使って React Native をやめるように移行対応を進めています。

この記事では移行に至った経緯と、現在の状況について紹介します。

KANNA のモバイルアプリの歴史

弊社の KANNA のモバイルアプリは2019年頃に開発がスタートしました。私は当初はまだ参画していなかったのですが、当時の開発メンバーは WEB 開発を得意とするメンバーが多かったようです。また開発者4名で Web、iOS、Android 版を4ヶ月で0から開発する必要があり、開発スピードも重要でしたので、1つのコードで Android、iOS のそれぞれのアプリを開発できる React Native を採用することに決定したとのことでした。

当初は建築業界の受注側と発注側を繋ぐためのアプリとしてスタートしましたが、提供を開始してからサブの機能であった工事案件などのプロジェクト管理の方が需要がありました。そのためプロジェクト管理の機能をメインとして提供するように方針が変わっていったため、方針に応じて様々な機能追加が行われていきました。

当初は Web アプリケーションエンジニアが React.js の延長として React Native によるネイティブアプリ開発を続けていましたが、React Native に詳しいエンジニアが社内に居なかったこともあり、徐々にアプリ動作の遅延などパフォーマンスの課題も目立つようになってきました。

パフォーマンス最適化のために React Native から Swift/Kotlin のネイティブ開発に移行する計画もありましたが、ネイティブ開発に詳しいエンジニアが社内におらず中々前に進まない状況でした。

私はネイティブへのリプレイスが面白そうだなと思い、2022年の9月から参画しました。 React Native にはネイティブ側とやりとりができる Native Modules や、ネイティブのビューを表示できる Native UI Components と呼ばれる機能が提供されています。参画してからはそれらの機能を使って React Native では開発が難しい機能の追加を行ってきました。例えばバックグラウンドで写真をアップロードできる機能や写真＆PDFに対して編集ができる機能、カレンダーの機能であったりと様々です。

これらの新しい機能は Android、iOS それぞれネイティブで開発を行ってきましたが、既存の機能はあまりリプレイスできておらず React Native のままになっています。

新たに生まれた課題

上記の歴史を踏まえて、新たな課題が生まれてきました。

• Android、iOS それぞれネイティブで開発を行うため、それぞれのエンジニアが必要。最近ではクライアントサイドでの実装量が多い新機能開発も増えてきたため、それに比例して工数もAndroid、iOS でその分必要になる
• 上記の通り Android、iOS それぞれネイティブで開発する必要があり工数が倍になってしまうため、リプレイスが当初思っていたように進んでいない
• Android、iOS をそれぞれ別々のエンジニアが開発した場合、細かい部分の挙動が異なることがある
  • 例えばエラー時に表示されるメッセージが違う、など

これらの課題を解決するために、弊社では Kotlin Multiplatform（以下、KMP） と Compose Multiplatform（以下、CMP） を採用することに決めました。

KMP と CMP の採用を決めた理由

KMP と CMP について簡単に説明しておきます。

KMP を使うと Kotlin で様々なプラットフォームの開発が行えます。 Android では元々 Kotlin を使えますが、iOS でも Kotlin でコードを書き、最終的に iOS で利用可能なフレームワークとして出力することができます。 これによってロジックを Kotlin で共通化することができます。

CMP を使うと Compose という UI ライブラリを使って様々なプラットフォームの UI の開発が行えます。 Compose は Kotlin を使う必要があります。 元々 Compose は Android 用に Google が開発していますが、JetBrains が Android 以外のプラットフォームでも使えるようにしています。これによって UI も Kotlin + Compose で共通化することができます。

この KMP と CMP を使うことでロジックも UI も Kotlin で書くことができます。 KMP + CMP の採用を決めた理由としては主に以下になります。

• Kotlin を使って1つのコードで Android、iOS の開発が行える
• Google が KMP のサポートを宣言している
  • https://android-developers.googleblog.com/2024/05/android-support-for-kotlin-multiplatform-to-share-business-logic-across-mobile-web-server-desktop.html
• Android の資産がほぼそのまま使える
  • Compose はもちろんのこと、Android の Jetpack で提供されているライブラリで使えるものが多いため、Android エンジニアにとっては開発がしやすい
    • Navigation などのライブラリはまだ KMP 対応されていないが、JetBrains がマルチプラットフォーム対応したライブラリを出している
• もし UI に何か問題があった場合は、ロジック部分だけ Android、iOS で共通のものを使用し、iOS ではネイティブで UI を作成する、といった対策も取れる
  • CMP では Compose の画面の中に SwiftUI や UIKit の画面を表示させることができる
    • Integration with SwiftUI
    • Integration with UIKit

CMP への移行の進め方

CMP への移行は、以下のように進めています。

1. 既存の React Native の画面
   • 既存の React Native で作られた画面を全て一覧にまとめている
   • この一覧を元に、画面ごとに CMP を使って移行を進める
2. 新規で開発する画面は CMP を使うことを前提とする
   • ただし CMP では実装が難しい場合、Android では Android View を、iOS では SwiftUI や UIKit を使うことも可
3. 既存機能を改修する場合、改修内容によっては CMP を使って移行を進めた後、機能改修を行うことも検討する

現在の移行の状況

2024年の11月から移行を進めており、現在までに既存の React Native で作られた画面を3つほど CMP に置き換えてリリースしています。 また、新機能を開発する時に画面が必要だったため、その画面を2つほど CMP で作成してリリースしています。

リリースはしていないですが移行が進んでいる画面もあり、現在約10%程度の移行が進んでいる状況です。

最後に

弊社のモバイルアプリの現在の状況について紹介させていただきました。

最後になりますが、CMP への移行に関して協力してくださるアプリチームのメンバーの方々、特にアプリチームのリーダーである sukechannnn には CMP 移行を率先して牽引してくださっており、非常に感謝しております！！

弊社ではアプリエンジニアを大大大絶賛募集中です！！！

もっとアルダグラムエンジニア組織を知りたい人、ぜひ下記の情報をチェックしてみてください！