モバイル研修【MIXI 26新卒技術研修】

本スライドは、MIXIの2026年度新卒向け技術研修で使用された資料です。
　
MIXI 2026新卒技術研修
『モバイル研修』
　
───────────────────────────────
※皆様へのお願い※ 資料・動画・リポジトリのご利用について
───────────────────────────────
公開している資料や動画は、是非、勉強会や社内の研修などにご自由にお使いいただければと思いますが、以下のような場でのご利用はご遠慮ください。
- 受講者から参加費や授業料など金銭を集めるような場での利用
（会場費や飲食費など勉強会の運営に必要な実費を集める場合は問題ありません）
- 出典を削除または改変しての利用

Transcript

1. モバイル研修 2026.4.23 ©MIXI
2. 講師紹介 講師: 山田 伊織 • 2023年 入社 • 開発本部 たんぽぽ室 たんぽぽグループ • Android担当 講師: 周藤 光太郎 • 2025年 新卒入社 • 開発本部 たんぽぽ室 たんぽぽグループ • iOS担当 チューター : 追田 泰宏 • 2017年 新卒入社 • 開発本部 たんぽぽ室 たんぽぽグループ ©MIXI 2
3. 本日のゴール • iOS/Androidアプリ開発に必要な知識・概念を習得し、開発のハードルを下げる ©MIXI 3
4. 研修の進め方 • 本研修はiOS/Android両方のアプリ開発の基礎を学習できるように作成 • 研修は2パート ◦ 午前: 座学中心の講義 ▪ 1トピックに対してiOS/Android両方の知識を交互に学習 ◦ 午後: 手を動かすハンズオン ▪ 好きなプラットフォームを選択 ▪ 時間が余れば片方も取り組む ©MIXI 4
5. 目次 • • • • • • • • ©MIXI モバイルアプリのプラットフォーム KotlinとSwift 宣言的UI 非同期処理 アーキテクチャ テスト クロスプラットフォーム技術 AIエージェントツールとモバイルアプリ開発 5
6. モバイルアプリのプラットフォーム ©MIXI
7. Androidとは？ • Googleが開発したモバイル向けOS • スマートフォン以外のタブレット/TV/自動車などの様々なプラットフォームでも動作 • ベースとなるコードが公開 (Android Open Source Project : AOSP) ©MIXI https://source.android.com/ 7
8. iOSとは？ • Appleが開発したモバイル向けOS • iPhoneやiPad(iPadOS)などのApple製デバイスで動作 • 開発には Xcode など Apple のエコシステムを利用するのが基本 ©MIXI 8
9. Android Studio • IntelliJ IDEAをベースにGoogleにより開発されているIDE ◦ IntelliJ IDEA : JetBrainsにより開発されているJavaやKotlin等に特化したIDE • コード補完やデバッグ機能など便利なツールを内蔵 ◦ リファクタリング ◦ デバッガ ◦ App Inspector など ©MIXI 9
10. Xcode • Appleが提供する統合開発環境 • デバッガー、インタフェースビルダー、プロファイラーなどの便利な機能を統合している ©MIXI 10
11. アプリの実行 • IDEでアプリをビルド&インストール • 機能は制限されるが、仮想端末上でも実行可能 • Androidは.apk、iOSは.appを生成しインストール IDE .apk or .app ©MIXI 実機 or 仮想端末 11
12. アプリの実行 • IDEでアプリをビルド&インストール • 機能は制限されるが、仮想端末上でも実行可能 • Androidは.apk、iOSは.appを生成しインストール どちらも実行ファイルや画像などリソースファイルが内 包されている IDE .apk or .app ©MIXI AndroidManifest.xml classes.dex res/ ⋮ Info.plist MyApplication Assets.car ⋮ 12
13. アプリのリリース • Androidは.aab、iOSは.ipaを生成しストアに提出 • ユーザーのデバイスに最適化された実行ファイルがストアから配布 アプリストア IDE .aab or .ipa ©MIXI 13
14. アプリのリリース • Androidは.aab、iOSは.ipaを生成しストアに提出 • ユーザーのデバイスに最適化された実行ファイルがストアから配布 IDE アプリストア .aab ガイドラインに沿っているかチェックが入る or → 審査をクリアするとユーザーがインストール可能に .ipa Android: https://play.google/developer-content-policy iOS: https://developer.apple.com/app-store/review/guidelines/ ©MIXI 14
15. プロジェクトの作成（ Android） • Android Studioを開き、New Project > Empty Activityを選択 ©MIXI 15
16. プロジェクトの作成（ Android） アプリ名 一意なアプリID 通常、逆ドメインで設定 サポートする最低OSバージョン ©MIXI 16
17. OSバージョンと APIレベル（ Android） • APIレベル ◦ OSのバージョンと対応。コード上ではAPIレベルやコードネームを使う場合がある ©MIXI OSバージョン APIレベル コードネーム Android 16 36 BAKLAVA Android 15 35 VANILLA_ICE_CREAM Android 14 34 UPSIDE_DOWN_CAKE ︙ ︙ ︙ Android 1.0 1 BASE 17
18. プロジェクトの作成（ iOS） • Xcodeを開き、Create New Projectを選択 ©MIXI 18
19. プロジェクトの作成（ iOS） • iOS -> Appテンプレートを選択 • 他にもXcodeで開発可能な様々なテンプレートが用意されています ©MIXI 19
20. プロジェクトの作成（ iOS） アプリ名 一意なバンドルIDに利用される組織ID 通常、逆ドメインで設定 その他、テンプレートで利用する技術 を選択できる ©MIXI 20
21. プロジェクトの構成（ Android） アプリが使う権限や設定を 管理 アプリのソース置き場 アプリ内のテキストや画像な どのリソース置き場 テストコード置き場 ビルドの設定やライブラリの 管理をするファイル群 ©MIXI 21
22. プロジェクトビューの切り替え • 実際のフォルダ構造に近いビューに切り替え可 ©MIXI 22
23. エミュレータの接続（ Android） • Device Managerからエミュレータを作成 • ベースとなるデバイスを選択 • Finishでエミュレータの作成完了 ©MIXI 23
24. 実機の接続（ Android） • 開発者モードをONに ◦ https://developer.android.com/studio/debug/dev-options • USB or 無線で接続 ◦ USBの場合 ▪ 開発者向けオプションでUSBデバッグをON ◦ 無線の場合 ▪ 開発者向けオプション から ワイヤレスデバッグをON ▪ Pair Devices Using Wi-Fiをタップし、 二次元コードを読み込む ※ Android 11かつPCと同一のネットワークに接続 されている場合のみ利用できる ©MIXI 24
25. アプリのビルドとインストール（ Android） • 矢印ボタンをタップでビルド&インストールができる インストール先の端末を選 択 ©MIXI デバッグビルドの作成 &インストール 25
26. UIのプレビュー（ Android） • @PreviewでUIを即座に確認 ©MIXI 26
27. ログのモニタリング（ Android） • Logcatを使ってログの出力を閲覧できる キーワードで絞り込みできる 他にもログレベルやパッケージでも可 ©MIXI 27
28. 公式ドキュメント（ Android） • 他にも多くの機能をサポート ◦ https://developer.android.com/studio/intro ©MIXI 28
29. Xcodeの使い方 /デバッグ方法 • よく使うXcodeのショートカット ◦ Run: ⌘+R ▪ アプリをビルドし、選択したシミュレーターまたは実機で起動 ◦ Build: ⌘+B ▪ アプリをビルド ◦ Clean Build Folder: ⌘+⇧+K ▪ キャッシュされるビルド成果物をクリア ©MIXI 29
30. 実機の接続（ iOS） • USB で実機を接続 • 端末側で信頼設定を行う • Developer Mode を有効化する ◦ https://developer.apple.com/documentation/Xcode/enabling-developer-mode-on-a-device • 必要に応じて無線接続を有効化できる • Xcode で実行先として選択してビルド・実行する ©MIXI 30
31. Xcodeの使い方 /デバッグ方法 • アプリを実行するiOSシミュレーター、もしくは実機端末選択 接続されている実機端末や利用可能 なiOSシミュレーターが表示される ©MIXI 31
32. Xcodeの使い方 /デバッグ方法 • コンソールにログやprintの結果が表示される ログのタイプをフィルターでき る ログに表示する情報を選択で きる ©MIXI 32
33. Xcodeの使い方 /デバッグ方法 • Xcode Previews #Previewマクロで記述したView がキャンバスに表示される 引用：https://developer.apple.com/documentation/xcode/previewing-your-apps-interface-in-xcode ©MIXI 33
34. Xcodeの使い方 /デバッグ方法 • Xcode Playground #Playgroundマクロで記述したコード が自動でビジュアライズされ、 キャンバスに表示される 引用：https://developer.apple.com/documentation/Xcode/running-code-snippets-using-the-playground-macro ©MIXI 34
35. Xcodeの使い方 /デバッグ方法 ◦ Coding Intelligence ▪ Xcode内蔵のAIによる開発支援機能 AIにコードベースに 関してやAppleのド キュメントについて質 問をすることができ る。 またエラーの修正や エージェント機能を利 用したコード変更を 行える ©MIXI 引用：https://developer.apple.com/documentation/Xcode/writing-code-with-intelligence-in-xcode 35
36. KotlinとSwift ©MIXI
37. Kotlin • JetBrainsにより開発されている静的型付け言語 • 2017年にGoogleが公式にサポート（以前はJava） 特徴 Kotlinを前提として開発環境が整備さ れている 例 : Jetpack Compose • Javaとの互換性（既存のJavaコードを利用可） • Null安全（型による保証） • 簡潔さ =/ ?をつけてnullになりうることを示せる var name: String? =/ =.で安全に参照できる https://developer.android.com/compose user=.length ©MIXI 37
38. Swift • Appleが開発し、OSS化した言語 • Objective-Cの後継言語 • iOSアプリ開発以外での利用も広がっている 特徴 • 値セマンティクス, メモリ安全性、型推論、Null安全性（Swiftではnil） =/ ?をつけてnilになりうることを示せる var name: String? =/ =.で安全に参照できる user=.count ©MIXI 38
39. 宣言的UI ©MIXI
40. 宣言的UI • UI = f(state)の考え方に基づく現代的なUI実装手法 • 手続的な実装(命令的UI)に比べて、少ない記述量で直感的に理解しやすいコードが書きやすい 命令的 val buttonView = getButtonView() buttonView.text = "送信する" buttonView.setOnClickListener = onClick Viewを直接操作 ©MIXI 宣言的 Button( enabled = !isSent, onClick = onClick, ) { Text("送信する") } Viewを操作しない 40
41. Jetpack Compose • Composable関数でUIを記述 • テキストやボタン等のベーシックなComposable関数は公式ライブラリが提供 @Composable fun UserLabel(name: String, modifier: Modifier = Modifier) { Text( modifier = modifier, text = name, color = Color.White, ) } UserLabel("三串太郎", Modifier.background(Color.Blue)) ©MIXI 41
42. Composable関数 @Composableを付ける とComposable関数と認 識される @Composable fun UserLabel( 大文字始まりで命名 name: String, modifier: Modifier = Modifier, ) { Text( modifier = modifier, 戻り値はなし（Unit） text = name, Modifierは見た目や動作を修飾す るオブジェクト 例 : .backgroundは背景色を変更 color = Color.White, ) } ©MIXI 42
43. レイアウト用の Composable関数 • x, y, z方向にコンポーネントを並べるComposable関数が提供されている ◦ x方向 : Row ◦ y方向 : Column ◦ z方向 : Box x z y ©MIXI 43
44. Row • Composable関数を並べてRowに渡すだけ dp: px非依存のサイズを表す単位 Row( modifier = Modifier.padding(4.dp), horizontalArrangement = Arrangement.spacedBy(4.dp), ) { Square(SquareSize.Small, Color.Red) Square(SquareSize.Small, Color.Blue) } ©MIXI 44
45. Row • Composable関数を並べてRowに渡すだけ Rowの定義 Row( @Composable modifier = Modifier.padding(4.dp), inline fun Row( horizontalArrangement = Arrangement.spacedBy(4.dp), /** 省略 **/ ) { content: @Composable RowScope.() => Unit, ) Square(SquareSize.Small, Color.Red) Square(SquareSize.Small, Color.Blue) } ©MIXI Composable関数を引数として受け取る 45
46. ColumnとBox • Rowと同様にComposable関数を並べるだけ Column(/** 省略 **/) { Square(SquareSize.Small, Color.Red) Square(SquareSize.Small, Color.Blue) } Box(/** 省略 **/)) { Square(SquareSize.Large, Color.Red) Square(SquareSize.Small, Color.Blue) } ©MIXI 46
47. UIの更新方法 • Composable関数が再実行（Recomposition）されるとUIを更新できる 再実行されても値が初期化され ないように記憶 by: Delegated Property MutableState<Int>をIntのよう に扱える var count by remember { mutableIntStateOf(0) } StateオブジェクトにするとCompose が変更をトラッキング Button(onClick = { count=+ }) { Text("$count") } ©MIXI 47
48. SwiftUI struct AlbumDetail: View { var album: Album var body: some View { List(album.songs) { song in HStack { Image(systemName: "record.circle") VStack(alignment: .leading) { Text(song.title) Text(song.artist.name) .foregroundStyle(.secondary) } } } } } ©MIXI 48
49. SwiftUI • View に準拠した型の値を返すことで、SwiftUI の View を表現できる • View を返す関数や計算プロパティとして UI を部品化できる • some View は「具体的な型は隠すが、実際には1つの具体的な View 型を返す」という意味 ◦ SwiftUI の body でよく使われる ◦ 呼び出し側は具体的な型を意識せず使える ©MIXI 49
50. SwiftUI • • • • ©MIXI Text, TextField, Imageなどのような基本的なUIコンポーネントはSwiftUIによって提供される Text | Apple Developer Documentation TextField | Apple Developer Documentation Image | Apple Developer Documentation 50
51. SwiftUIのレイアウト用コンテナ View • HStack, VStack, ZStack • HStack | Apple Developer Documentation ◦ 横方向のレイアウトをコントロールするコンテナView • VStack | Apple Developer Documentation ◦ 縦方向のレイアウトをコントロールするコンテナView • ZStack | Apple Developer Documentation ◦ Viewの重なり（Z軸方向）のレイアウトをコントロールするコンテナView HStack { Text(“left”) Text(“right”) } ©MIXI 51
52. UIの更新方法 • SwiftUI では、状態が変化すると body が再評価され、UI が更新される。 @State で View 内に状態を保 持 count は再描画されても保持される struct CounterView: View { @State private var count = 0 var body: some View { Button(action: { count += 1 }) { Text("\(count)") } } body が再評価されて UI を更新 } ©MIXI 52
53. デザインシステム • プラットフォーム毎にガイドラインが公開 • ある程度まで自動的に遵守できるようにコンポーネントが提供 ©MIXI Material Design (CC BY 4.0) Liquid Glass / HIG https://m3.material.io/ https://developer.apple.com/design/new-design-gallery/ https://developer.apple.com/design/human-interface-guidelines 53
54. 非同期処理 ©MIXI
55. なぜ非同期処理が必要か？ • アプリはユーザー操作に対してクイックに反応できるようにしたい • UIを描画するスレッドで重い処理を実行すると、UXが悪化 → 実行に時間がかかる処理は別スレッドで実行する必要がある メインスレッド バックグラウンド スレッド ブロックしない バックグラウンドスレッド で処理 ©MIXI 55
56. Kotlin Coroutines • コルーチン : 中断・再開できる軽量なスレッドのようなもの • 同期処理と同じように非同期処理を書けるため理解しやすい コールバックで書かれたコード fun loadItem() { コルーチンで書かれたコード fun loadItem() { scope.launch { checkAuth { token => val token = checkAuth() fetchItem(token) { item => val item = fetchItem(token) showItem(item) showItem(item) } } } } ©MIXI } 56
57. コルーチンの使い方 suspend fun fetchItem(): Item fun loadItem() { • suspend関数: コルーチンを中断・再開できる • コルーチンスコープ（コルーチンの生存期間を管理する オブジェクト）の外では呼び出せない scope.launch { doSomethingBefore() fetchItem() doSomethingAfter() } • コルーチンは.launchで起動できる • scope : コルーチンスコープ ◦ 自作もできるが、ライフサイクルに紐付けて自動で キャンセルする便利なスコープが使える ▪ LifecycleScope ▪ ViewModelScope } ©MIXI 57
58. コルーチンの使い方 suspend fun fetchItem(): Item メインスレッド IOスレッド fun loadItem() { scope.launch { doSomethingBefore() fetchItem() doSomethingAfter() } } ©MIXI 58
59. コルーチンの使い方 suspend fun fetchItem(): Item メインスレッド IOスレッド fun loadItem() { スレッドの 切替 scope.launch { doSomethingBefore() fetchItem() コルーチンが 中断 doSomethingAfter() } } ©MIXI 59
60. コルーチンの使い方 suspend fun fetchItem(): Item メインスレッド IOスレッド fun loadItem() { scope.launch { doSomethingBefore() fetchItem() doSomethingAfter() } コルーチンが 再開 } ©MIXI 60
61. Swift Concurrency • Asynchronous function ◦ async キーワードが付与された関数。 ◦ 同期コンテキストからは直接呼べないので Task { await ... } などで async コンテキストに入る。 =/ Before listPhotos(inGallery: "Summer Vacation") { photoNames in let sortedNames = photoNames.sorted() let name = sortedNames[0] downloadPhoto(named: name) { photo in show(photo) } } ©MIXI =/ After let photoNames = await listPhotos(inGallery: "Summer Vacation") let sortedNames = photoNames.sorted() let name = sortedNames[0] let photo = await downloadPhoto(named: name) show(photo) func listPhotos(inGallery name: String) async => [String] { let result = =/ ==. some asynchronous networking code ==. return result } 61
62. Swift Concurrency • Task ◦ 非同期処理の実行単位 ◦ キャンセル・優先度・実行コンテキスト（例: actor）などの属性を持つ ◦ 構造化（親子関係あり）と 非構造化（独立して起動）の作り方がある ▪ 構造化: async let / withTaskGroup の addTask で作られる 子タスク ▪ 非構造化: Task { ... }（必要に応じて Task.detached { ... }） ◦ 親子関係がある場合、親のキャンセルが子に伝播し、スコープ内でライフサイクルが追跡される • Task group ◦ 複数の子タスクを動的に作成する場合に利用される仕組み ◦ 上記のTaskを並列に実行したい場合に利用できます ©MIXI 62
63. Swift Concurrency • Actor ◦ “An actor is an object that protects access to mutable data by forcing code to take turns accessing that data.” ▪ Concurrency | Documentation ▪ 変更可能なデータへのアクセスを制御するための言語機能 ▪ Classと同様に参照型であるが、同時に一つのタスクからしかアクセスできないという制約がある。 • これにより多くのデータレースをコンパイルタイムエラーとして検出できる。 ◦ Global Actor ▪ 実行されているプログラムにおいて一つしか存在しないActor • MainActorは言語機能の一部としてあらかじめ定義されるGlobal Actor（Mainスレッドと近い 意味で捉えられるが、同義ではない） ©MIXI 63
64. Swift Concurrency • Approachable Concurrency ◦ Swift Concurrencyをより多くの開発者が扱いやすくするための構想、またそれらのための実際に変更 されたデフォルト設定群 ◦ Xcode には Approachable Concurrency` というビルド設定があり、設定名は SWIFT_APPROACHABLE_CONCURRENCY。これは単一機能ではなく、複数の upcoming feature をまとめて有効化する。 ◦ Swift Package では、同等の設定を enableUpcomingFeature(...)で個別に指定する。upcoming feature は -enable-upcoming-feature <FeatureName> で段階的に導入できる仕組み。 ▪ 代表例として、yesNonisolatedNonsendingByDefaultなどの concurrency 関連 feature が含ま れる。 ©MIXI 64
65. アーキテクチャ ©MIXI
66. なぜアーキテクチャが必要か • アーキテクチャとは「どこにどんな処理を書くか」を定めたルール アーキテクチャなしにコードを書くと... • 変更の影響範囲が読めない • テストを書くのが難しい • 複数人での開発が困難 ©MIXI 66
67. アプリアーキテクチャ • Android公式ドキュメントで推奨されているアーキテクチャ UI層 Domain層 Data層 ©MIXI • データをUIに反映 • ユーザー操作を処理 • ビジネスロジック （サービスにおける重要なロジック）の処理 ※ オプショナルなので省略しても良い • 永続化されるデータの操作 • ビジネスロジックの処理 https://developer.android.com/topic/architecture 67
68. UI層の構成要素 UI層 UIコード イベント 状態 状態ホルダー • UIコード ◦ ユーザー操作をイベントとして状態ホルダーに送信し、状 態ホルダーから状態を受け取りUIを構築 ◦ Jetpack Compose/SwiftUIなどで実装 • 状態ホルダー ◦ イベントを受け取り、ロジックを通してDomain層/Data層 からデータを受け取る ◦ データを加工し状態に変換 データ Domain層/Data層 ©MIXI 68
69. Androidでの実装例 =/ UIコード @Composable fun ItemScreen(viewModel: ItemViewModel = viewModel()) { 状態を収集し UIを構築 val uiState by viewModel.uiState.collectAsStateWithLifecycle() /** 省略 **/ data class ItemUiState( } val items: List<Item> = emptyList(), val isLoading: Boolean = false, =/ 状態ホルダー（ViewModel） ) class ItemViewModel( private val repository: ItemRepository ) : ViewModel() { private val _uiState = MutableStateFlow(ItemUiState()) val uiState: StateFlow<ItemUiState> = _uiStateFlow.asStateFlow() /** 省略 **/ } ©MIXI 状態をUI Stateとして公開 StateFlow: データを流せるパイプのようなもの 69
70. iOSでの実装例 =/ UIコード struct ItemScreen: View { @State private var viewModel = ItemViewModel(repository: ItemRepository()) var body: some View { 状態を収集し UIを構築 /** 省略 **/ } struct ItemUiState { } var items: [Item] = [] =/ 状態ホルダー（ ViewModel） var isLoading = false @Observable final class ItemViewModel { private let repository: ItemRepository } var uiState = ItemUiState() init(repository: ItemRepository) { self.repository = repository } /** 省略 **/ } ©MIXI 70
71. Data層の構成要素 UI層 Data層 Repository Local DataSource ©MIXI • Repository ◦ 永続化されたデータの操作方法を公開 ◦ 上位層へはどこに永続化されているかは隠蔽 • LocalDataSource ◦ 端末内に永続化されるデータを操作 • RemoteDataSource ◦ サーバーに永続化されるデータを操作 Remote DataSource 71
72. Androidでの実装例 UI層 Data層 Local DataSourceで利用される代表的なライブラリ • ファイルストレージ → Jetpack DataStore • データベース → Room Repository Local DataSource ©MIXI Remote DataSource Remote DataSourceで利用される代表的なライブラリ • Retrofit • Ktor 72
73. iOSでの実装例 UI層 Data層 Local DataSourceで利用される例 • ファイルストレージ → FileManager / UserDefaults • データベース → SwiftData / Core Data Repository Local DataSource ©MIXI Remote DataSource Remote DataSourceで利用される例 • URLSession 73
74. iOSで利用される他のアーキテクチャの例 iOSアプリ開発においてはAppleが提唱する標準アーキテクチャは存在しないため、チームのニーズ等によって アーキテクチャが選択される • MVVM ◦ Androidなど他のプラットフォームでも使われるパターン • VIPER ◦ View / Interactor / Presenter / Entity / Router に責務を分割するアーキテクチャ • TCA(The Composable Architecture) ◦ Point-Free が開発しているアーキテクチャとそれを支えるライブラリ群 ◦ GitHub - pointfreeco/swift-composable-architecture: A library for building applications in a consistent and understandable way, with composition, testing, and ergonomics in mind. • MVC ◦ View / Controller / Model に役割を分ける古典的なパターン ©MIXI 74
75. テスト ©MIXI
76. テスト UIテスト • アプリの見た目の振る舞いに注目 したテスト • コードでUI要素を検証するテストや、スクリーンショットで比較するテストがある • 端末上でテストするケースが多いため、忠実度は高いが実行速度は遅め 単体テスト • アプリの一構成要素の振る舞い に注目したテスト • 状態ホルダーやRepositoryなどがテストの対象 • ホストマシン上でのテストで十分なケースが多いため、実行速度は速いが忠実度は低め ©MIXI 76
77. Androidアプリのテスト • テストが実行される環境はファイルの置き場所で変わる 端末上で実行するテスト ホストマシン上で実行するテスト ©MIXI 77
78. Androidアプリの単体テスト class ItemViewModelTest { @Test テストを安定させるためにフェイク fun testLoadItems() { val fakeItem = Item(1, "Apple") テスト対象 としてマーク val viewModel = ItemViewModel(repository = object : ItemRepository { override fun getItems() = listOf(fakeItem) }) viewModel.loadItems() テストしたいコードを呼び出し assertFalse(viewModel.uiState.isLoading) assertEquals(listOf(fakeItem), viewModel.uiState.items) } } ©MIXI assertで結果を検証 78
79. Androidアプリの UIテスト class ItemScreenTest { @get:Rule val composeTestRule = createComposeRule() @Test fun showsItemsTest() { Composable関数の呼び出し val items = Item(1, "Apple") val viewModel = ItemViewModel(FakeItemRepository(items = items)) composeTestRule.setContent { ItemScreen(viewModel = viewModel) } composeTestRule.onNodeWithTag("item_list").assertIsDisplayed() composeTestRule.onNodeWithText("Apple").assertIsDisplayed() } } ©MIXI テストタグをセット して検証 =/ ItemScreenの実装 LazyColumn(modifier = Modifier.testTag("item_list")) { /** 省略 **/ } 79
80. iOSアプリの単体テスト（ XCTest） import XCTest @testable import で対象モジュールの internal をテストから参照できる @testable import YourAppModule final class ItemViewModelTests: XCTestCase { func testLoadItems() async { let fakeItem = Item(id: 1, name: "Apple") let repository = FakeItemRepository(items: [fakeItem]) let viewModel = ItemViewModel(repository: repository) await viewModel.loadItems() テストしたいコードを呼び出し XCTAssertFalse(viewModel.isLoading) XCTAssertEqual(viewModel.items, [fakeItem]) } } XCTAssert...で結果を検証 ©MIXI 80
81. iOSアプリの単体テスト（ Swift Testing） import Testing @testable import で対象モジュールの internal をテストから参照できる @testable import YourAppModule struct ItemViewModelSwiftTestingTests { @Test func loadItems() async { let fakeItem = Item(id: 1, name: "Apple") let repository = FakeItemRepository(items: [fakeItem]) let viewModel = ItemViewModel(repository: repository) テストしたいコードを呼び出し await viewModel.loadItems() #expect(viewModel.isLoading == false) #expect(viewModel.items == [fakeItem]) } } ©MIXI #expect(...) で結果を検証 81
82. iOSアプリの UIテスト（ XCUITest） import XCTest final class ItemScreenUITests: XCTestCase { func testShowsItems() { let app = XCUIApplication() app.launch() アクセシビリティ識別子 を設定して検証 XCTAssertTrue(app.collectionViews["item_list"].exists) XCTAssertTrue(app.staticTexts["Apple"].exists) } } ©MIXI 82
83. クロスプラットフォーム技術 ©MIXI
84. Kotlin Multiplatform / Compose Multiplatform • KotlinでiOS/Webアプリを実装できるクロスプラットフォーム技術 • Kotlin Multiplatform : UI以外をKotlinで共通化可能 • Compose Multiplatform : UIも含めた全てをKotlinで共通化 https://kotlinlang.org/multiplatform/ ©MIXI https://kotlinlang.org/compose-multiplatform/ 84
85. クロスプラットフォーム • Skip ◦ ◦ • Swift SDK for Android ◦ ◦ ©MIXI https://skip.dev/ Swift / SwiftUI から iOS / Android のネイティブアプリを開発できるクロスプラットフォーム技術 Swift を Android 向けにビルドするための公式 SDK 単体で UI 共通化を行うものではなく、Skip の native mode でも利用される 85
86. AIエージェントツールとモバイルアプリ開発 ©MIXI
87. AIとAndroidアプリを作る ツール • Gemini in Android Studio ◦ https://developer.android.com/studio/gemini/overview ◦ Android Studio内でGeminiを利用できる機能 ◦ Firebase/Cloud Runなど外部サービスと連携 • Android CLI ◦ https://developer.android.com/tools/agents/android-cli ◦ AIエージェントを用いた開発効率向上のために設計されたCLIツール • 基本的にはアプリだろうとサーバーだろうと大きく変わらない • 静的解析ツールを組み合わせて、生成されるコードの質を担保 ◦ hooksで定義し、AI生成されたコードは常に静的解析済みの状態を維持 • アーキテクチャをコンテキストとして伝え、AI向けのガードレールを整備 ©MIXI 87
88. AIとiOSアプリを作る • Apple公式 ◦ ◦ • サードパーティー ◦ ◦ ©MIXI Coding Intelligence - Xcode ▪ ChatGPT in Xcode や Claude in Xcode を利用できる ▪ ローカルLLMも利用可能 Xcode MCP ▪ Giving external agents access to Xcode | Apple Developer Documentation MCPサーバーなどでどううまく既存のビルドの仕組みなどと連携させるかが肝になってくる ▪ GitHub - getsentry/XcodeBuildMCP: A Model Context Protocol (MCP) server and CLI that provides tools for agent use when working on iOS and macOS projects. • iOSアプリのビルド、iOSシミュレーターの操作、LLDBの操作などを行えるツール群が定義されている UI実装 ▪ Guide to the Figma MCP server – Figma Learn - Help Center 88
89. まとめ アプリはAndroid Studio/Xcodeで開発し、ストアには.aab/.ipaファイルをアップロード プラットフォーム毎にガイドラインが存在するので、遵守することが大事 プログラミング言語 : Kotlin/Swift（静的型付け言語） 宣言的UIフレームワーク : Jetpack Compose/SwiftUI 非同期処理 : Kotlin Coroutines/Swift Concurrency アーキテクチャ ◦ Androidでは推奨アーキテクチャがある ◦ iOSはアーキテクチャに多様性がある • テスト : 単体テスト UIテスト • クロスプラットフォーム技術 ◦ Kotlin Multiplatform, Compose Multiplatform ◦ Skip, Swift SDK for Android • AIエージェントツール ◦ 開発効率を向上させるmcpやcliが存在 • • • • • • ©MIXI 89
90. 参考資料 Android • Android Developers : https://developer.android.com/ • Material Design 3 : https://m3.material.io/ • Android Open Source Project : https://source.android.com/ • Kotlin Programming Language : https://kotlinlang.org/ iOS • • • • • ©MIXI https://www.swift.org/ https://developer.apple.com/ https://developer.apple.com/design/human-interface-guidelines/ https://developer.apple.com/jp/swiftui/ https://www.swift.org/documentation/ 90
91. ランチ休憩 ©MIXI
92. ハンズオン ©MIXI
93. ハンズオン • ©MIXI 注意点 ◦ これからAPIキーを配布しますが、通常、APIキーをアプリ内にハードコードすることはありません。 ハンズオンを簡便に行うための対応です。 ◦ gitignoreされた指定の設定ファイルに記述するようにしてください ◦ APIキーを書き込んだファイルをコミットしないように気をつけてください ◦ push等してしまった場合は入れ替えるので講師に声をかけてください ◦ Claude Codeがこちらのファイルを読まないようにする設定も入れていますが、あくまでbest effortな ので、セキュアなファイルを取り扱う時は適切な対策を講じてください 93
94. ©MIXI