Slide 1

Slide 1 text

#yumemi_grow ©2024 RAKUS Co., Ltd. コードレビューを支援する AI 技術の応用 プルリクエストとコードレビューで開発を加速させるLT会 2024/06/03 @akkiee76

Slide 2

Slide 2 text

#yumemi_grow ● Akihiko Sato ● Mobile & Backend Engineer ● 𝕏 : @akkiee76 ● Speaker Deck : @akkie76 自己紹介 2

Slide 3

Slide 3 text

#yumemi_grow このLTのゴール AI コードレビューが明日から実践できる ✅ 3

Slide 4

Slide 4 text

#yumemi_grow アジェンダ コードレビューを支援する AI 技術の応用 ○ AIコードレビューツールの紹介 ○ PR-Agentを利用したAIコードレビュー ○ CodeRabbitを利用したAIコードレビュー 4

Slide 5

Slide 5 text

#yumemi_grow コードレビューを支援する AI 技術の応用 5

Slide 6

Slide 6 text

#yumemi_grow 注意点 6 AI コードレビューは検証段階です 🤖

Slide 7

Slide 7 text

#yumemi_grow 主な AI コードレビューツール ● PR-Agent ● CodeRabbit ● Copilot Pull Request 7 ● PR-Agent ● CodeRabbit ● Copilot Pull Request

Slide 8

Slide 8 text

#yumemi_grow PR-Agent とは? Pull Request を AI でレビューを行えるツール ● PRの概要作成( /describe ) ● コードレビュー( /review ) ● 改善提案( /improve ) Pull Request 作成時に実行される 🤖 8

Slide 9

Slide 9 text

#yumemi_grow CodeRabbit とは? Pull Request を AI でレビューを行えるツール ● PRの概要作成 ● コードレビュー( Line-by-line reviews ) ● 対話機能( Chat with CodeRabbit ) PR-Agent と近い機能 🤖 9

Slide 10

Slide 10 text

#yumemi_grow PR-Agent の特徴 ● Single GPT-4 call ● Effectively tackle both short and long PRs ● JSON prompting strategy ● Multiple git providers ○ GitHub, Gitlab, Bitbucket ● Multiple models ○ GPT-4, GPT-3.5, Anthropic, Cohere, Llama2 10 https://github.com/Codium-ai/pr-agent?tab=readme-ov-file#why-use-pr-agent

Slide 11

Slide 11 text

#yumemi_grow CodeRabbit の特徴 ● Prompt and pattern based customizations ● Multiple git providers ○ GitHub, Gitlab ● Multiple models ○ GPT-4, GPT-3.5-turbo( OpenAI ) ● Price( subscription ) 11 https://github.com/coderabbitai/ai-pr-reviewer

Slide 12

Slide 12 text

#yumemi_grow PR-Agent を利用するための準備 PR-Agentを利用するためには以下を準備します。 ● OpenAI API key(従量課金設定) ● GitHub personal access token ● pr-agent-review.yaml(GitHub Actions) ○ https://github.com/Codium-ai/pr-agent/blob/main/.github/workflows/pr-agent-review.yaml GitHub Action から OpenAI API で gpt-4による レビューを行うため利用規約を必ずご確認ください https://github.com/Codium-ai/pr-agent?tab=readme-ov-file#data-privacy 12

Slide 13

Slide 13 text

#yumemi_grow name: PR-Agent on: pull_request: types: [opened, reopened, synchronize] # issue_comment: workflow_dispatch: permissions: # issues: write pull-requests: write jobs: pr_agent_job: runs-on: ubuntu-latest name: Run pr agent on every pull request steps: - name: PR Agent action step id: pragent uses: Codium-ai/pr-agent@main env: GITHUB_ACTION_CONFIG.AUTO_DESCRIBE: true GITHUB_ACTION_CONFIG.AUTO_REVIEW: true GITHUB_ACTION_CONFIG.AUTO_IMPROVE: true 実行タイミングを追加 PRへの書込み権限を付与 describe, review, improve を有効にする 13

Slide 14

Slide 14 text

#yumemi_grow jobs: pr_agent_job: env: INSTRUCTIONS: >- - 以下の観点で指摘を分類してください - Design(設計観点での指摘) - 単一責任の原則違反、密結合、低凝集、DRY原則違反、拡張性などの設計的な問題 - Simplicity(理解容易性、可読性観点の指摘) - ネストが多いif文、複雑な三項演算子、複雑なstream整形文、冗長なSQLなど - Naming(適切な命名判断に関する指摘) - クラス、メソッド、変数など命名が対応する内容に相応しいかどうかの指摘 - Style(コードスタイルに関する指摘) - コードスタイル・コーディング規約違反、静的解析違反、期待権限以上のアクセス修飾子 - Functionality(機能的に不具合に関する指摘) - 不具合、パフォーマンス懸念、不要なパラメータを使用 - Test(テストコードの妥当性に関する指摘) - テストコードカバレッジの保証、閾値の妥当性、テストパラメータ群の適正 - Document(Doc、コメントの妥当性に関する指摘) - 不適切、不正確、JavaDoc・KDocなどのDocは必須 - 上記の指摘観点をCategory欄に記載すること - 上記の指摘観点をprefixに付けること。例えばDesign観点の場合はDesign:とprefixを付けること steps: env: PR_REVIEWER.EXTRA_INSTRUCTIONS: ${{ env.INSTRUCTIONS }} PR_CODE_SUGGESTIONS.EXTRA_INSTRUCTIONS: ${{ env.INSTRUCTIONS }} レビュー観点の プロンプトを追加 具体的に例示する 14

Slide 15

Slide 15 text

