GitHub Copilotを使い倒してみた / Use GitHub Copilot for Xcode

Transcript

1. FAANS iOSアプリで GitHub Copilotを使い倒してみた 
 ZOZO Tech Meetup - iOS/Android (2023/07/11)
 株式会社ZOZO
 ブランドソリューション開発本部 フロントエンド部 FAANSブロック
 中島 頌太 Copyright © ZOZO, Inc. 1
2. © ZOZO, Inc. 株式会社ZOZO
 ブランドソリューション開発本部 フロントエンド部 
 FAANSブロック iOS担当 中島 頌太
 • 1歳娘の子育て奮闘中
 • 猫を飼っています
 • AtCoderのコンテストに毎週参加
 2
3. © ZOZO, Inc. • GitHub Copilotとは • FAANS iOSアプリで導入箇所を検討 • GitHub Copilotのインストール • 検証 ① PreviewProviderで複数パターンの画面プレビューを作成 ② 条件が異なるテストケースの追加作成 ③ APIリクエストを行い、結果を受け取る処理を新規作成 • まとめ 3 目次

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

5. © ZOZO, Inc. 5 GitHub Copilotとは コメントを入力するとGitHub Copilotがコードを提案 プロジェクト内で書かれたコードの文脈を理解し、リアルタイムで次に書くコードを提案してくれるAIペアプログラマー です
6. © ZOZO, Inc. • GitHub Copilotとは • FAANS iOSアプリで導入箇所を検討 • GitHub Copilotのインストール • 検証 ① PreviewProviderで複数パターンの画面プレビューを作成 ② 条件が異なるテストケースの追加作成 ③ APIリクエストを行い、結果を受け取る処理を新規作成 • まとめ 6 目次

7. © 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リクエストを行い、データ取得/更新等を行う
8. © 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リクエストを行うコードの提案をしてほしい
9. © ZOZO, Inc. • GitHub Copilotとは • FAANS iOSアプリで導入箇所を検討 • GitHub Copilotのインストール • 検証 ① PreviewProviderで複数パターンの画面プレビューを作成 ② 条件が異なるテストケースの追加作成 ③ APIリクエストを行い、結果を受け取る処理を新規作成 • まとめ 9 目次

10. © ZOZO, Inc. GitHub Copilotのインストール Xcodeでは公式にサポートされていないが、次の2つのツールで利用可能 • Copilot for Xcode (今回の検証対象) ◦ サードパーティ製のXcodeのプラグイン https://github.com/intitni/CopilotForXcode • VSCode ◦ 拡張機能をインストールして利用 ▪ GitHub Copilot ▪ Swift for Visual Studio Code 10
11. © 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
12. © ZOZO, Inc. • GitHub Copilotとは • FAANS iOSアプリで導入箇所を検討 • GitHub Copilotのインストール • 検証 ① PreviewProviderで複数パターンの画面プレビューを作成 ② 条件が異なるテストケースの追加作成 ③ APIリクエストを行い、結果を受け取る処理を新規作成 • まとめ 12 目次

13. © 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リクエストを行うコードの提案をしてほしい
14. © ZOZO, Inc. PreviewProviderで複数パターンの画面プレビューを作成 14 プロフィール情報を持つセル - 値によってデザインが変わる仕様 様々な値を設定してプレビューに表示 - isEditingがtrue/false - iconの有無
15. © ZOZO, Inc. PreviewProviderで複数パターンの画面プレビューを作成 セルの編集中を示す、isEditing = true のケースの提案 15
16. © ZOZO, Inc. PreviewProviderで複数パターンの画面プレビューを作成 アイコン画像があるケースの提案 16
17. © ZOZO, Inc. • GitHub Copilotとは • FAANS iOSアプリで導入箇所を検討 • GitHub Copilotのインストール • 検証 ① PreviewProviderで複数パターンの画面プレビューを作成 ② 条件が異なるテストケースの追加作成 ③ APIリクエストを行い、結果を受け取る処理を新規作成 • まとめ 17 目次

18. © 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リクエストを行うコードの提案をしてほしい
19. © ZOZO, Inc. 条件が異なるテストケースの追加作成 前提：ログインページでメールアドレスが nilの場合にエラーメッセージを出すテストが実装済み 次のケースでどのような提案がされるか検証 • メールアドレスが空白のケース • パスワードが nil, 空白のケース 実装済みのテスト 19
20. © ZOZO, Inc. 条件が異なるテストケースの追加作成 メールアドレスが空白のケースを追加作成 20
21. © ZOZO, Inc. 条件が異なるテストケースの追加作成 パスワードが nil, 空白のケースを追加作成 21
22. © ZOZO, Inc. • GitHub Copilotとは • FAANS iOSアプリで導入箇所を検討 • GitHub Copilotのインストール • 検証 ① PreviewProviderで複数パターンの画面プレビューを作成 ② 条件が異なるテストケースの追加作成 ③ APIリクエストを行い、結果を受け取る処理を新規作成 • まとめ 22 目次

23. © 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リクエストを行うコードの提案をしてほしい
24. © ZOZO, Inc. APIリクエストを行い、結果を受け取る処理を新規作成 PresenterがAPIClientクラスを持ち、APIリクエストを実施。過去に書いたことがあるリクエスト を別Presenterで書く場合に提案してほしい 24 Presenter APIClient (Repository) - StaffMemberを取得 - 商品一覧を取得 - コーディネート一覧を取得 - 売上等のランキングを取得 Presenterでは1度しか書かないが、過去に 別Presenterで書いたリクエスト処理を書く 場合に提案してくれたら嬉しい
25. © ZOZO, Inc. StaffMemberを取得するコードで期待した提案がされなかった 25 期待するコード 提案されたコード getStaffMemberという推測自体は悪 くないが、別の関数名になっている sendせずvalueに入れてほしかった
26. © ZOZO, Inc. • GitHub Copilotとは • FAANS iOSアプリで導入箇所を検討 • GitHub Copilotのインストール • 検証 ① PreviewProviderで複数パターンの画面プレビューを作成 ② 条件が異なるテストケースの追加作成 ③ APIリクエストを行い、結果を受け取る処理を新規作成 • まとめ 26 目次

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