2024年最新版！Android開発で役立つ生成AI徹底比較

DroidKaigi 2024( https://2024.droidkaigi.jp/timetable/693387/ )にて共同登壇で発表したスライド資料です。
アニメーションがあるため、Googleスライドでも公開しています。
https://docs.google.com/presentation/d/1gETfRtDg50JCtws-GBp4OVMg0I0cxDADffT2IZNmF8s/edit?usp=sharing
※こちらのURLは変更する可能性があります

Transcript

1. 2024年最新版！Android開発で 役立つ生成AI徹底比較 株式会社ZOZO
 ZOZOTOWN開発本部 ZOZOTOWN開発1部 Android1ブロック
 @nishimy432
 
 技術本部 技術戦略部 DevRelブロック
 @wiroha
 Copyright © ZOZO, Inc. 1
2. © ZOZO, Inc. 株式会社ZOZO 技術本部 技術戦略部 DevRelブロック @wiroha（ゐろは） 2024/3〜ZOZOTOWN Android アプリエンジニア。 2 @nishimy432（にしみー） 株式会社ZOZO ZOZOTOWN開発本部 ZOZOTOWN開発1部 Android1ブロック バックエンドエンジニア、PM、 Androidエンジニアなどを経て 現職のDevRelへ。
3. © ZOZO, Inc. 3 導入 生成AIツールが急速に普及しているものの、Android開発において何のツールをどのように活用するか 迷っていませんか？ 本セッションでは、ChatGPT、GitHub Copilot、Geminiを比較して紹介します。 Android開発ならではのシナリオを交えながら、コードの品質改善・開発効率向上のためのヒントやノウ ハウを共有できればと思います。
4. © ZOZO, Inc. 4 目次 • 生成AIツールの概要 ◦ 生成AIとは ◦ ChatGPT、GitHub Copilot、Geminiの比較 ◦ 検証・導入時の注意点 ◦ Android Studioへの導入方法 • 実際の開発における活用方法 ◦ 実装補助 ◦ コードリーディング ◦ テストコードの生成 ◦ コードレビュー ◦ ドキュメントの作成
5. © ZOZO, Inc. 5 目次 • 生成AIツールの概要 ◦ 生成AIとは ◦ ChatGPT、GitHub Copilot、Geminiの比較 ◦ 検証・導入時の注意点 ◦ Android Studioへの導入方法 • 実際の開発における活用方法 ◦ 実装補助 ◦ コードリーディング ◦ テストコードの生成 ◦ コードレビュー ◦ ドキュメントの作成
6. © ZOZO, Inc. 6 生成AIとは 概要 • テキスト、画像、音声、動画などの新しいコンテンツを生成する能力を持つAI技術 • 2022年11月に対話型AI「ChatGPT」が公開され、急速に普及 • データを学習し、そのパターンや特徴を理解して新しいデータを生成するためのアルゴリズム・フ レームワークを「モデル」と呼ぶ。モデルの性能向上で、より自然で高度な生成が可能になった。 • 生成AIに対する命令や指令を「プロンプト」と呼ぶ サービス例 • テキスト系：ChatGPT、Gemini、GitHub Copilot、Copilot（Microsoft）、Claude • 画像系：Stable Diffusion、MidJourney、DALL-E、Adobe Firefly • 他、多数 本セッションではChatGPT、GitHub Copilot、Geminiの3つを取り上げて比較する。
7. © ZOZO, Inc. 7 目次 • 生成AIツールの概要 ◦ 生成AIとは ◦ ChatGPT、GitHub Copilot、Geminiの比較 ◦ 検証・導入時の注意点 ◦ Android Studioへの導入方法 • 実際の開発における活用方法 ◦ 実装補助 ◦ コードリーディング ◦ テストコードの生成 ◦ コードレビュー ◦ ドキュメントの作成
8. © ZOZO, Inc. 8 ChatGPT • 開発元 ◦ OpenAI • 概要 ◦ 会話型の生成AIで、文章生成、翻訳、要約、質疑応答、コー ド生成など、多岐にわたるタスクをこなす。 ◦ カスタムバージョン（GPTs）を構築できる。 • モデル ◦ GPT-4, GPT-4o, DALL·Eなど • 料金 ◦ 無償版 ◦ Plus $20/月 ◦ Team $25/月（年払い）、$30/月（月払い） ◦ Enterprise 要問い合わせ • Android開発との親和性 ◦ これといって特徴的な機能はない。Android Studioと統合は できない。
9. © ZOZO, Inc. 9 GitHub Copilot • 開発元 ◦ GitHub • 概要 ◦ エディタ上でリアルタイムにコードの自動補完や提案を行う。 ◦ 対話型のCopilot Chat、Enterprise版ではpull requestのサマ リー生成機能などもある。 • モデル ◦ Codex / GPT-4など • 料金 ◦ 無償版は無し ◦ Individual $10/月 or $100/年 ◦ Business $19/月 ◦ Enterprise $39/月 • Android開発との親和性 ◦ プラグインがあり、Android Studio上で動作可能 • 参考 ◦ ZOZOでは全社導入済み GitHub Copilotの全社導入とその効果
10. © ZOZO, Inc. 10 Gemini • 開発元 ◦ Google • 概要 ◦ 日本語での発音は「ジェミニ」、2024年2月「Bard」から 名称変更。 ◦ 画像、音声、動画などさまざまな種類の情報を理解し、そ れらを組み合わせて推論する。 ◦ Google Workspaceとの統合や、Gemini For Google Cloudなどにより業務改善にAIを活用できる。 • モデル ◦ Gemini 1.0 Ultra, Gemini 1.0 / 1.5 Pro, Gemini 1.5 Flash, Gemini Nano • 料金 ◦ 無償版 ◦ Gemini Business ￥2,260/月 ◦ Gemini Enterprise ￥3,400/月 （1年契約の場合） • Android開発との親和性 ◦ 高い。Android Studio Koala以降で自動的にインストール されている。
11. © ZOZO, Inc. 11 ChatGPT、GitHub Copilot、Geminiの比較 ChatGPT GitHub Copilot Gemini 開発時の 使い方 • チャット機能 • チャット機能 • エディタ上での補完 • エディタ上でのコード解説・ドキュ メント作成など • チャット機能 • Android Studio上でのコード解説・ ドキュメント作成など 特徴 汎用的。無償で安全に使用 できる範囲が広い。 エディタ上でのコード補完、GitHubとの 連携では随一。さまざまなエディタに対 応。 独自のモデル。開発や専門分野に秀で る。Android Studioとの親和性が高い。 おすすめ の人 • 画像生成も活用した い • 周囲と知見交換し合 いたい（利用者が多 い） • コードの自動補完を使いたい • 言語に関わらず導入したい、全社 的に進めたい • AndroidなどGoogle関連サービ スの開発効率・品質を上げたい • Google Workspaceとの統合で開 発以外の業務改善もしたい ここでは傾向のまとめにとどめ、実際使ってみてどうだったかは後半パートで解説します
12. © ZOZO, Inc. 12 目次 • 生成AIツールの概要 ◦ 生成AIとは ◦ ChatGPT、GitHub Copilot、Geminiの比較 ◦ 検証・導入時の注意点 ◦ Android Studioへの導入方法 • 実際の開発における活用方法 ◦ 実装補助 ◦ コードリーディング ◦ テストコードの生成 ◦ コードレビュー ◦ ドキュメントの作成
13. © ZOZO, Inc. 13 検証・導入時の注意点 • セキュリティ上のリスク ◦ 入力した情報の流出 ◦ 提案されたコードへの脆弱性の混入 • ライセンス侵害のリスク
14. © ZOZO, Inc. 14 検証・導入時の注意点への対策 • セキュリティ上のリスク ◦ 入力した情報の流出 ▪ 対策1：機密情報・個人情報を入力しない ▪ 対策2：入力内容が学習に使用されないようにオプトアウト設定をする ◦ 提案されたコードへの脆弱性の混入 • ライセンス侵害のリスク
15. © ZOZO, Inc. 15 オプトアウトの方法〜ChatGPT〜 • 「データコントロール」→「すべての人のためにモデルを改善する」をオフにする
16. © ZOZO, Inc. 16 オプトアウトの方法〜GitHub Copilot〜 • Setting -> Copilot -> “Allow GitHub to use my code snippets for product improvements” の チェックを外す • Business, Enterpriseプランの場合は学習されない
17. © ZOZO, Inc. 17 オプトアウトの方法〜Gemini〜 • アクティビティ -> オフにする ※ ただし、オフであってもチャットは最長で72時間アカウントに保存される。
18. © ZOZO, Inc. 18 検証・導入時の注意点への対策 • セキュリティ上のリスク ◦ 入力した情報の流出 ▪ 対策1：機密情報・個人情報を入力しない ▪ 対策2：入力内容が学習に使用されないようにオプトアウトの設定をする ▪ 対策3：業務で使用する場合、入力内容の機密性の段階によって使用可否・範囲を定め る（ZOZOではルールを定めている） ◦ 提案されたコードへの脆弱性の混入 • ライセンス侵害のリスク
19. © ZOZO, Inc. 19 検証・導入時の注意点への対策 • セキュリティ上のリスク ◦ 入力した情報の流出 ▪ 対策1：機密情報・個人情報を入力しない ▪ 対策2：入力内容が学習に使用されないようにオプトアウトの設定をする ▪ 対策3：業務で使用する場合、入力内容の機密性の段階によって使用可否・範囲を定めると いった工夫も考えられる（ZOZOではルールを定めている） ◦ 提案されたコードへの脆弱性の混入 ▪ 対策1：コードの内容を理解し、コードレビューでも品質をチェックする ▪ 対策2：2024年8月にGitHubより一般提供された「Copilot Autofix」を使用し、脆弱性 のチェック・自動修正をする • ライセンス侵害のリスク
20. © ZOZO, Inc. 20 検証・導入時の注意点への対策 • セキュリティ上のリスク ◦ 入力した情報の流出 ▪ 対策1：機密情報・個人情報を入力しない ▪ 対策2：入力内容が学習に使用されないようにオプトアウトの設定をする ▪ 対策3：業務で使用する場合、入力内容の機密性の段階によって使用可否・範囲を定めると いった工夫も考えられる（ZOZOではルールを定めている） ◦ 提案されたコードへの脆弱性の混入 ▪ 対策1：コードの内容を理解し、コードレビューでも品質をチェックする ▪ 対策2：2024年8月にGitHubより一般提供された「Copilot Autofix」を使用し、脆弱性の チェック・自動修正をする • ライセンス侵害のリスク ◦ 対策1：GitHub Copilotの設定では「Suggestions matching public code」をBlockedにする ◦ 対策2：損害賠償請求が発生した場合の補償など利用規約を確認する
21. © ZOZO, Inc. 21 目次 • 生成AIツールの概要 ◦ 生成AIとは ◦ ChatGPT、GitHub Copilot、Geminiの比較 ◦ 検証・導入時の注意点 ◦ Android Studioへの導入方法 • 実際の開発における活用方法 ◦ 実装補助 ◦ コードリーディング ◦ テストコードの生成 ◦ コードレビュー ◦ ドキュメントの作成
22. © ZOZO, Inc. 22 Android Studioへの導入方法〜Chat GPT〜 • Android Studioへの統合機能は無し
23. © ZOZO, Inc. 23 Android Studioへの導入方法〜GitHub Copilot〜 • Android Studio -> Setting -> Plugins で”GitHub Copilot”を検索し、インストール
24. © ZOZO, Inc. 24 Android Studioへの導入方法〜GitHub Copilot〜 • Tools -> GitHub Copilot -> Login to GitHub
25. © ZOZO, Inc. 25 Android Studioへの導入方法〜GitHub Copilot〜 • ブラウザで先ほどのコードを入力、ContinueをしてAuthorize
26. © ZOZO, Inc. 26 Android Studioへの導入〜Gemini〜 • Android Studio Koalaをダウンロード後、View -> Tool Windows -> Gemini -> Log in to Google
27. © ZOZO, Inc. 27 Android Studioへの導入〜Gemini〜 • ブラウザでGoogleにログイン、Googleへのデータ送信を許可
28. © ZOZO, Inc. 28 目次 • 生成AIツールの概要 ◦ 生成AIとは ◦ ChatGPT、GitHub Copilot、Geminiの比較 ◦ 検証・導入時の注意点 ◦ Android Studioへの導入方法 • 実際の開発における活用方法 ◦ 実装補助 ◦ コードリーディング ◦ テストコードの生成 ◦ コードレビュー ◦ ドキュメントの作成
29. © ZOZO, Inc. 29 前提 • 今あるプロジェクトで活用する方法 • コードを全て生成AIのプロンプトに含めることはしない • 使用する生成AI ◦ Android Studio内から ▪ GitHub Copilot ▪ Gemini ◦ Webから ▪ Chat GPT ▪ Gemini • ここで紹介する生成AIの回答は全て一例
30. © ZOZO, Inc. 30 目次 • 生成AIツールの概要 ◦ 生成AIとは ◦ ChatGPT、GitHub Copilot、Geminiの比較 ◦ 検証・導入時の注意点 ◦ Android Studioへの導入方法 • 実際の開発における活用方法 ◦ 実装補助 ◦ コードリーディング ◦ テストコードの生成 ◦ コードレビュー ◦ ドキュメントの作成
31. © ZOZO, Inc. 31 実装補助 • DroidKaigi の公式アプリにコントリビュートする場合を想定 • 取り組んだIssue ◦ お気に入りの画面で、スクロールした時にトップアプリバーの背景色がFigmaのデザインと違 う色になる DroidKaigi.conference-app-2024.GitHub.2024-08-25.https://github.com/DroidKaigi/conference-app-2024/issues/596
32. © ZOZO, Inc. 32 実装補助 • DroidKaigi の公式アプリにコントリビュートする場合を想定 • 取り組んだIssue ◦ お気に入りの画面で、スクロールした時にトップアプリバーの背景色がFigmaのデザインと違 う色になる
33. © ZOZO, Inc. 33 実装補助 • GitHub Copilotは開いているファイルの情報を取得する • 関連するファイルを全て開く
34. © ZOZO, Inc. 34 実装補助 GitHub Copilot Chat に、Issueタイトルとどこを修正すれば良いかを聞く
35. © ZOZO, Inc. 35 実装補助 実際にあった提案コード (一部省略) LargeTopAppBar( title = { Text(text = stringResource(FavoritesRes.string.favorite)) }, navigationIcon = { IconButton( onClick = onBackClick, ) }, scrollBehavior = scrollBehavior, colors = TopAppBarDefaults.largeTopAppBarColors( containerColor = MaterialTheme.colorScheme.primary // Set your desired color here ) )
36. © ZOZO, Inc. 36 実装補助 実際にあった提案コード (一部省略) LargeTopAppBar( title = { Text(text = stringResource(FavoritesRes.string.favorite)) }, navigationIcon = { IconButton( onClick = onBackClick, ) }, scrollBehavior = scrollBehavior, colors = TopAppBarDefaults.largeTopAppBarColors( containerColor = MaterialTheme.colorScheme.primary // Set your desired color here ) ) containerColor は スクロール時の色は変更されない。 scrolledContainerColorを 変更する必要がある。
37. © ZOZO, Inc. 37 実装補助 メリット • 簡単なタスクならほとんど正しい実装ができる • 複雑なプロジェクトでも実装箇所を見つけやすい デメリット • 実装箇所が分かるだけの場合が多い ◦ 結局人力での実装が必要 • 少し複雑なタスクだとまだまだ生成精度は低い 活用場面 • プロジェクトに入って間もない場合 • 簡単なタスクを短時間で終わらせたい場合
38. © ZOZO, Inc. 38 目次 • 生成AIツールの概要 ◦ 生成AIとは ◦ ChatGPT、GitHub Copilot、Geminiの比較 ◦ 検証・導入時の注意点 ◦ Android Studioへの導入方法 • 実際の開発における活用方法 ◦ 実装補助 ◦ コードリーディング ◦ テストコードの生成 ◦ コードレビュー ◦ ドキュメントの作成
39. © ZOZO, Inc. 39 コードリーディング FavoritesFiltersの色も変更する必要があった
40. © ZOZO, Inc. 40 コードリーディング scrollBehaviorのoverlappedFractionを 取得してif文で分岐することで スクロールに合わせて色を変更した TopAppBarと色が変わるタイミングが ズレている → TopAppBarに合わせる → コードを読む必要がある
41. © ZOZO, Inc. 41 コードリーディング AppBarのファイルを添付して、scrolledContainerColor の設定をしている箇所を聞く
42. © ZOZO, Inc. 42 コードリーディング
43. © ZOZO, Inc. 43 コードリーディング このコード部分を生成AIに説明してもらう val appBarContainerColor by animateColorAsState( targetValue = colors.containerColor(fraction), animationSpec = spring(stiffness = Spring.StiffnessMediumLow) )
44. © ZOZO, Inc. 44 コードリーディング GitHub Copilot Chat
45. © ZOZO, Inc. 45 コードリーディング Gemini
46. © ZOZO, Inc. 46 コードリーディング ChatGPT
47. © ZOZO, Inc. 47 コードリーディング コードを適用するとスムーズに色が変わる
48. © ZOZO, Inc. 48 コードリーディング メリット • コードを読まなくても探している実装箇所を見つけやすい • コードを読んで理解できなくても説明してもらえる デメリット • 指定された実装箇所が正しいかの判断が必要 活用場面 • プロジェクトに入って間もない場合 • ライブラリ内のコードを読み解かなければならない場合
49. © ZOZO, Inc. 49 目次 • 生成AIツールの概要 ◦ 生成AIとは ◦ ChatGPT、GitHub Copilot、Geminiの比較 ◦ 検証・導入時の注意点 ◦ Android Studioへの導入方法 • 実際の開発における活用方法 ◦ 実装補助 ◦ コードリーディング ◦ テストコードの生成 ◦ コードレビュー ◦ ドキュメントの作成
50. © ZOZO, Inc. 50 テストコードの生成 ユニットテストの生成 • GitHub Copilotの補完 ◦ 引数とかを間違えてしまいがち ◦ 他に書いてあるテストがあったらそれに引っ張られてしまう ◦ 似たようなテストを複数用意する場合には有効 • GitHub Copilot Chatのスラッシュコマンド ◦ /test で今開いているファイルや選択箇所のテストを書ける ◦ 関数ごとのテストを作成したいならある程度正しいテストを書ける ◦ 複雑な処理に関しては精度は良くない
51. © ZOZO, Inc. 51 テストコードの生成 テストデータの作成にはGitHub Copilotが使える • 自動補完 ◦ 他のファイルに定義されているデータクラスは上手く読み込めない ▪ 独自のパラメータを提案してしまう ▪ データクラス自体をコメントで引用する必要がある • GitHub Copilot Chat ◦ 細かい指定もできる
52. © ZOZO, Inc. 52 テストコードの生成 テストデータの作成にはGitHub Copilotが使える public data class TimetableSpeaker( val id: String, val name: String, val iconUrl: String, val bio: String, val tagLine: String, )
53. © ZOZO, Inc. 53 テストコードの生成 シンプルな指示で作成されたテストデータ public fun TimetableSpeaker.Companion.fake(): TimetableSpeaker { return TimetableSpeaker( id = "1", name = "John Doe", iconUrl = "https://example.com/johndoe.png", bio = "An experienced developer with a passion for mobile technologies.", tagLine = "Mobile Developer" ) }
54. © ZOZO, Inc. 54 テストコードの生成 リスト形式で返すように指示したテストデータ public fun TimetableSpeaker.Companion.fakeList(): List<TimetableSpeaker> { return listOf( TimetableSpeaker.fake(), TimetableSpeaker( id = "2", name = "Jane Smith", iconUrl = "https://example.com/janesmith.png", bio = "A seasoned developer with expertise in backend technologies.", tagLine = "Backend Developer" ), TimetableSpeaker( id = "3", name = "Alice Johnson", iconUrl = "https://example.com/alicejohnson.png", bio = "A creative designer with a knack for user experience.", tagLine = "UX Designer" ) ) }
55. © ZOZO, Inc. 55 テストコードの生成 細かい指示も出せる • リストの中身の個数 • テキストや数値は同じものを代入するか • nullable な場合、null を代入するか
56. © ZOZO, Inc. 56 テストコードの生成 メリット • 簡単なテストデータを自動で書ける • テストデータの生成を楽にできる デメリット • 現段階では、ユニットテストを生成する精度が低い 活用場面 • 全くテストが書かれていない小規模なプロジェクトでテストを追加したい場合 • 複雑なテストデータを作成したい場合
57. © ZOZO, Inc. 57 目次 • 生成AIツールの概要 ◦ 生成AIとは ◦ ChatGPT、GitHub Copilot、Geminiの比較 ◦ 検証・導入時の注意点 ◦ Android Studioへの導入方法 • 実際の開発における活用方法 ◦ 実装補助 ◦ コードリーディング ◦ テストコードの生成 ◦ コードレビュー ◦ ドキュメントの作成
58. © ZOZO, Inc. 58 コードレビュー • 変更点を生成AIに説明してもらう • 特定のペルソナとしてコードレビューをしてもらう ◦ あなたはコードの品質、可読性、効率性を重視する上級Kotlin開発者です。 〇〇のコードレビューをしてください。
59. © ZOZO, Inc. 59 コードレビュー 今回レビューしてもらうコード val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior() val fraction = if (scrollBehavior.state.overlappedFraction > 0.01f) 1f else 0f val filterBackgroundColor by animateColorAsState( targetValue = lerp( MaterialTheme.colorScheme.surface, MaterialTheme.colorScheme.surfaceContainer, FastOutLinearInEasing.transform(fraction) ), animationSpec = spring(stiffness = Spring.StiffnessMediumLow) )
60. © ZOZO, Inc. 60 コードレビュー GitHub Copilot の結果
61. © ZOZO, Inc. 61 コードレビュー GitHub Copilot の提案コード val scrollBehavior = remember { TopAppBarDefaults.pinnedScrollBehavior() } val fraction = if (scrollBehavior.state.overlappedFraction > OVERLAP_THRESHOLD) 1f else 0f val filterBackgroundColor by animateColorAsState( targetValue = lerp( MaterialTheme.colorScheme.surface, MaterialTheme.colorScheme.surfaceContainer, FastOutLinearInEasing.transform(fraction) ), animationSpec = spring(stiffness = Spring.StiffnessMediumLow) ) 使用は適切と 評価
62. © ZOZO, Inc. 62 コードレビュー GitHub Copilot の提案コード val scrollBehavior = remember { TopAppBarDefaults.pinnedScrollBehavior() } val fraction = if (scrollBehavior.state.overlappedFraction > OVERLAP_THRESHOLD) 1f else 0f val filterBackgroundColor by animateColorAsState( targetValue = lerp( MaterialTheme.colorScheme.surface, MaterialTheme.colorScheme.surfaceContainer, FastOutLinearInEasing.transform(fraction) ), animationSpec = spring(stiffness = Spring.StiffnessMediumLow) ) remember関数内で Composable関数は 呼べないためエラー
63. © ZOZO, Inc. 63 コードレビュー Gemini の結果
64. © ZOZO, Inc. 64 コードレビュー Gemini の提案コード val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior() val fraction = if (scrollBehavior.state.overlappedFraction > 0.01f) 1f else 0f val filterBackgroundColor by animateColorAsState( targetValue = lerp( MaterialTheme.colorScheme.surface, MaterialTheme.colorScheme.surfaceContainer, FastOutLinearInEasing.transform(fraction) ), animationSpec = spring(stiffness = Spring.StiffnessMediumLow) )
65. © ZOZO, Inc. 65 コードレビュー Gemini の提案コード val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior() val fraction = if (scrollBehavior.state.overlappedFraction > 0.01f) 1f else 0f val filterBackgroundColor by animateColorAsState( targetValue = lerp( MaterialTheme.colorScheme.surface, MaterialTheme.colorScheme.surfaceContainer, FastOutLinearInEasing.transform(fraction) ), animationSpec = spring(stiffness = Spring.StiffnessMediumLow) ) TopAppBarと挙動が合わない → この変更の背景が伝わっていない
66. © ZOZO, Inc. 66 コードレビュー メリット • 自分では気付かない視点を教えてくれる デメリット • 変更の背景まで伝えるのは難しい • 不必要な議論を生んでしまう可能性がある 活用場面 • Pull Requestを出す前の自己レビューをする場合 • レビューをしている中で行き詰まった場合
67. © ZOZO, Inc. 67 目次 • 生成AIツールの概要 ◦ 生成AIとは ◦ ChatGPT、GitHub Copilot、Geminiの比較 ◦ 検証・導入時の注意点 ◦ Android Studioへの導入方法 • 実際の開発における活用方法 ◦ 実装補助 ◦ コードリーディング ◦ テストコードの生成 ◦ コードレビュー ◦ ドキュメントの作成
68. © ZOZO, Inc. 68 ドキュメント作成 作成しなければならないドキュメントの種類 • Issue • Pull Request • Tech Blog • イベント参加レポート • コード内に記述するコメント/kDoc • Architecture Decision Record (ADR)
69. © ZOZO, Inc. 69 ドキュメント作成 作成しなければならないドキュメントの種類 • Issue • Pull Request • Tech Blog • イベント参加レポート • コード内に記述するコメント/kDoc • Architecture Decision Record (ADR)
70. © ZOZO, Inc. 70 ドキュメント作成 kDocを書く方法 DroidKaigi.conference-app-2024.GitHub.2024-09-05.https://github.com/DroidKaigi/conference-app-2024/blob/main/feature/favorites/src/commo nMain/kotlin/io/github/droidkaigi/confsched/favorites/component/FavoriteFilters.kt
71. © ZOZO, Inc. 71 ドキュメント作成 kDocを書く方法 DroidKaigi.conference-app-2024.GitHub.2024-09-05.https://github.com/DroidKaigi/conference-app-2024/blob/main/feature/favorites/src/commo nMain/kotlin/io/github/droidkaigi/confsched/favorites/component/FavoriteFilters.kt
72. © ZOZO, Inc. 72 ドキュメント作成 kDocを書く
73. © ZOZO, Inc. 73 ドキュメント生成 GeminiでkDocを書いてもらう
74. © ZOZO, Inc. 74 ドキュメント作成 ADRを書く • 章を立てて経緯を説明するのは難しい ◦ 生成AIを利用すると良い • ADRのテンプレートが決まっている場合 ◦ プロンプトに入力 • 決まっていない場合 ◦ 生成AIに考えてもらう
75. © ZOZO, Inc. 75 ドキュメント作成 ADRを書く 以下のような文章をADRにしてもらう FavoriteFilters の背景色をスクロールに合わせて変更するようにした。 最初、`scrollBehavior`の`overlappedFraction`を取得してif文で分岐することでスクロールに合わせて色 を変更しようとした。しかし、この状態だと色の変化がスムーズではなく、すでにスクロールに合わせ て色がスムーズに変化するTopAppBarの挙動と合わなかった。そこで、TopAppBarの実装と合わせ、 animateColorAsState を使って実装することにした。その結果、TopAppBarとスムーズに色が変わる挙 動となった。
76. © ZOZO, Inc. 76 ドキュメント作成 ChatGPTで作成したADRの一例 背景 FavoriteFilters の背景色をスクロールに合わせて変更する必要が生じた。当初は、scrollBehavior の overlappedFraction を if 文で取得し、分岐することで色を変更しようと試みたが、この方法では色の変化がスムーズで はなく、既存の TopAppBar のスムーズな色変化と合わなかった。 決定事項 TopAppBar の実装と整合性を保つために、animateColorAsState を使用して、スクロールに応じてスムーズに背景色が 変化するように実装を変更することを決定した。 影響範囲 この変更により、FavoriteFilters の背景色がスムーズに変化し、TopAppBar と統一感のあるUI/UXが実現される。ユー ザー体験の向上に寄与し、将来的なメンテナンスや追加機能の実装にも柔軟に対応できるようになる。 議論メモ 当初の if 文による実装では、色の変化が不自然であったため、UXに悪影響を与える可能性があった。 animateColorAsState を用いることで、アニメーションによるスムーズな色変化が実現可能となり、TopAppBar と同様 の挙動が得られることが確認された。
77. © ZOZO, Inc. 77 ドキュメント作成 背景 * FavoriteFilters の背景色をスクロールに合わせて 変更する必要があった。 * 初期実装では色の変化が不自然で、TopAppBar の 挙動と統一感がなかった。 決定事項 * TopAppBar と同様に、animateColorAsState を使 用して色の変更を実装する。 影響範囲 * FavoriteFilters の表示 * ユーザー体験（特にスクロール時の視覚的なフィー ドバック） 議論メモ * 初期実装（scrollBehavior + if文）の問題点： * 色の変化がスムーズでない * TopAppBar との挙動の不一致 * animateColorAsState 採用のメリット： * スムーズな色の変化 * TopAppBar との挙動の一貫性 * 懸念点： * パフォーマンスへの影響（特に低スペックデバイス） * 将来的な複雑なアニメーションへの対応 * 代替案： * 初期実装の改良 * サードパーティ製アニメーションライブラリの導入 * 結論： * animateColorAsState を採用 * パフォーマンスへの影響を監視し、必要に応じて最適化 Geminiで作成したADRの一例
78. © ZOZO, Inc. 78 ドキュメント作成 GitHub Copilot Chatで作成したADRの一例 # 背景 `FavoriteFilters`の背景色をスクロール位置に基づいて変更する必要がありました。最初は、`if`文を使用して `scrollBehavior`から`overlappedFraction`を取得し、条件に応じて色を変更しようとしました。しかし、この方法では色 の変化がスムーズではなく、すでにスクロールに合わせて色がスムーズに変化する`TopAppBar`の挙動と一致しませんでし た。 # 決定事項 一貫したスムーズな色の変化を実現するために、`TopAppBar`の実装に合わせて`animateColorAsState`を使用することに しました。 # 影響範囲 `FavoriteFilters`の背景色がスクロールイベントに応じてスムーズに変化し、`TopAppBar`と一貫したユーザー体験を提供 できるようになりました。 # 議論メモ 最初の実装では、`if`文を使用して`scrollBehavior`の`overlappedFraction`を取得し、条件に応じて色を変更しようとしま した。しかし、この方法では色の変化がスムーズではなく、`TopAppBar`の挙動と一致しませんでした。そのため、 `animateColorAsState`を使用することで、スムーズな色の変化を実現しました。
79. © ZOZO, Inc. 79 ドキュメント作成 メリット • 説明を考える手間が省ける • 文章を簡潔にまとめてくれる • 自分では気付けなかった懸念事項に気付ける デメリット • 間違った内容が含まれる可能性が高い • 結局文章を修正する必要が出てきて、時間がかかる 活用場面 • kDocなどコード内にドキュメントを書く場合 • ADRなどの技術文書を書く場合
80. © ZOZO, Inc. 80 まとめ シンプルなタスクや新しいプロジェクトには • GitHub Copilotで素早く実装補助。 • 簡単なタスクの自動化と実装箇所の特定が得意。 既存コードやライブラリの理解が必要なら • GeminiやChatGPTでコードリーディング。 • コードの難解な部分を解説してもらい、時間短縮。 ドキュメント作成や技術文書の効率化には • GitHub CopilotでkDocやADRの作成補助。 • 説明の手間を省きつつ、見落としがちな懸念を発見。
81. © ZOZO, Inc. 81 まとめ テストコードが足りない場合には • GeminiやGitHub Copilotでテストデータ生成。 • 複雑なテストデータも簡単に準備。 コードレビューを効率化したいなら • ChatGPTで新しい視点から自己レビューをサポート。 • 見落としていた改善点を発見。