#yumemi_grow CodeRabbit を利用するための準備 CodeRabbit を利用するためには以下を準備します。 ● アカウント作成 / GitHub 連携 ● リポジトリ設定 ● レビュー対象 / Prompt 設定 https://github.com/coderabbitai/ai-pr-reviewer?tab=readme-ov-file#disclaimer 15 こちらも利用規約を必ずご確認ください

Slide 16

Slide 16 text

#yumemi_grow 16 レビュー対象を指定 Promptを設定 言語を設定

Slide 17

Slide 17 text

#yumemi_grow コードレビューを依頼してみましょう 🤖 17

Slide 18

Slide 18 text

#yumemi_grow var data1: String? = null var data2: String? = null var flag: Boolean = false var numericValue: Int = 0 private val value1 = 50 private val value2 = 100 fun process(dataA: String, dataB: String, status: Boolean, value: Int) { data1 = dataA data2 = dataB flag = status numericValue = value send(dataB) val state = if (flag) { if (value >= value1) { if (value == value2) "State1" else "State2" } else { "State3" } } else { "State4" } println("Data $dataA state is $state. Action performed with: $dataB") } private fun send(target: String) { println("Action performed with $target") } 抽象的な命名 変更可能性 ネストの深い 三項演算子 サンプルコードでPRを作成 🛠 18 多重責務関数

Slide 19

Slide 19 text

#yumemi_grow Pull Request 概要 / PR-Agent 19 妥当な変更内容

Slide 20

Slide 20 text

#yumemi_grow PR Review / PR-Agent コードの複雑性や命名が示唆 20

Slide 21

Slide 21 text

#yumemi_grow Suggestions / PR-Agent 21 レビューの観点が考慮されている

Slide 22

Slide 22 text

#yumemi_grow fun process(dataA: String, dataB: String, status: Boolean, value: Int) { send(dataB) - val state = if (flag) { + val state = determineState(value) + println("Data $dataA state is $state. Action performed with: $dataB") +} +private fun determineState(value: Int): String { + return if (flag) { if (value >= value1) { if (value == value2) "State1" else "State2" } else { "State3" } } else { "State4" } - println("Data $dataA state is $state. Action performed with: $dataB") } Design: DataProcessorクラスのprocessメソッドは、データの処理だけでなく、状態の決定と出力も 行っています。これにより、単一責任の原則に違反しています。状態の決定ロジックを別の メソッドに分割することをお勧めします。 22

Slide 23

Slide 23 text

#yumemi_grow -val state = if (flag) { - if (value >= value1) { - if (value == value2) "State1" else "State2" - } else { - "State3" - } -} else { - "State4" +val state = when { + flag && value >= value1 && value == value2 -> "State1" + flag && value >= value1 -> "State2" + flag -> "State3" + else -> "State4" } Simplicity: processメソッド内のネストされたif文は理解しにくくなっています。 状態の決定ロジックを単純化し、可読性を向上させることをお勧めします。 23

Slide 24

Slide 24 text

#yumemi_grow -var data1: String? = null -var data2: String? = null -var flag: Boolean = false -var numericValue: Int = 0 +var inputDataA: String? = null +var inputDataB: String? = null +var processingFlag: Boolean = false +var numericParameter: Int = 0 Naming: クラス変数data1, data2, flag, numericValueは、それぞれが何を表しているのかが 明確ではありません。より具体的な名前に変更することをお勧めします。 24

Slide 25

Slide 25 text

#yumemi_grow Pull Request 概要 / CodeRabbit 25 妥当な変更内容

Slide 26

Slide 26 text

#yumemi_grow PR Review / CodeRabbit レビュー観点が考慮 26

Slide 27

Slide 27 text

#yumemi_grow 1-7: Design: DataProcessorクラスのプロパティは、データ処理の状態を保持するために 使用されていますが、このクラスの設計が単一責任の原則に反している可能性がありま す。データの状態管理とデータ処理のロジックを分離することで、クラスの責任をより明確 にし、再利用性とテスト容易性を向上させることができます。 9-26: Functionality: processメソッド内でsendメソッドが呼び出されていますが、sendメ ソッドの呼び出し条件がdataBの値に依存しているため、特定のデータに対してのみアク ションを実行するという要件がある場合、この設計では対応できません。sendメソッドの呼 び出しを条件分岐内で行うなど、より柔軟に対応できる設計を検討することをお勧めしま す。 27

Slide 28

Slide 28 text

#yumemi_grow 16-24: Simplicity: processメソッド内のネストされたif文は、理解と保守が難しくなる原因と なります。Kotlinのwhen式を使用して、この条件分岐をより読みやすくリファクタリングする ことをお勧めします。 29-31: Naming: sendメソッドの命名は、実行されるアクションの内容が不明確です。メソッ ドが何をするのかをより具体的に示す名前に変更することをお勧めします。例えば、 printActionWithTargetなど。 28 Promptのレビュー観点が考慮されている 🤖

Slide 29

Slide 29 text

#yumemi_grow AI コードレビューまとめ(所感) 29 PR-Agent CodeRabbit 精度 ◯ ◯ 処理速度 ◯ △ 安定性 ◯ △* 柔軟性 △ ◯ コスト △(従量課金) ◯(サブスク) * 独自アルゴリズムでレビューが簡易化されることがある

Slide 30

Slide 30 text

#yumemi_grow AI コードレビューまとめ AI コードレビューの手法を紹介しました。 AI を利用したツールは発展途上の部分もありますが、 ● PR 提出前のセルフチェック ● 少人数チームでのコードレビュー レビューコスト削減などに期待 🚀 30

Slide 31

Slide 31 text

#yumemi_grow お知らせ OOC 2024 公式ガイドブック 第 16 章 「コードレビューガイドラインを 導入してみよう」 を執筆しました 🎉 31

Slide 32

Slide 32 text

#yumemi_grow Thank you 🙏 32