[ING] - SwiftUI + VIPER + Observationを組み合わせた実装サンプル
iOS17から登場した、Observation Frameworkを利用してVIPERアーキテクチャでiOSアプリサンプルを開発した事例になります。
🌾 VIPERの略は下記の通りです。
- V: ... View(SwiftUI)
- I: ... Interactor
- P: ... Presenter
- E: ... Entity
- R: ... Router
【参考資料】
- Mastering the Basics of VIPER Design Pattern: Clear Explanation of View, Interactor, and Presenter
- VIPERアーキテクチャ採用のTUNAG iOSアプリにSwiftUIを導入しました
- VIPERアプリにSwiftUIを導入したら、View層の責務がより分離できた話
- VIPER-Architecture for iOS project with simple demo example.
- VIPER-Architecture for iOS project with simple demo example.
- SwiftUIを活用した「レシピ」×「買い物」の新機能開発
ダミーのログイン処理で認証ができる様にしており、ログインが成功したならば、3画面をTabBar内でまとめて表示する画面へ遷移します。
【認証画面】
【Feed画面】
【Gallery画面】
【Guidance画面】
※この画面はVIPERアーキテクチャで作成していません。
サンプルアプリ内では、APIモックサーバーから受け取ったJSON形式のレスポンスを画面に表示する処理を実現するために、node.js製の 「json-server」 を利用して実現しています。（※こちらはTypeScript製のものを利用しています。）
このリポジトリをClone後に下記コマンドを実行することで、自分のローカル環境で動作させる事ができます。
サンプルアプリ内にAPIモックサーバーから受け取ったJSON形式のレスポンスを画面に表示する処理を実現するために、Node.js製の「JSONServer」というものを利用して実現しています。JSONServerに関する概要や基本的な活用方法につきましては下記のリンク等を参考にすると良いかと思います。
※ 自分のLocal環境にnode.jsとyarnがインストールされていない場合は、まずはその準備をする必要があります
【Local環境で再現する手順】
# まずはMockサーバーの場所まで移動する
$ cd SimpleObservationViperExample/Backend
# 必要なpackageのインストール
$ yarn install
# Mockサーバーの実行
$ yarn start※ 自分の手元でまっさらな状態から準備する場合は下記コマンドを順次実行するイメージになります。
【Local環境で新規作成する場合の手順】
# ⭐️ 必要な実行コマンド
# ① package.jsonの新規作成
$ yarn init -y
# ② 必要なライブラリのインストール
$ yarn add typescript
$ yarn add json-server
$ yarn add @types/json-server -D※ こちらはMockサーバーを実行するために最低限必要な設定を記載したpackage.jsonになります。
【package.json設定例】
{
"name": "Backend",
"version": "1.0.0",
"main": "server.ts",
"license": "MIT",
"dependencies": {
"body-parser": "^1.20.3",
"fs": "^0.0.1-security",
"helmet": "^8.0.0",
"json-server": "^0.17.0",
"jsonwebtoken": "^9.0.2",
"typescript": "^5.4.2"
},
"scripts": {
"start": "npx ts-node server.ts"
},
"devDependencies": {
"@types/json-server": "^0.14.7",
"@types/jsonwebtoken": "^9.0.7"
}
}