本稿はJCB Advent Calendar 2024の12月18日の記事です。
はじめに
初めまして。JCBデジタルソリューション開発部の若林です。今年の春から社会人になり、研修として7月から3ヶ月間ReactでWebアプリケーションを作成して、その後10月から現在に至るまでSwiftでiOSアプリケーションを作成しております。
ReactからSwiftに移行した際にバックエンドからとってきたデータをフロントエンドで画面表示する方法の違いに困惑しました。今後ReactからSwiftに移行した人がそれらのやり方の違いについて困惑することなくスムーズにプロジェクトに参画できるようになればいいなと思いこの記事を執筆します！
React
まず前提となるReactでの、バックエンドからとってきたデータをフロントエンドで画面表示する方法を私がいたプロジェクトでの設計をもとに説明します。
※本題はSwiftの説明であるため、軽い説明にさせていただきます！
私がいたプロジェクトは以下の流れでフロントエンドはバックエンドからデータを取得していました。
フロントエンド → BFF （Backend for Frontend） → バックエンド
※Reactを使う一般的なプロジェクトはデータ整形をフロントエンド内で行いますが、私のプロジェクトはBFFがデータ整形を行っていたため、本記事はその前提で進めます。
フロントエンドは一度取ってきたAPIの値を保持するためにReduxのStoreを使用していました。
ボタンを押したらバックエンドから今日の日付のデータが返されて、フロントエンドでそれが表示される画面を用いて説明すると以下のようになります。わかりやすくするためにピザのデリバリーを例にして説明します！
| React | ピザのデリバリー | |
|---|---|---|
| 1 | ユーザが画面上のボタンをクリックする | 自分（ユーザ）がピザを電話（ページ）でピザ屋の配達員さん （フロントエンド） に頼む |
| 2 | フロントエンドからBFFにAPIの通信をお願いする | 配達員さんがキッチンスタッフ（BFF）にピザを作るようにお願いする |
| 3 | BFFがバックエンドとAPIの通信を行い、バックエンドが処理を実行した後、BFFに結果を返却する | キッチンスタッフがピザを窯（バックエンド）に入れて、窯がピザを焼き、完成したピザをキッチンスタッフが受け取る |
| 4 | BFFはバックエンドから返ってきた値をフロントエンドが使いやすい形に整形する | キッチンスタッフがピザを8枚に切る （データの整形） |
| 5 | BFFからフロントエンドにレスポンスを返却する | 箱を配達員さんに渡す |
| 6 | フロントエンドはそのレスポンスをReduxのStoreに格納する | 配達員さんは箱をバイクの荷台（ReduxのStore）に詰める |
| 7 | フロントエンドはReduxのStoreから必要な情報を取り出す | 配達員さんはバイクの荷台から自分のピザを取り出す |
| 8 | ユーザーに今日の日付が表示される | 自分がピザを受け取り食べる |
以上がReactでのAPIの実行の仕方、APIから取ってきたデータの表示の仕方になります。
Swift
続いてこの流れに沿ってSwiftでの、バックエンドからとってきたデータをフロントエンドで画面表示する方法について説明します。
※現在のプロジェクトはMVVMとクリーンアーキテクチャという設計を採用しているためそれに基づいた説明になります！
| React | Swift | |
|---|---|---|
| 1 | ユーザーが画面上のボタンをクリックする | ユーザーがViewController（画面表示役）にて表示されているボタンをクリックする |
| 2 | フロントエンドからBFFにAPIの通信をお願いする | ViewControllerがPresenter （ViewControllerとUseCaseの中継役） にボタンがクリックされたことを伝える |
| PresenterがUseCase （DataSourceとPresenterの中継役） にボタンがクリックされたと伝えられたことを伝える | ||
| UsecaseがDataSource （実際にバックエンドと通信を行う役） にさらに伝える | ||
| 3 | BFFがバックエンドとAPIの通信を行い、バックエンドが処理を実行した後、BFFに結果を返却する | DataSourceがバックエンドとAPIの通信を行い、バックエンドが処理を実行した後、DataSourceに結果を返却する |
| 4 | BFFはバックエンドから返ってきた値をフロントエンドが使いやすい形に整形する | DataSourceがUseCaseに返ってきた値を渡す |
| UseCaseが帰ってきた値を使いやすい形にしてViewModelに格納する | ||
| 5 | BFFからフロントエンドにレスポンスを返却する | UseCaseがPresenterにViewModelを渡す |
| PresenterがViewControllerにViewModelを渡す | ||
| 6 | フロントエンドはそのレスポンスをReduxのStoreに格納する | ViewControllerはもらったViewModelを保存する |
| 7 | フロントエンドはReduxのStoreから必要な情報を取り出す | ViewControllerはそのレスポンスから今日の日付に関する情報を取り出す |
| 8 | ユーザーに今日の日付が表示される | 今日の日付が表示される |
iOSアプリとWebアプリのAPI実行フローの違い
上記の表をもとに、iOSアプリとWebアプリのバックエンドからとってきたデータをフロントエンドで画面表示する方法の違いについて説明します。
例としたWebアプリでは BFFがバックエンドとのAPI通信とデータの整形をしてReduxのStoreに格納しています。iOSアプリではDataSourceがバックエンドとのAPI通信をしていて、UseCaseがデータの整形をしてViewModelに格納しています。
Webアプリは、ReduxのStoreがレスポンスを保持していますが、iOSアプリでは、ViewControllerクラスがViewModelを保持しています。
まとめ
iOSアプリとWebアプリのバックエンドからとってきたデータをフロントエンドで画面表示する方法の違いについて解説しました。ピザの例えがわかりやすかったら嬉しいです！
最後に
JCBでは我々と一緒に働きたいという人材を募集しています。 詳しい募集要項等については採用ページをご覧下さい。
