2024新卒技術研修_ios

DMM.comの24新卒エンジニア技術研修_ios研修の資料です。

Transcript

1. 24新卒技術研修 Yatter演習 iOS開発研修
2. Instructors 講師・フォロワー紹介
3. Instructors 中尾 俊介 プラットフォーム開発本部 第1開発部 講師・フォロワー 2021年に合同会社DMM.comに新卒入社し、ソフトウェアエンジニアとして『DMMポイン トクラブ』のiOSアプリ開発に従事。 翌年からiOSテックリードとしてDMMポイントクラブグループのモバイル開発をリードし、 技術戦略や開発生産性の改善にコミット。現在は同グループのiOS Team Leaderを務める。 社外向けiOS勉強会「DMM.swift」の立案＆運営、iOS関連のカンファレンスへのブース運 営など広報系の活動も最近注力しています。 メイン講師
4. Instructors 鳥嶋 晃次 デジタルコンテンツ開発本部 オンラインサロン開発部 講師・フォロワー 2022年DMM.com中途入社し、「DMMオンラインサロン」のiOSアプリ開発に従事。現在、 ReactNativeで実装されたアプリをSwiftに移行中。最近はプロダクト開発に関する知識や、 UXを意識したアプリケーション開発などに注力している。登壇なども積極的に活動してま す。 サブ講師
5. Instructors 柳元 俊輝 プラットフォーム開発本部 第1開発部 講師・フォロワー 2023年に合同会社DMM.comに新卒入社。iOSアプリ開発を行う傍ら、サーバーサイド開発 も行う。DMMオンラインサロン(内定者アルバイト) → DMMポイントクラブ(現在)。 事業部間のiOSエンジニアが交流する社内向け勉強会「iOS Lunch」の立ち上げ・運営や、 社外向け勉強会「DMM.swift」の運営サポートに取り組む。 フォロワー
6. Introduction iOS開発研修について
7. iOS開発研修について 本研修の内容 • モバイルアプリの開発について学ぶ • iOSアプリの仕組みや技術について学ぶ • iOSアプリの基礎的な開発技術を学ぶ
8. 本研修の前提 研修を始める前に 前提 本研修は主に基礎レベルのiOSアプリ開発技術について解説します。 大多数の受講者がモバイルアプリ開発（iOS開発）について未経験であることか ら、応用・実践レベル以上の詳細な技術の話は含みません。 ゴール 本研修のゴールは受講者の習熟レベルに応じて設定しています。 # 初学者の方 トレーニングコンテンツ『iOS Exercise』を通して、簡単なiOSアプリが作れる # 実務経験者・専門領域とする方 Yatter開発を通して、アーキテクチャや技術の選定を元に、スケーラビリティを 考慮した実践的なiOSアプリが作れる
9. 本研修の流れ 全体スケジュール Day 1 Day 2 Day 3 Day 4 Day 5 講義 演習 iOS Exercise Yatter開発 ※早い人は演習終わり次第Yatter入ってもらってOKです
10. Yatter（iOS）開発演習 Day1 午前 1. Introduction: iOS開発研修について 2. 講義1: モバイルアプリ（iOS）開発の世界 3. 講義2: iOSアプリ開発入門 午後 1. iOS Exercise
11. Yatter（iOS）開発演習 Day2 午前 午後 1. iOS Exercise 1. Stand-up
12. Yatter（iOS）開発演習 Day3 午前 午後 1. iOS Exercise or Yatter開発 1. Stand-up
13. Yatter（iOS）開発演習 Day4 午前 午後 1. Yatter開発 1. Stand-up
14. Yatter（iOS）開発演習 Day5 午前 午後 1. Yatter開発 1. Stand-up
15. 本研修の流れ 質問について 分からないことは気軽にSlack投げてください @24grad_ios_instructor 今年は特に人数が多いので、同じ質問がたくさん来たら翌日のStand-upで解説したい と思っています。遠慮なく雑に質問投げてください。 講師側からも解説してほしい質問のアンケートを投げたりするかもです。 口頭でも質問対応します VC: 講師フォロワー待機部屋 VCに講師・フォロワー常駐しています。Discord: generalに講師・フォロワーいない時 はSlackに投げていただければと思います。基本います。
16. FAQ
17. 【講義】モバイルアプリ開発の世界 @noa4021J
18. モバイルアプリ開発の世界 目次 • モバイルプラットフォーム、モバイルOSの変遷 • モバイルアプリの種類 • DMMで開発しているモバイルアプリ 1 モバイルアプリとは何か • Webアプリ開発とモバイルアプリ開発の違い • iOSアプリの仕組みと構造 2 モバイルアプリの開発について知る
19. モバイルアプリ開発の世界 ターゲットとゴール 想定するターゲット モバイルアプリを 開発したことがない方 講義のゴール モバイルアプリ開発の 全体の流れを掴むこと
20. 1 モバイルアプリとは何か
21. Q. モバイルアプリとは
22. Q. モバイルアプリとは A. モバイルオペレーティングシステムにおける ネイティブアプリケーション ※ネイティブアプリとは特定のオペレーティングシステム（OS）上で 直接実行可能なプログラムで構成されたソフトウェアのこと
23. モバイルアプリとは何か 一般的なモバイルオペレーティングシステム
24. ~ 2010 2010 ~ モバイルアプリとは何か 一般的なモバイルオペレーティングシステム
25. モバイルアプリとは何か 一般的なモバイルオペレーティングシステム ~ 2012 2012 ~ https://www.statista.com/statistics/272698/global-market-share-held-by-mobile-operating-systems-since-2009/
26. モバイルアプリとは何か 一般的なモバイルオペレーティングシステム ~ 2012 2012 ~ https://www.statista.com/statistics/272698/global-market-share-held-by-mobile-operating-systems-since-2009/
27. モバイルアプリとは何か iOS vs Android 新興国・途上国 主要先進国
28. モバイルアプリとは何か iOS vs Android 新興国・途上国 主要先進国
29. モバイルアプリとは何か iOS vs Android https://101010.fun/posts/mobile-share-ios-android.html
30. モバイルアプリとは何か モバイルアプリの種類 • ネイティブアプリ • ハイブリッドアプリ • ガワネイティブアプリ • PWA • クロスプラットフォームアプリ etc …
31. モバイルアプリとは何か モバイルアプリの種類 • ネイティブアプリ • ハイブリッドアプリ • ガワネイティブアプリ • PWA • クロスプラットフォームアプリ etc …
32. モバイルアプリとは何か モバイルアプリの種類 ネイティブアプリ ハイブリッドアプリ ガワネイティブアプリ PWA クロスプラット フォームアプリ Webアプリ モバイル端末に搭載されたブラウザエンジン 上で動作しモバイルアプリのように振る舞う WebViewを用いたネイティブとWebの統合 ネイティブ言語とは異なる言語やフレームワ ークを用いて、共通のコードから複数のプラ ットフォーム向けに構築されたネイティブア プリ
33. モバイルアプリとは何か モバイルアプリの種類 ネイティブアプリ ハイブリッドアプリ ガワネイティブアプリ PWA クロスプラット フォームアプリ Webアプリ モバイル端末に搭載されたブラウザエンジン 上で動作しモバイルアプリのように振る舞う WebViewを用いたネイティブとWebの統合 ネイティブ言語とは異なる言語やフレームワ ークを用いて、共通のコードから複数のプラ ットフォーム向けに構築されたネイティブア プリ
34. モバイルアプリとは何か ネイティブアプリ { API } { … } URL Resource
35. モバイルアプリとは何か ハイブリッド、ガワネイティブ { API } { … } URL URL Resource Rendering
36. モバイルアプリとは何か PWA { API } { … } URL URL Resource Rendering
37. モバイルアプリとは何か モバイルアプリの種類 ネイティブアプリ ハイブリッドアプリ ガワネイティブアプリ PWA クロスプラット フォームアプリ Webアプリ モバイル端末に搭載されたブラウザエンジン 上で動作しモバイルアプリのように振る舞う WebViewを用いたネイティブとWebの統合 ネイティブ言語とは異なる言語やフレームワ ークを用いて、共通のコードから複数のプラ ットフォーム向けに構築されたネイティブア プリ
38. モバイルアプリとは何か DMMが配信しているiOSアプリ(一部) https://apps.apple.com/jp/developer/dmm-com-llc/id373765747 https://apps.apple.com/jp/developer/exnoa-llc/id1371832053 DMM.com EXNOA
39. 2 モバイルアプリの開発に ついて知る
40. モバイルアプリの開発について知る Webアプリとの違い 動作環境 機能 依存性 開発 { … }
41. モバイルアプリの開発について知る 動作環境 Web 環境 アクセス パフォーマンス モバイル ブラウザエンジン モバイル端末、OS オンライン必須 オフラインでも動作可 ブラウザエンジンに依存 デバイスの性能に依存
42. モバイルアプリの開発について知る Webアプリとの違い 動作環境 機能 依存性 開発 { … }
43. モバイルアプリの開発について知る 機能（ユーザーエクスペリエンス） Web カメラ/ライブラリ 位置情報 その他 ネイティブ機能 モバイル 制限あり 利用可能 制限あり 利用可能 制限あり 利用可能
44. モバイルアプリの開発について知る 機能（顧客リーチ） Web 通知機能 プロモーション フィードバック モバイル 無しまたは外部 （PWAのみWebプッシュ） プッシュ通知 無しまたは外部 ストア内プロモーション 無しまたは外部 ストアレビュー
45. モバイルアプリの開発について知る Webアプリとの違い 動作環境 機能 依存性 開発 { … }
46. モバイルアプリの開発について知る 開発 Web 設計思想 検証 デプロイ モバイル 無い Human Interface, Guidlines Material Design, Android Architecture Guide ブラウザ シミュレータと実機 審査無（主導権あり） 審査有（主導権なし）
47. モバイルアプリの開発について知る Webアプリとの違い 動作環境 機能 依存性 開発 { … }
48. モバイルアプリの開発について知る 依存性 Web 依存先 ガイドライン 手数料 モバイル 無し ※ブラウザの仕様に若干依存 AppStore / Google Play 無し AppStore Review Guidlines Google Play Policy 無し ※導入する決済システムの手数料に依存 有り ※AppStore: 30%, GooglePlay: 30%
49. モバイルアプリの開発について知る iOSアプリの仕組みと構造 iOSアプリをAppStoreにアップロードする際には、 「IPAファイル」を提出する XcodeからArchiveを実行すると生成されるファイル IPA = iOS Package Archive
50. モバイルアプリの開発について知る iOSアプリの仕組みと構造 ←実はただのZipファイル 🫢 iOSアプリをAppStoreにアップロードする際には、 「IPAファイル」を提出する XcodeからArchiveを実行すると生成されるファイル IPA = iOS Package Archive
51. モバイルアプリの開発について知る iOSアプリの仕組みと構造 Payload/AppName.appが、 実際にAppStoreからインストー ルされる(であろう) アプリケーションバンドル。
52. モバイルアプリの開発について知る iOSアプリの仕組みと構造 アプリがiOSデバイスにインストールされると、 アプリは自身専用のサンドボックス環境を構築する。 Sample https://developer.apple.com/library/archive/documentation/FileManagement/Conceptual/FileSystemProgrammingGuide/FileSystemOverview/FileSystemOverview.html Sample.app Bundle Container Data Container iCloud Container Documents Library Temp Sample app Sandbox
53. モバイルアプリの開発について知る iOSアプリの仕組みと構造 アプリがiOSデバイスにインストールされると、 アプリは自身専用のサンドボックス環境を構築する。 https://developer.apple.com/library/archive/documentation/FileManagement/Conceptual/FileSystemProgrammingGuide/FileSystemOverview/FileSystemOverview.html Sample.app Bundle Container Data Container iCloud Container Sample app Sandbox Library Temp 動画ファイル 音声ファイル 文書ファイル 文書ファイル Sample Documents Download Save Backup etc …
54. 休憩
55. 【講義】iOSアプリ開発入門 @k-torishima
56. iOSアプリ開発入門 Agenda 1. 開発環境 2. 開発言語 3. フレームワーク 4. テスト 5. パッケージ管理 6. CI/CD
57. iOSアプリ開発入門 開発環境 Xcode • 2003年~ • 現在 ver15.x • NeXT社時代の資産を受け継がれ開 発されたIDE • https://www.youtube.com/watch?v= dl0CbKYUFTY • macOS, iOS, iPadOS, watchOS, tvOS, visionOS
58. iOSアプリ開発入門 開発言語 Swift • 2014年6月〜 • var 5.10 • https://github.com/apple/swift Objective-C • 1984年 • 現在はほとんど使うことはないが、 ごく稀に特定のAPIを触る時に使う 場合がある
59. iOSアプリ開発入門 フレームワーク SwiftUI • 宣言型シンタックス • シンプルにUIを構築できる UIKit • SwiftUIが出る以前は最も使われていた フレームワーク • 手続き型 その他 • AppKit • WatchKit • RealityKit
60. iOSアプリ開発入門 SwiftUI 宣言型UIフレームワーク • React, Vue.js, • JetpackCompose, Flutter Single Source of Truth • 信頼できる唯一の情報源 • https://developer.apple.com/videos/ play/wwdc2019/226/ State • Stateを監視しViewを更新したり変 化させたりする
61. iOSアプリ開発入門 UIKit UIフレームワーク • Interface Builderを使ったUIの構築 ◦ Storyboard, Xib • CodeベースでのUI構築 ViewController • 手続き的に実装を行う Storyboard, Xib • Interface Builderを使って視覚的に UIを構築していく • Android StudioのLayoutEditor
62. iOSアプリ開発入門 テスト XCTest • Appleが提供するテストフレームワーク • Xcodeで実行することができる • ユニットテスト User Interface Tests （XCUI〜） • アプリのUIテストAPI • Dataを変更した時にUIが意図した通りに 応答するか確認できる • 人が操作したようなテストを実行するこ とができる
63. iOSアプリ開発入門 パッケージ管理 Swift Package Manager (SwiftPM) • Apple公式のパッケージマネージャー • 依存関係の管理、外部ライブラリ導入、アプリのマルチモジュール化 • https://www.swift.org/documentation/package-manager/ CocoaPods • ライブラリ管理ツール、Ruby • 最近ではSwiftPMで対応していないライブラリを使う場合などに使うことが 多い Carthage （カーセッジ、カルタゴ） • ライブラリ管理ツール、Swift • 以前はCocoaPodsの弱点をCarthageを使うことで解決したりしていたが、 SwiftPMが支流になったことで出番は少なくなってきた
64. iOSアプリ開発入門 CI/CD Xcode cloud • Appleが提供するCI/CDサービス • WWDC2021で発表された最近のサービス • ビルド、テスト、配信など行う • 他社サービスを使うより、トータルコストが低い Bitrise • ビルド、テスト、配信 • 独自のworkflowを作成可能 • GUI操作でのworkflow作成、ymlでの作成も可能
65. 演習について What’s iOS Exercise
66. iOS Exerciseについて 演習の流れ Chapter 1 Counter Chapter 2 Todo Chapter 3 Todo Online Chapter 4 Yatter iOS • Xcodeの基本操作 • Swift UI • 同期/非同期処理 • 外部表現変換 • データ永続化 • ネットワーク通信 Challenge!
67. iOS Exercise iOS Exerciseは下記の構成になっています。 1. Introduction 2. Tutorials iOS Exerciseの導入資料です。演習に 必要な環境構築の手順や、iOS開発につ いての簡単なコラムを記載していま す。演習のはじめには、まずはこちら を読んでください。 iOS Exerciseの本編です。全体で4部構 成のチュートリアルコンテンツになっ ています。Chapter 1から順番に進めれ ば、最後のYatterで必要な知識が網羅さ れているように設計しています。
68. iOS Exerciseの ドキュメントを立ち上げる 以下の手順で、iOS Exerciseのドキュメント を立ち上げてください。 1. XcodeでDocumentsフォルダを開く 2. メニューバーから Products > Build Documentation を実行する 3. 別ウィンドウでドキュメントが立ち 上がるのを確認する 研修中にドキュメントを読む場合は、この 手順で立ち上げを行ってください。
69. Let’s Get Started ! Introductionの内容に沿って、各自iOS Exerciseを進めてください。
70. Closing
71. DMMのiOS開発で知りたいことがあれば下記まで Contact us # team-ios DMM Mobile
72. DMM iOS開発 DMM.swift https://dmm.connpass.com/event/303187/
73. iOS研修お疲れ様でした！ 引き続き次の研修も頑張ってください