モバイルアプリ研修

2025年度リクルート エンジニアコース新人研修の講義資料です

Transcript

1. モバイルアプリ研修（公開用） 新卒ブートキャンプ 2025/05/07 原 健太(@mactkg)
2. この資料について(公開資料向け補足) 社内で行ったモバイルアプリ研修のスライドです。 今回はモバイルアプリ概論部分のみを記載していますが、 この講義の後iOS/Androidでモバイルアプリを開発する研修も実施しました。 実習部分については今回省略しての公開となります。
3. このモバイルアプリ研修について ①研修の目的/ゴール モバイルアプリを作ってみたいと思った場合のハードルが下がること。モバイルアプリの 運用周りのハマり所を把握することで、業務でアプリチームと協働しやすくなること。 ②研修概要（アジェンダ） Android/iOSのネイティブモバイルアプリ開発を体験する。モバイルアプリの運用で注意 すべき点についても解説します。 つまり、 「モバイルアプリってこんな感じなんだ」が分かればOKです
4. このモバイルアプリ研修について: もう少し詳細に 1日目(概論/iOS) モバイルアプリが仕事でなくても、最低限知っておいて欲しいことを伝えます APIチームとして、ディレクターとして、協業先として 普段使っているアプリを作れて楽しい！という気持ちになってもらいます 2日目(Android) 異なるプラットフォームや言語に触れて、違いや潮流を体験します ネットワーク通信や発展的な内容にもチャレンジしてみましょう
5. とにかく楽しんでください！ わからないことがあったら気軽に聞いてください！ （そのためにたくさんメンターがいます）
6. スケジュール
7. 本日の流れ 一つのアプリをみんなで編集し、各々のプロフページのあるアプリを作ります！ 時間 内容 備考 10:15 - 10:20 イントロ 10:20 - 10:45 モバイルアプリ概論 10:45 - 12:30 Swift入門 ハンズオン 12:30 - 13:30 お昼休み 13:30 - 14:30 SwiftUI入門 ハンズオン 14:30 - 18:00 実習 プロフィールアプリを作ります！ 18:00 - 18:30 発表・まとめ
8. 明日の流れ（参考） 今日作ったプロフィールアプリのデータを使ってプロフィール閲覧アプリを作ります。 時間 内容 備考 10:15 - 10:45 Kotlin入門 ハンズオン 10:45 - 12:30 Jetpack Compose入門 ハンズオン 12:30 - 13:30 お昼休み 13:00 - 18:00 実習 プロフィール閲覧アプリを作ります！ 18:00 - 18:30 発表・まとめ
9. モバイルアプリ概論
10. リクルートでリリースしているアプリの一部
11. モバイルアプリケーションとは? スマートフォンやタブレットなどのモバイル端末上で動くアプリケーションのこと ウィジェット・OS内検索機能・通知などのネイティブ機能との連携ができる アプリに対して課金したり、アプリ内課金のプラットフォームがある（要手数料） プラットフォーム内でUIの一貫性がある（ことを推奨されている）
12. UIの一貫性をサポートする資料たち 個人的にUIが好きなので紹介します
13. iOS: Human Interface Guidelines(HIG) AppleプラットフォームのUI原則に ついて解説している 迷ったら参照すべき原則 時には逸脱しても構わない 1987年(!)からリリースしている https://developer.apple.com/jp/design/human-interface-guidelines/notifications
14. Designing Fluid Interface(WWDC2018) Appleの開発者向け会議の動画 iPhone Xでホームボタンが消え、UI が大きく変化した時期 「直感的」で「自然」なUIとは何 か？を語るセッション 個人的なWWDC UI界隈の神回です ※ 研修後Liquid Glassが発表されま したが、未だ重要に思います(追記) https://developer.apple.com/jp/videos/play/wwdc2018/803/
15. Android: デザインガイド Androidが公式で提供するデザイン ガイド Human Interface Guidelinesほどは記 載がないので、Material Designを参 考にするのがオススメ https://developer.android.com/design/ui/mobile/guides/layout-and-content/layout- basics
16. Android: Material Design Googleが提供するデザインシステム Googleのアプリはこのデザインに 基本沿っている コンポーネントベースで使用用途の ガイドラインも載っている https://developer.android.com/design/ui/mobile/guides/layout-and-content/layout- basics?hl=ja
17. よりみちおしまい
18. 弊社でリリースしているモバイルアプリの一部(iOS)
19. モバイルアプリの開発といえばどんな言語・プラット フォームが思い浮かびますか？
20. モバイルアプリケーションの実現方式いろいろ フルネイティブ iOSをSwiftで書き、AndroidをKotlin/Javaで書く。一番オーソドックス。 マルチプラットフォーム FlutterやReact Nativeなど、iOSもAndroidも1つのプロジェクトで実装できるこ とを目指しているもの。Kotlin Multiplatformなど一部共通化もさかん WebView Webをアプリに埋め込むことで、Web側の資源を生かして開発する。上二つ とは独立している方式 今回はフルネイティブを主軸に話していきます!
21. モバイルアプリケーションの種類（Native v.s. Web) Webがすでにある場合や人員に制約がある場合、WebViewを選ぶことで工期短縮できる。 保守性の維持が難しいので、プロダクトや体制の状況から最適な意思決定をすることが大切。
22. Webとモバイルアプリの比較 モバイルアプリの特徴（Webとの違い）ってなんでしょう？ Slackに記述してみてください
23. Webとモバイルアプリの違い リッチな体験(定義は置いておいて) ダウンロードして動作する 各端末で使っているバージョンが違う（後方互換性を意識） ストレージを潤沢に扱える DeploymentTarget(iOS) / minSdkVersion(Android) プラットフォームのアップデート(Xcode Update, targetSdkVersion) 審査がある ...
24. Webとモバイルアプリの違い(1/2) リッチな体験 高FPSで滑らかな体験を実現しやすい デフォルトのコンポーネントもリッチで使い心地がよい ダウンロードして動作する それぞれの端末でダウンロードして動作する必要がある アプリサイズを小さくするのはとても重要 各端末で使っているバージョンが違う Webなら基本全員最新版を使っている（キャッシュをミスらなければ） アプリではある端末はv1.0を、ある端末はv1.2を使っているかもしれない リリースしてユーザーがアップデートしてくれる(できる)とは限らない APIのI/FやDBマイグレーションについて後方互換性に気をつける必要がある
25. Webとモバイルアプリの違い(2/2) ビルドのターゲットバージョン 動作するOS下限バージョンがあり、このバージョンによって使えるAPIが変化 iOS: Deployment Target Android: minSdkVersion プラットフォームのアップデート 年に一回SDKのアップデートがあるため、対応が必須 対応しないと審査提出が行えない 審査がある (iOSは特に)審査の影響でリリースできないことがある 各ガイドラインをよく読み込んで開発することが重要
26. アプリリリースまでの流れ 開発完了してから、早くて半日くらいでストア公開。 ストア公開しても、全てのユーザーがアクセス可能になるまで大体24hかかる。 そこからユーザーがアップデートするかどうかは別なので、端末に届くまでは長い。
27. モバイルアプリの特徴に立ち向かう これまで述べたような特徴に立ち向かうための取り組みをしています！ モニタリング: Crashlytics, API ログ監視 Feature Flag, AB テスト 段階リリース 年に1度のSDKアップデート 要件やステークホルダーへの説明を工夫する
28. モニタリング モバイルアプリはユーザーの手元で動作するため、エラーが発生しても気づきにくい クラッシュや不正なリクエストをモニタリングすることでバグの早期発見をします Crashlytics: アプリのクラッシュや怪しい挙動をモニタリング・調査 Datadog / APIログ監視: 意図しないエラーや不正なリクエストを確認 アプリの意図しない挙動に気づくチャンス API-Tとアプリ-Tで協力して調査を行っています
29. Feature Flag モバイルアプリは審査があるので、修正してもユーザーに届くまでに時間がかかります リリースのタイミングが重要な場合は、Feature Flagを活用します ビジネス上影響がありそうな機能の場合、ABテストを実施し問題があれば切り戻します // Flagのイメージ if(newFeatureIsEnabled()) { 新機能が入った処理() } else { 既存の処理() } MTTR(平均復旧時間)を短くするための取り組みとしても有用です◎
30. 段階リリース 簡単に切り戻しができないことは理解してもらえたと思います。 iOSもAndroidも各プラットフォーム上で段階リリース機能が用意されています。 問題があった場合にリリースを一時停止したり、サーバー負荷を緩やかにしたりと便利です。
31. 年に1度のSDKアップデート 両OSとも毎年SDKのアップデートがあり、期日までにSDKを新しくする必要があります。 SDKの変更によって挙動が変わることも多いので、対応はかなり大変で、 数ヶ月作業し、1回リリースを止めてQAをすることも多いです。 https://developer.android.com/google/play/requirements/target-sdk?hl=ja
32. 要件やステークホルダーへの説明を工夫する ユーザーのアプリバージョンが揃っていないことは当たり前の世界なので、 各ユーザーの見え方が異なることが発生しうります。 弊社ではクライアント（サロンさまなど）から掲載料を頂いて掲載するモデルが多いです。 「Webでは出るのに、どうしてアプリだと出ないの？」といった問い合わせもありえます。 事前に要件やリリース順・ステークホルダーへの説明を工夫して、 プロダクトのことを正しく理解していただけるように努めるのも重要です。
33. モバイルアプリの特徴に立ち向かう: まとめ 開発や運用が難しいポイント モバイルアプリは変更をすぐにユーザーの手元に適用できない 様々なテクニックを使って立ち向かう 切り戻ししやすく 何かあった場合の影響を小さくする（段階リリース） なるべくAPIに処理を寄せる アプリの安定稼働にはWebアプリやAPIとはまた違った工夫が必要です。 ここが面白い部分でもあり、日々改善を続けています！
34. モバイルアプリを取り巻く開発環境
35. モバイルアプリを取り巻く開発環境 近年大きく変化してきている これまで: iOS: UIKit + Xib Android: Android XML 見通しの悪いコードになりやすかった モダン(Declarative) iOS: SwiftUI(2019~) Android: Jetpack Compose(2019~) React(2013~)の影響がかなり大きい コンポーネント指向で見通しが良い
36. フルネイティブ以外の選択肢ってなんだろう？ マルチプラットフォーム: React Native(2015~), Flutter(2017~), Compose Multiplatform, Skip 1つのコードでiOSもAndroidも対応させたい Reactのように宣言的にコードを書きたい ハイブリッド: Kotlin Multiplatform(Stable: 2023) UIは各々実装しつつも、共通処理やドメインロジックを共通化したい サーバーと処理を同じにしたい Web: PWA Webはあるので、使いまわしたい！ （ビジネス・人材）要件に応じて戦略的に選択することが非常に重要!
37. 図でわかるシステムアーキテクチャ戦略
38. よくあるAPI付きのモバイルアプリ
39. APIに処理を寄せる 解決したいこと: 何が起こっているのかをわかり やすくしたい APIならログが見える テストをしやすくしたい 切り戻しやすくしたい OS間の二重実装を防ぎたい
40. KMMなどの技術で処理 を共通化する 解決したいこと: OS間の二重実装を防ぎたい APIに寄せるのとの違いは、(物理的に) どこに処理を置くか APIとKMMの成果物を共有しても◎
41. クロスプラットフォーム 技術の活用 解決したいこと: OS間の二重実装を防ぎたい モバイルアプリ開発者がいないが 作りたい
42. 技術の流れ（クロスプラットフォーム・宣言的UI) クロスプラットフォーム黎明期: Xamarin(2011~), PhoneGap(Cordova, 2008~)... 宣言的UI: React(2013~) 宣言的UI in mobile: React Native(2015~) ホットリロードでビルド不要。Web開発者でも作りやすい Flutter(2017~) ホットリロード付き、Dart。自前のエンジンで描画しているのが特徴 宣言的UI in mobile(by 公式): Swift UI / Jetpack Compose(2019~) 本格的に使うのは大体2~3年後(2021~2022)くらいから クロスプラットフォームに気軽に書きたい！という潮流と クライアントサイドのUIを宣言的UIで表現したいという潮流が入り混じっている
43. 技術の流れ（言語の進化) iOS SDK (2008, Objective-C) Android 1.0 (2008, Android Java) Go 1.0 (2012) Dart 1.0 (2013, 当時はJSの代替を目指していた) TypeScript 1.0 (2014) Swift 1.0 (2014) Kotlin 1.0 (2016) Dart 2.0 (2018) Kotlin Multiplatform(Mobile) beta(2022) Null安全性を取り入れ書き心地を少しずつ向上させてきた。相互運用性が次のテーマ？
44. モバイルアプリの技術選定について チームの状況にあわせて選択することが重要 Webエンジニアが多い？モバイルアプリエンジニアがいない？ iOSエンジニアが少ない？Androidエンジニアが多い？ どれだけ投資可能だろうか?（人員を確保できるか?） プロダクトの状況に合わせて選択することも重要 いつリリースしたい? Webの実装はすでにある? どういったユーザーがどんな環境で利用する? なぜモバイルアプリを作るのか？プロダクトがどういう状況なのか？がとても大切。 Howを知った上で、背景情報をしっかり得て最適な意思決定をしよう
45. モバイルアプリの面白いところ 使いやすいUIを作る環境が整備されていて、いいUIを追い求めやすい プラットフォームから新しい機能が毎年提供される ユーザーからの声が聞けるのが面白い 思ったよりもややこしくて楽しい！（ですよね？）
46. まとめ モバイルアプリ開発・運用の特徴について絞ってお伝えしました モバイルアプリと絡んだ仕事をする際に、ヒントになれば幸いです！ 今日・明日通してモバイルアプリ開発を楽しみましょう！