unerryのテクノロジースタック刷新プロジェクトの裏側

はじめに

unerryのプラットフォームチームでフロントエンドエンジニアをしている堀江です。
私のプロジェクトでは、この半年間テクノロジースタック刷新を行い、リリースまで完遂しました。
そのプロジェクトの背景から、新旧テクノロジースタックを公開しちゃいます。

プロジェクト概要

私が所属しているプロジェクトは、ユーザー数が大規模のtoC向けネイティブアプリ（以下、アプリ）を開発、保守しております。
このアプリには、弊社のBeacon Bank SDKを導入しており、位置情報を活用した顧客体験の設計、コンテンツ開発を行なっております。

刷新前の状況、課題

このアプリは、長年にわたって開発されており課題を抱えておりました。

1つ目は、複数の言語、フレームワークを使って実装されている点です。
もちろん、フロントエンドとバックエンドで言語やフレームワークが違っているのはよくあることです。

しかし、私のプロジェクトでは、アプリをSwift、Kotlinに加え、アプリ内WebViewをVue.js(JavaScript)で、バックエンドをPHPとRuby on Railsで実装しており、1つの領域に複数の言語、フレームワークを採用しておりました。

2つ目は、MySQLのバージョンが古いという点です。
刷新前はMySQL5.7で、そもそもサポート終了しているし、GCPのCloudSQLも拡張サポートに入るという状況でした。

旧テクノロジースタック

このようなテクノロジースタックになった背景は、1つにストアへのアプリ申請の煩わしさがあったからでした。
そのため、元々Swift、Kotlinで開発されていたのですが、追加開発する画面についてはアプリにWebViewを設置し、Vue.jsで実装した画面を表示するという形になりました。
また、バックエンドはレガシー技術を使っていおり開発効率が悪いという点から、追加開発をRuby on Railsで行いました。

それにより、一部改修はアプリ申請不要となりましたが、複数の言語、フレームワークを使って実装する形となり、結果として改修コストが高まってしまいました。

この点から、長年刷新したいという思いはあったものの、やはり踏ん切りがつかなかったのですが、MySQL5.7のサポート切れがダメ押しとなり、刷新することとなりました。

刷新後のテクノロジースタック

では、ここから本題の新テクノロジースタックです。

アプリをFlutter、フロントエンドとバックエンドをTypeScriptとNext.jsにそれぞれ統一しました。
それに加え、ORMにPrisma、スキーマ定義とデータ検証にZodを採用しました。
※Flutterは、基本的にWebViewでNext.jsの画面を表示し、ネイティブ特有の機能のみ実装（位置情報の許諾や取得など）

メリット・デメリット

恩恵・メリット

• フロントエンド、バックエンド、DBの垣根がなく、シームレスに開発が行える
  • Next.jsのServer Actionsによりバックエンドも実装可能
    • フロントエンドとバックエンドで、言語やライブラリの切り替えコストが不要
    • フロントエンドからのAPI呼び出しが不要で、Server Actions内の関数を直接呼ぶだけ
  • チーム開発が効率的
    • フロントエンド、バックエンド、DBを1人の開発者が担当できるため、フルスタックエンジニアが活躍しやすい
    • タスク分担の調整が容易
• IF設計がほぼ不要
  • フロントエンド↔︎バックエンド
    • フロントエンドがServer Actionsの関数を直接呼ぶので、フロントエンドとバックエンドでIF設計が簡単
      • フロントエンドとバックエンドの垣根がないため、設計の違いから認識齟齬が生まれずらい
        • 例えば、フロントエンドとバックエンドでIFの設計者が異なり、認識齟齬により手戻りが発生するなどが起きずらい
      • APIの認証などの設計が不要
    • 型定義が必要な場合はReturnType<typeof function>で簡単実装
  • バックエンド↔︎DB
    • Server Actionsの関数内でPrismaを用いたデータ操作が可能
    • Prismaのスキーマ定義からデータベース関連の型を自動生成してくれるので、データ操作時の型の安全性を担保できる
• アプリUIの更新が容易
  • Flutterで最低限のネイティブ機能を実装し、UIはNext.jsで実装しているため、UI改修はアプリストアへの再申請なしでリリースできる
• CMSの実装が容易
  • Next.jsのServer ActionsやPrismaを活用し、効率的にCMSを構築可能
  • ZodとReact Hook Formを組み合わせたスキーマ定義とバリデーションにより、高い拡張性と安全性を確保

デメリット

• ネットワーク依存性
  • ネットワークが不安定だと、Next.jsサーバからのレスポンスが遅延し、アプリの画面に何も表示されない
  • アプリ単体で実装する場合、ダウンロードされたデータによりオフライン状態でも画面表示が可能だがその実現が難しい

まとめ

以上が、とあるプロジェクトのテクノロジースタック刷新プロジェクトの裏側でした。
アプリ、フロントエンド、バックエンド全てが刷新されているので、プログラムからインフラまですべてリプレイスされており、非常に大変ではありました。

私自身、フロントエンドしかほぼ分からない状態だったのですが、この刷新プロジェクトを通じてバックエンドからインフラまで触れるようになり、フルスタックエンジニアとしての第一歩が踏み出せたと思っております。

また、unerryにはこのプロジェクト以外にも多くのプロジェクトおよびサービスが開発、運用されておりますが、レガシー技術を使っているも少なくなく、この刷新プロジェクトの経験を生かせる場があると思っているので、引き続き頑張っていこうと思います。

最後まで読んでくださりありがとうございました。