MobileTechConference-1016

10月16日に開催されたGMOペパボ主催のモバイルテックカンファレンスの発表資料です。
https://pepabo.connpass.com/event/190760/
タイトルは、「新卒エンジニアが配属３ヶ月でやってきたこと」です。

スライド内のリンク
GitHub：https://github.com/tatsumi0000/
Findy：https://findy-code.io/share_profiles/7sFG5dQp493tw
LAPRAS：https://lapras.com/public/BWMPFF7
ペパボ新卒エンジニア研修 2020 Vol.1：https://tech.pepabo.com/2020/08/31/newcomer_training_vol1/
ペパボ新卒エンジニア研修 2020 Vol.2：https://tech.pepabo.com/2020/09/08/newcomer_training_vol2/
ペパボ新卒エンジニア研修 2020 Vol.3：https://tech.pepabo.com/2020/09/14/newcomer_training_vol3/
swift初心者がiOS13対応でメインスレッド以外でUI更新をしてクラッシュさせてしまった話：https://qiita.com/rymiyamoto/items/7ace750172b84a2ff809
MainThread Checker in XCode：https://medium.com/@trivediniki94/main-thread-checker-in-xcode-8b9f3f8ce10
ReactorKit/ReactorKit：https://github.com/ReactorKit/ReactorKit
ReactorKit(Flux + Reactive Programming)を学ぶ1 入門編：https://qiita.com/yusuga/items/e793963ff51ee493497a
GMOペパボ株式会社採用サイト：https://recruit.pepabo.com/

Transcript

