React NativeによるWeb・モバイルアプリのクロスプラットフォーム開発

プロジェクト概要

• クライアント：ITサービス企業様
• 開発種別：クロスプラットフォームアプリ開発
• 対象：Webアプリ、モバイルアプリ
• 担当範囲：要件定義、基本設計、認証基盤構築、バックエンド開発、開発支援、テスト、管理画面開発
• フロントエンド：React Native、TypeScript
• バックエンド・インフラ：AWS Amplify、AWS Lambda、Amazon DynamoDB
• 認証：Amazon Cognito
• プロジェクト体制：複数社による共同開発
• 開発年：2023年

Webアプリとモバイルアプリのソースコードを共通化

改修前のシステムでは、Webアプリとモバイルアプリが異なるソースコードで構築されていました。

同じ機能を追加する場合でも、それぞれのアプリで個別に実装・テストする必要があり、開発工数の増加や仕様差異が生じやすい構成となっていました。

そこで、React NativeとTypeScriptを採用し、Webとモバイルで可能な限りソースコードを共通化するクロスプラットフォーム構成へ移行しました。

プラットフォームごとの違いを考慮しながら、共通化できる機能と個別対応が必要な機能を整理。将来的な機能追加や保守を効率化できる設計を目指しました。

複数社で進める開発プロジェクトを支援

本プロジェクトには複数の開発会社が参加しており、それぞれが異なる領域を担当していました。

ShareDanは、要件定義と設計を担当するとともに、各社が円滑に開発を進められるよう、システム全体を見ながら開発工程を支援しました。

各機能の仕様やデータの流れ、認証との接続方法などを整理し、開発会社間で認識のずれが発生しないよう調整しています。

また、実装後のテスト工程にも参加し、Webアプリとモバイルアプリの双方で、機能や表示に問題がないかを確認しました。

Amazon Cognitoによる認証基盤の構築

Webアプリとモバイルアプリから共通して利用できる認証基盤として、Amazon Cognitoを採用しました。

ユーザー認証に関する要件を整理したうえで、アカウント管理やログイン状態を複数のプラットフォームから安全に利用できる構成を設計・構築しています。

クロスプラットフォーム開発では、アプリごとに認証処理が異なると仕様のずれや保守負担につながります。認証基盤を共通化することで、Webとモバイルで一貫したユーザー認証を実現しました。

AWS AmplifyとLambdaを組み合わせたAPI連携

バックエンドには、AWS Amplify、AWS Lambda、Amazon DynamoDBを採用しました。

本プロジェクトの要件は、Amplifyの一般的な構成だけでは対応が難しい部分があったため、Lambdaを組み合わせた独自の構成を設計しました。

各機能や外部サービスとのAPI連携を集約し、アプリ側から共通して利用できるAPIハブのような役割を持たせています。

これにより、Webアプリとモバイルアプリが個別にバックエンドとの接続処理を持つのではなく、共通した経路でデータや機能を利用できる構成となりました。

プロジェクト後半に管理画面を1週間で構築

プロジェクト終盤に、サービス運営者が利用する管理画面が新たに必要となりました。

公開までの時間が限られ、追加予算にも制約がある状況でしたが、ShareDanが設計と開発を引き受け、約1週間で管理画面を構築しました。

必要な機能を整理して優先順位を付け、初期リリースに欠かせない機能へ範囲を絞ることで、短期間での開発を実現しています。

限られた条件の中でもプロジェクト全体の公開スケジュールに対応した点について、お客様から高い評価をいただきました。

クロスプラットフォーム化による保守性の向上

Webアプリとモバイルアプリのソースコードを共通化することで、同じ機能を複数回実装する負担を軽減しました。

仕様変更を共通コードへ反映できる範囲が広がり、各プラットフォームで機能や挙動が異なるリスクも抑えられます。

React Nativeによるフロントエンドの共通化に加え、認証基盤とAPI連携も共通化することで、アプリケーション全体を継続的に保守・拡張しやすい構成としています。

React Native・AWSを用いたアプリ開発をご相談ください

ShareDanでは、React NativeとTypeScriptを用いたクロスプラットフォームアプリ開発に対応しています。

Webアプリとモバイルアプリの共通化だけでなく、AWS Amplify、Lambda、DynamoDB、Cognitoを利用したバックエンド・認証基盤の設計から、テスト、公開後の運用まで支援可能です。

複数のソースコードに分かれた既存アプリの再構築や、複数の開発会社が参加するプロジェクトへの部分参画についてもご相談いただけます。