FAANS iOSアプリで GitHub Copilotを使い倒してみた 
 ZOZO Tech Meetup - iOS/Android (2023/07/11)
 株式会社ZOZO
 ブランドソリューション開発本部 フロントエンド部 FAANSブロック
 中島 頌太 Copyright © ZOZO, Inc. 1

© ZOZO, Inc. 株式会社ZOZO
 ブランドソリューション開発本部 フロントエンド部 
 FAANSブロック iOS担当 中島 頌太
 ● 1歳娘の子育て奮闘中
 ● 猫を飼っています
 ● AtCoderのコンテストに毎週参加
 2

© ZOZO, Inc. ● GitHub Copilotとは ● FAANS iOSアプリで導入箇所を検討 ● GitHub Copilotのインストール ● 検証 ① PreviewProviderで複数パターンの画面プレビューを作成 ② 条件が異なるテストケースの追加作成 ③ APIリクエストを行い、結果を受け取る処理を新規作成 ● まとめ 3 目次


© ZOZO, Inc. ● GitHub Copilotとは ● FAANS iOSアプリで導入箇所を検討 ● GitHub Copilotのインストール ● 検証 ① PreviewProviderで複数パターンの画面プレビューを作成 ② 条件が異なるテストケースの追加作成 ③ APIリクエストを行い、結果を受け取る処理を新規作成 ● まとめ 4 目次


© ZOZO, Inc. 5 GitHub Copilotとは コメントを入力するとGitHub Copilotがコードを提案 プロジェクト内で書かれたコードの文脈を理解し、リアルタイムで次に書くコードを提案してくれるAIペアプログラマー です

© ZOZO, Inc. ● GitHub Copilotとは ● FAANS iOSアプリで導入箇所を検討 ● GitHub Copilotのインストール ● 検証 ① PreviewProviderで複数パターンの画面プレビューを作成 ② 条件が異なるテストケースの追加作成 ③ APIリクエストを行い、結果を受け取る処理を新規作成 ● まとめ 6 目次


© ZOZO, Inc. FAANS iOSアプリで導入箇所を検討 7 View UIKit SwiftUI Presenter APIClient (Repository) Data ● UIKit/SwiftUIを利用 (UIKit 85%, SwiftUI 15%) ○ Storyboardは利用せずAutoLayoutをコードで実装 ■ 新規の画面においては部分的にSwiftUIを利用 ○ SwiftUIのPreviewProviderを利用し、Xcode上でプレビューを表示して開発 ● PresenterはViewからイベントを受け取り結果を出力 (Combineを利用) ● Presenterが持つAPIClientがAPIリクエストを行い、データ取得/更新等を行う

© ZOZO, Inc. FAANS iOSアプリで導入箇所を検討 8 ● UIKit/SwiftUIを利用 (UIKit 85%, SwiftUI 15%) ○ Storyboardは利用せずAutoLayoutをコードで実装 ■ 新規の画面においては部分的にSwift UIを利用 ○ Swift UIのPreviewProviderを利用し、Xcode上でプレビューを表示して開発 => 値によってデザインが変わるViewに対し、プレビューの提案をしてほしい ● PresenterはViewからイベントを受け取り結果を出力 (Combineを利用) => 異なる条件の単体テストの提案をしてほしい ● Presenterが持つAPIClientがAPIリクエストを行い、データ取得/更新等を行う => APIリクエストを行うコードの提案をしてほしい

© ZOZO, Inc. ● GitHub Copilotとは ● FAANS iOSアプリで導入箇所を検討 ● GitHub Copilotのインストール ● 検証 ① PreviewProviderで複数パターンの画面プレビューを作成 ② 条件が異なるテストケースの追加作成 ③ APIリクエストを行い、結果を受け取る処理を新規作成 ● まとめ 9 目次


© ZOZO, Inc. GitHub Copilotのインストール Xcodeでは公式にサポートされていないが、次の2つのツールで利用可能 ● Copilot for Xcode (今回の検証対象) ○ サードパーティ製のXcodeのプラグイン https://github.com/intitni/CopilotForXcode ● VSCode ○ 拡張機能をインストールして利用 ■ GitHub Copilot ■ Swift for Visual Studio Code 10

© ZOZO, Inc. Copilot for Xcode 11 Copilot for XcodeはXcodeのSource Editor Extensionで、次の3つの機能を提供 ● Suggestion (今回の検証対象) ○ GitHub Copilotでコードの提案 ● Chat ○ ChatGPTを利用 ● Prompt to Code ○ 既存のコードの改善 ○ コードの生成 引用元: https://github.com/intitni/CopilotForXcode

© ZOZO, Inc. ● GitHub Copilotとは ● FAANS iOSアプリで導入箇所を検討 ● GitHub Copilotのインストール ● 検証 ① PreviewProviderで複数パターンの画面プレビューを作成 ② 条件が異なるテストケースの追加作成 ③ APIリクエストを行い、結果を受け取る処理を新規作成 ● まとめ 12 目次


© ZOZO, Inc. FAANS iOSアプリで導入箇所を検討 13 ● UIKit/SwiftUIを利用 (UIKit 85%, SwiftUI 15%) ○ Storyboardは利用せずAutoLayoutをコードで実装 ■ 新規の画面においては部分的にSwift UIを利用 ○ Swift UIのPreviewProviderを利用し、Xcode上でプレビューを表示して開発 => 値によってデザインが変わるViewに対し、プレビューの提案をしてほしい ● PresenterはViewからイベントを受け取り結果を出力 (Combineを利用) => 異なる条件の単体テストの提案をしてほしい ● Presenterが持つAPIClientがAPIリクエストを行い、データ取得/更新等を行う => APIリクエストを行うコードの提案をしてほしい

