1 新卒エンジニアが配属３ヶ 月でやってきたこと たつみ EC事業部カラーミーショップグループサービス基盤チーム 2020/10/16(金)

2 自己紹介 Section 1 2 隙自語

3 ● 音楽鑑賞 ○ 最近はSpotify Premiumに入って業務中は永遠と音楽鑑賞 ● ゲーム ○ Switchが当選してからは、Switchばかり ● モバイル（Android、iOS）開発が好き ○ 趣味で触るのは、フロント（Vue.js）が多い ● 詳細 ○ GitHub：Tatsumi0000 ○ Findy、LAPRAS 3 自己紹介

4 ● EC事業部 カラーミーショップグループ サービス基盤チーム ○ 名前にカラーミーと入っているが、EC事業部に関することなら何でもする チーム ○ 鋭意製作中のiOSアプリチームに参加 ■ 鋭意製作中のiOSアプリのことをプロジェクトXと呼ぶ ● 入社してから ○ ４〜７月まで新卒研修 ○ ５〜７月がエンジニア研修 ■ ５月：GTB ■ ６〜７月：Rails、フロントエンド、セキュリティ、機械学習、 読書会など… ● ペパボ新卒エンジニア研修 2020 Vol.1 ● ペパボ新卒エンジニア研修 2020 Vol.2 ● ペパボ新卒エンジニア研修 2020 Vol.3 4 自己紹介

5 今日お話すること Section 2 5 今日何話すの？

6 EC事業部 カラーミーショップグループ サービス基盤チームに配属されてから 3ヶ月間でやってきたことや、 プロジェクトXで使われている技術 6

7 配属されてから Section 3 7 配属当初の状況や、配属されてから何をした？

8 ● メンテされていない状況 ● 最新のXcodeでビルドできない！ ● ビルドできるXcodeが最新のmacで動かない！ ● プロジェクトXの実装に詳しい人がいない！ 8 配属当時

9 ● プロジェクトXチーム ○ ４名で活動 ○ ディレクター１名、iOSエンジニア２名、メンター１名 ○ 基本的にプロジェクトXの実装は自分１人で行い、実装や開発の進め方で 分からなかった場合に質問や実装をチームの方にお願い ○ PRのレビューはもう１名のiOSエンジニアの方にお願い ○ メンターは新卒である自分の相談事にのってくれる方 ● 毎日オンラインで昼会を行い、進捗やこれからの開発方針の共有 ● 実装や開発方針で悩んだらSlackやGHESのissueやPRを使って質問 ○ 基本的にSlackで質問 9 プロジェクトXの開発体制

10 ● 目標設定 ○ 最速でストア公開 ● 最新のXcodeでビルド出来るようにエラーを潰す ○ ライブラリアップデートによる使うメソッド名の変更 ● UIの更新をメインスレッドに変更 ● Swift5に対応 ○ テストが書かれていない箇所のユニットテストを書いた ○ プロジェクトXで使われているReactorKitの使い方をテストで書きながら覚 えていく 10 配属されてきてからやってきたこと

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 Main Thread Checker ● Edit Scheme… をクリック

13 13 Main Thread Checker ● 左のナビゲーション領域に警告を表示

14 14 Main Thread Checker ● ほとんどが、subscribeの中でのUI更新だったのでその前にメインスレッドで処理 するようにして解決

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 ● Action ○ ユーザの操作 ● State ○ Viewの状態 ● Reactor ○ ビジネスロジック ● View ○ データを表示 16 ReactorKit

17 ● Reactor ○ Mutation ■ Stateの更新内容 ○ mutate(): Actionを受取ってMutationに変換 ○ reduce(): Mutationを受取ってStateに変換 17 ReactorKit

18 ● ReactorKitの勉強方法 ○ 既存のコードでテストコードが書かれていない箇所を探し、テストを書いた り、解説記事やReactorKitリポジトリのサンプルを読む ■ Reactive Programmingの知識が全く無いので、かなり詰まりながら テストを書いたり新機能を追加 ○ 実装したい機能と似ているコードを探して一行ずつ何をしているか コメントを書いて処理の流れを追う ■ コメントを書いても内部の処理が理解できないときは、 printや debug()関数を挟んでデバッグ 18 ReactorKit

19 ● 実装サンプル ○ 初回起動時にお知らせのポップアップを出す ● 出てくる人 ○ HomeTableViewController.swift ■ UIを担当 ○ HomeTableViewReactor.swift ■ Actionや、Mutation、Stateを担当 19 ReactorKit

20 20 ReactorKit

21 21 ReactorKit

22 22 ReactorKit

23 23 ReactorKit

24 24 ReactorKit

25 25 ReactorKit

26 26 ReactorKit

27 27 ReactorKit

28 28 コメントの追加 ● extensionを使って機能を追加されていた ○ Quick Help inspectorが出てこない ○ 出てくるようにコメントを追加 ■ 関数の行で ⌘ + ⌥ + / でテンプレートを追加

29 29 jazzy ● Swift、Objective-Cのドキュメントを生成 ○ 先程示したコメントをもとにドキュメントをHTML形式で生成 ● GitHub Pagesで見れるようにした ○ CD出来るようにしたい…

30 30 ドキュメント ● PRのテンプレートを作成 ○ 新規でテンプレートを作成 ● リリース作業などが以前と少し変わったのでドキュメントの更新 ○ Firebase App Distributionでの配布方法を追記 ● 自分の考えをスクラップボックスに活動ログとしてメモ ○ Xcodeの操作やSwiftで分からないことや、悩みをメモ ● Slackで質問したら関連するissue/PRにメモ

31 31 直近の作業 ● Xcode12・iOS14・iPad対応 ○ iPadに対応していたが、一部レイアウトが崩れていたので修正 ○ Xcode12から今まで通りのCarthageの使い方ではだめだったので、 他のモバイルチームの方に教えてもらってスクリプトを導入 ● LicensePlistの導入 ○ 使用しているライブラリのライセンスなどの詳細を自動生成 ■ Run Scriptに追加 ● コードフォーマッタの導入 ○ 元々SwiftLintを使ってはいたが、フォーマッタとしては使っていない ■ commit時に差分のあるファイルだけフォーマット

32 32 SwiftLint ● mkdir .githooks ● touch .githooks/pre-commit ● chmod +x .githooks/pre-commit

33 最後に Section 4 33 （個人的に）これからやっていきたいことなど …

34 34 これから ● CI/CD環境の導入 ● Swift UIの対応 ● UIWebViewからWKWebViewへの置き換え ○ RichEditorViewの置き換え

35 35 最後に ● 一緒に働く仲間を募集中です！ ● 詳しくはQRコードかURLから御覧ください！ ● https://recruit.pepabo.com/