SwiftUIとGraphQLを使って新規画面を作ってみた

mobile.stmn #1で話した内容です！
https://stmn.connpass.com/event/286006/

zenn記事のまとめ発表です
https://zenn.dev/stadium/articles/swiftui-graphql

Transcript

1. SwiftUIとGraphQLを使って 新規画面を作ってみた 株式会社スタジアム かずお
2. 今日の発表について SwiftUIとGraphQLで新規画面を実装しました 👆の採用理由、実装内容、使ってみた感想について紹介します 以下のzenn記事にまとめた内容を登壇バージョンに書き換えて発表します https://zenn.dev/stadium/articles/swiftui-graphql 2
3. 自己紹介 3 かずお(28歳) • 株式会社スタジアム ◦ スタメンの子会社です • Webエンジニアになって２年２ヶ月 • Rails / Swift / Kotlin / React • YouTuberを２年半やってます！ • (登録者1万人目指してます🏆) 日台oneちゃん👉 twitter youtube
4. 4 新規画面について
5. 新規画面について FANTS • オンラインでコミュニティを運営するためのサービス ホーム画面(新規画面) • カルーセル画像、おすすめ投稿、イベント、コンテンツなど を表示 • コミュニティの世界観やオーナーが伝えたいことがユー ザーに届きやすくなることが期待できる 5
6. 6 SwiftUIとGraphQLの採用理由
7. SwiftUIとGraphQLの採用理由 7 SwiftUI • 2022年の終わり頃にFANTS iOSアプリの動作環境をiOS12.0以上からiOS14.0以 上に引き上げた • SwiftUIはiOS13から利用可能 • UIの構築や微調整はUIkitよりもSwiftUIの方が素早くできそう 👆の理由から新規画面を作るタイミングで採用に踏み切りました
8. SwiftUIとGraphQLの採用理由 8 GraphQL • ホーム画面のように分散されたデータの取得が必要な場合に相性がいいと思った ◦ REST APIの場合、APIの作成にトレードオフが発生する ▪ 全部のデータを一気に取得する APIを作成する • デメリット: APIの再利用性が下がる ▪ APIを複数作成する • デメリット：エラーハンドリングが煩雑になる 👆の理由から採用しました
9. 9 実装内容
10. 実装内容 10 構成 • バックエンド: Ruby on Rails ◦ graphql gem　👉　code-first ◦ code-first vs schema-first ◦ code-firstはバックエンドの実装とスキーマがずれないが、スキーマの確定は実装待ちになる • クライアント: iOS(Android) ◦ apollo-ios ▪ apolloはWebの方が有名ですが、モバイルの方も直近メンテナンスされていたので、信頼性 が高いと判断し採用しました
11. 実装内容 11 ざっくり以下のように進めていきました • UIの実装 • スキーマ共有 • query(fragment)の実装 • codeの自動生成 • UIへのデータの流し込み
12. 実装内容 12 UIの実装 SwiftUIはプレビュー機能強力なので、mockデータさえあれば不自由なくUIの構築がで きました code-firstの実装の場合、GraphQLのスキーマの確定はバックの実装を待つこともある かと思いますが、👆で並行して作業ができると思います
13. 実装内容 13 スキーマ共有 code-firstなのでバックエンドの実装待ち (ある程度のスキーマの共有はバックエンドの実装前にしていました)
14. 実装内容 14 query(fragment)の実装 スキーマからリクエストできるqueryや選択セットが決まる 利用したいqueryや選択セットをまとめたfragmentを定義する
15. 実装内容 15 codeの自動生成 スキーマファイルとquery(fragment)から、Swiftで使えるコードの自動生成をする
16. 実装内容 16 UIへのデータの流し込み 自動生成されたクエリ関数でデータを取得できます
17. 17 SwiftUIとGraphQLを使ってみた感想
18. SwiftUIとGraphQLを使ってみた感想 18 SwiftUI よかったところ • UIの構築が容易 ◦ プレビューをみながら UI構築ができるので、スタイルの調整もやりやすい ◦ リリース後のUI調整も素早く対応できた わるかったところ • UiKitでしか実装できない機能がある ◦ Pull to RefreshはiOS14はSwiftUI未対応のため実装を見送った
19. SwiftUIとGraphQLを使ってみた感想 19 GraphQL よかったところ • APIの再利用性が高く、他画面に展開しやすい ◦ 前評判通り • クライアント(iOS、Android、Web)とバックの型の共有がやりやすい ◦ スキーマ・型の共有が開発システムに組み込まれているのが魅力的 わるかったところ • ネストが深いレスポンスを受けた時の処理が大変 ◦ データ層とView層を疎結合にするVIPERを採用してる ◦ モデルへデータを詰め替える際にネストが深いレスポンスの場合に型を当てるのが大変
20. SwiftUIとGraphQLを使ってみた感想 20 • ネストが深いレスポンスを受けた時の処理が大変 ◦ データ層とView層を疎結合にするVIPERを採用してる ◦ モデルへデータを詰め替える際にネストが深いレスポンスの場合に型を当てるのが大変
21. 21 まとめ
22. まとめ 22 • SwiftUIとGraphQLの採用は、よかった > わるかった • ただ、両方のポテンシャルを十分に引き出せてなさそう ◦ せっかく宣言的UIなのでfragment colocationみたいなReactチックなやつを試してみてもおもしろいかも • ReactとGraphQLの組み合わせを個人開発で試してみて、モバイルの開発に還元したい ◦ すぐ試せそう👉AWSのApp sync ◦ 個人開発のDB高い問題のひとつの解？👉GraphQL + NoSQL
23. 23 ありがとうございました