© ZOZO, Inc. PreviewProviderで複数パターンの画面プレビューを作成 14 プロフィール情報を持つセル - 値によってデザインが変わる仕様 様々な値を設定してプレビューに表示 - isEditingがtrue/false - iconの有無

© ZOZO, Inc. PreviewProviderで複数パターンの画面プレビューを作成 セルの編集中を示す、isEditing = true のケースの提案 15

© ZOZO, Inc. PreviewProviderで複数パターンの画面プレビューを作成 アイコン画像があるケースの提案 16

© ZOZO, Inc. ● GitHub Copilotとは ● FAANS iOSアプリで導入箇所を検討 ● GitHub Copilotのインストール ● 検証 ① PreviewProviderで複数パターンの画面プレビューを作成 ② 条件が異なるテストケースの追加作成 ③ APIリクエストを行い、結果を受け取る処理を新規作成 ● まとめ 17 目次


© ZOZO, Inc. FAANS iOSアプリで導入箇所を検討 18 ● UIKit/SwiftUIを利用 (UIKit 85%, SwiftUI 15%) ○ Storyboardは利用せずAutoLayoutをコードで実装 ■ 新規の画面においては部分的にSwift UIを利用 ○ Swift UIのPreviewProviderを利用し、Xcode上でプレビューを表示して開発 => 値によってデザインが変わるViewに対し、プレビューの提案をしてほしい ● PresenterはViewからイベントを受け取り結果を出力 (Combineを利用) => 異なる条件の単体テストの提案をしてほしい ● Presenterが持つAPIClientがAPIリクエストを行い、データ取得/更新等を行う => APIリクエストを行うコードの提案をしてほしい

© ZOZO, Inc. 条件が異なるテストケースの追加作成 前提：ログインページでメールアドレスが nilの場合にエラーメッセージを出すテストが実装済み 次のケースでどのような提案がされるか検証 ● メールアドレスが空白のケース ● パスワードが nil, 空白のケース 実装済みのテスト 19

© ZOZO, Inc. 条件が異なるテストケースの追加作成 メールアドレスが空白のケースを追加作成 20

© ZOZO, Inc. 条件が異なるテストケースの追加作成 パスワードが nil, 空白のケースを追加作成 21

© ZOZO, Inc. ● GitHub Copilotとは ● FAANS iOSアプリで導入箇所を検討 ● GitHub Copilotのインストール ● 検証 ① PreviewProviderで複数パターンの画面プレビューを作成 ② 条件が異なるテストケースの追加作成 ③ APIリクエストを行い、結果を受け取る処理を新規作成 ● まとめ 22 目次


© ZOZO, Inc. FAANS iOSアプリで導入箇所を検討 23 ● UIKit/SwiftUIを利用 (UIKit 85%, SwiftUI 15%) ○ Storyboardは利用せずAutoLayoutをコードで実装 ■ 新規の画面においては部分的にSwift UIを利用 ○ Swift UIのPreviewProviderを利用し、Xcode上でプレビューを表示して開発 => 値によってデザインが変わるViewに対し、プレビューの提案をしてほしい ● PresenterはViewからイベントを受け取り結果を出力 (Combineを利用) => 異なる条件の単体テストの提案をしてほしい ● Presenterが持つAPIClientがAPIリクエストを行い、データ取得/更新等を行う => APIリクエストを行うコードの提案をしてほしい

© ZOZO, Inc. APIリクエストを行い、結果を受け取る処理を新規作成 PresenterがAPIClientクラスを持ち、APIリクエストを実施。過去に書いたことがあるリクエスト を別Presenterで書く場合に提案してほしい 24 Presenter APIClient (Repository) - StaffMemberを取得 - 商品一覧を取得 - コーディネート一覧を取得 - 売上等のランキングを取得 Presenterでは1度しか書かないが、過去に 別Presenterで書いたリクエスト処理を書く 場合に提案してくれたら嬉しい

© ZOZO, Inc. StaffMemberを取得するコードで期待した提案がされなかった 25 期待するコード 提案されたコード getStaffMemberという推測自体は悪 くないが、別の関数名になっている sendせずvalueに入れてほしかった

© ZOZO, Inc. ● GitHub Copilotとは ● FAANS iOSアプリで導入箇所を検討 ● GitHub Copilotのインストール ● 検証 ① PreviewProviderで複数パターンの画面プレビューを作成 ② 条件が異なるテストケースの追加作成 ③ APIリクエストを行い、結果を受け取る処理を新規作成 ● まとめ 26 目次


© ZOZO, Inc. まとめ 活用できるところ 同じようなコードを複数書く必要がある場面 - PreviewProviderで複数パターンの画面プレビューを作成 - 条件が異なるテストケースの追加作成 => GitHub Copilotの得意とするコード提案を活用できた。 活用が難しいところ 新規にコードを書く場面 - 新規にAPIリクエストを行うコードを実装 - 新規に画面を実装 (検証例を示していないがあまり良い結果が見込めなかった) => コメントの改善余地がありそう。 また、新規のコード生成はChatGPTが得意なので、GitHub Copilot Xに期待 27

No content