1. 1 新卒エンジニアが配属３ヶ 月でやってきたこと たつみ EC事業部カラーミーショップグループサービス基盤チーム 2020/10/16(金)
2. 2 自己紹介 Section 1 2 隙自語
3. 3 • 音楽鑑賞 ◦ 最近はSpotify Premiumに入って業務中は永遠と音楽鑑賞 • ゲーム ◦ Switchが当選してからは、Switchばかり • モバイル（Android、iOS）開発が好き ◦ 趣味で触るのは、フロント（Vue.js）が多い • 詳細 ◦ GitHub：Tatsumi0000 ◦ Findy、LAPRAS 3 自己紹介
4. 4 • EC事業部 カラーミーショップグループ サービス基盤チーム ◦ 名前にカラーミーと入っているが、EC事業部に関することなら何でもする チーム ◦ 鋭意製作中のiOSアプリチームに参加 ▪ 鋭意製作中のiOSアプリのことをプロジェクトXと呼ぶ • 入社してから ◦ ４〜７月まで新卒研修 ◦ ５〜７月がエンジニア研修 ▪ ５月：GTB ▪ ６〜７月：Rails、フロントエンド、セキュリティ、機械学習、 読書会など… • ペパボ新卒エンジニア研修 2020 Vol.1 • ペパボ新卒エンジニア研修 2020 Vol.2 • ペパボ新卒エンジニア研修 2020 Vol.3 4 自己紹介
5. 5 今日お話すること Section 2 5 今日何話すの？
6. 6 EC事業部 カラーミーショップグループ サービス基盤チームに配属されてから 3ヶ月間でやってきたことや、 プロジェクトXで使われている技術 6
7. 7 配属されてから Section 3 7 配属当初の状況や、配属されてから何をした？
8. 8 • メンテされていない状況 • 最新のXcodeでビルドできない！ • ビルドできるXcodeが最新のmacで動かない！ • プロジェクトXの実装に詳しい人がいない！ 8 配属当時
9. 9 • プロジェクトXチーム ◦ ４名で活動 ◦ ディレクター１名、iOSエンジニア２名、メンター１名 ◦ 基本的にプロジェクトXの実装は自分１人で行い、実装や開発の進め方で 分からなかった場合に質問や実装をチームの方にお願い ◦ PRのレビューはもう１名のiOSエンジニアの方にお願い ◦ メンターは新卒である自分の相談事にのってくれる方 • 毎日オンラインで昼会を行い、進捗やこれからの開発方針の共有 • 実装や開発方針で悩んだらSlackやGHESのissueやPRを使って質問 ◦ 基本的にSlackで質問 9 プロジェクトXの開発体制
10. 10 • 目標設定 ◦ 最速でストア公開 • 最新のXcodeでビルド出来るようにエラーを潰す ◦ ライブラリアップデートによる使うメソッド名の変更 • UIの更新をメインスレッドに変更 • Swift5に対応 ◦ テストが書かれていない箇所のユニットテストを書いた ◦ プロジェクトXで使われているReactorKitの使い方をテストで書きながら覚 えていく 10 配属されてきてからやってきたこと
11. 11 • iOS13対応からUIの更新はメインスレッドでしなければならない*1 ◦ クラッシュするまで気づきにくい… ◦ Main Thread Checkerを有効にすることで検知しやすく • Main Thread Checkerとは ◦ メインスレッドで呼ぶべき処理を実行時にチェック*2 11 UIの更新をメインスレッドに変更 *1 swift初心者がiOS13対応でメインスレッド以外で UI更新をしてクラッシュさせてしまった話 https://qiita.com/rymiyamoto/items/7ace750172b84a2ff809 *2 MainThread Checker in XCode https://medium.com/@trivediniki94/main-thread-checker-in-xcode-8b9f3f8ce10
12. 12 • 設定方法 ◦ 12 Main Thread Checker • Edit Scheme… をクリック
13. 13 13 Main Thread Checker • 左のナビゲーション領域に警告を表示
14. 14 14 Main Thread Checker • ほとんどが、subscribeの中でのUI更新だったのでその前にメインスレッドで処理 するようにして解決
15. 15 • ReactorKitとは単方向ストリームのアーキテクチャを構築するためのSwiftアプリ ケーションのためのフレームワーク*1 ◦ FluxとReactive Programmingの組み合わせ*2 ◦ RxSwift、RxCocoaが使われている 15 ReactorKit *1 ReactorKit/ReactorKit https://github.com/ReactorKit/ReactorKit *2 ReactorKit(Flux + Reactive Programming)を学ぶ1 入門編 https://qiita.com/yusuga/items/e793963ff51ee493497a
16. 16 • Action ◦ ユーザの操作 • State ◦ Viewの状態 • Reactor ◦ ビジネスロジック • View ◦ データを表示 16 ReactorKit
17. 17 • Reactor ◦ Mutation ▪ Stateの更新内容 ◦ mutate(): Actionを受取ってMutationに変換 ◦ reduce(): Mutationを受取ってStateに変換 17 ReactorKit
18. 18 • ReactorKitの勉強方法 ◦ 既存のコードでテストコードが書かれていない箇所を探し、テストを書いた り、解説記事やReactorKitリポジトリのサンプルを読む ▪ Reactive Programmingの知識が全く無いので、かなり詰まりながら テストを書いたり新機能を追加 ◦ 実装したい機能と似ているコードを探して一行ずつ何をしているか コメントを書いて処理の流れを追う ▪ コメントを書いても内部の処理が理解できないときは、 printや debug()関数を挟んでデバッグ 18 ReactorKit
19. 19 • 実装サンプル ◦ 初回起動時にお知らせのポップアップを出す • 出てくる人 ◦ HomeTableViewController.swift ▪ UIを担当 ◦ HomeTableViewReactor.swift ▪ Actionや、Mutation、Stateを担当 19 ReactorKit
20. 20 20 ReactorKit
21. 21 21 ReactorKit
22. 22 22 ReactorKit
23. 23 23 ReactorKit
24. 24 24 ReactorKit
25. 25 25 ReactorKit
26. 26 26 ReactorKit
27. 27 27 ReactorKit
28. 28 28 コメントの追加 • extensionを使って機能を追加されていた ◦ Quick Help inspectorが出てこない ◦ 出てくるようにコメントを追加 ▪ 関数の行で ⌘ + ⌥ + / でテンプレートを追加
29. 29 29 jazzy • Swift、Objective-Cのドキュメントを生成 ◦ 先程示したコメントをもとにドキュメントをHTML形式で生成 • GitHub Pagesで見れるようにした ◦ CD出来るようにしたい…
30. 30 30 ドキュメント • PRのテンプレートを作成 ◦ 新規でテンプレートを作成 • リリース作業などが以前と少し変わったのでドキュメントの更新 ◦ Firebase App Distributionでの配布方法を追記 • 自分の考えをスクラップボックスに活動ログとしてメモ ◦ Xcodeの操作やSwiftで分からないことや、悩みをメモ • Slackで質問したら関連するissue/PRにメモ
31. 31 31 直近の作業 • Xcode12・iOS14・iPad対応 ◦ iPadに対応していたが、一部レイアウトが崩れていたので修正 ◦ Xcode12から今まで通りのCarthageの使い方ではだめだったので、 他のモバイルチームの方に教えてもらってスクリプトを導入 • LicensePlistの導入 ◦ 使用しているライブラリのライセンスなどの詳細を自動生成 ▪ Run Scriptに追加 • コードフォーマッタの導入 ◦ 元々SwiftLintを使ってはいたが、フォーマッタとしては使っていない ▪ commit時に差分のあるファイルだけフォーマット
32. 32 32 SwiftLint • mkdir .githooks • touch .githooks/pre-commit • chmod +x .githooks/pre-commit
33. 33 最後に Section 4 33 （個人的に）これからやっていきたいことなど …
34. 34 34 これから • CI/CD環境の導入 • Swift UIの対応 • UIWebViewからWKWebViewへの置き換え ◦ RichEditorViewの置き換え
35. 35 35 最後に • 一緒に働く仲間を募集中です！ • 詳しくはQRコードかURLから御覧ください！ • https://recruit.pepabo.com/