#design_conf_extends_ooc ©2024 RAKUS Co., Ltd. コードレビューを支援する AI 技術の応用 設計カンファレンス extends OOC 2024/03/29 @akkiee76

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

#design_conf_extends_ooc OOC 2024 3 https://fortee.jp/oocon-2024/proposal/cfa1a92c-5659-4941-b9bc-c408bf3bd886

#design_conf_extends_ooc このセッションのゴール AI コードレビューが明日から実践できる ✅ 4

#design_conf_extends_ooc アジェンダ 1. オブジェクト指向コードレビューの手法 2. コードレビューを支援する AI 技術の応用 5

#design_conf_extends_ooc 1. オブジェクト指向コードレビューの手法 6

#design_conf_extends_ooc コードレビューの7つの観点 観点 概要 Design 設計、アーキテクチャ Simplicity 理解容易性、可読性 Naming クラス、メソッド、変数などの命名 Style コードスタイル Functionality 機能要件の充足 Test テストコードの妥当性 Document コメント、ドキュメントの妥当性 7

#design_conf_extends_ooc コードレビュー時の判断基準 基準 概要 MUST マージするには必ず修正が必要 SHOULD マージ可能だが、リリースまでに修正が必要 IMO レビュアー観点の意見。修正不要 NITS IMOより軽微な意見など。修正不要 8

#design_conf_extends_ooc 具体的な利用方法 コードレビューでコメントする時は、4つの判断基準と7つの観点を組み 合わせた Prefix をコメントに付けて使用します。 使用例 MUST(Design): ドメインロジックがControllerクラスに実装されて ます。 domain層の対象packageに新しくクラスを作成して実装を 移してください。 9

#design_conf_extends_ooc 2. コードレビューを支援する AI 技術の応用 10

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

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

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

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

#design_conf_extends_ooc 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 15 https://github.com/Codium-ai/pr-agent?tab=readme-ov-file#why-use-pr-agent

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

#design_conf_extends_ooc 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 17

#design_conf_extends_ooc 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 を有効にする 18

#design_conf_extends_ooc 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 }} レビュー観点の プロンプトを追加 具体的に例示する 19

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

#design_conf_extends_ooc 21 レビュー対象を指定 Promptを設定 言語を設定

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

#design_conf_extends_ooc 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を作成 🛠 23 多重責務関数

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

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

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

#design_conf_extends_ooc 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メソッドは、データの処理だけでなく、状態の決定と出力も 行っています。これにより、単一責任の原則に違反しています。状態の決定ロジックを別の メソッドに分割することをお勧めします。 27

#design_conf_extends_ooc -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文は理解しにくくなっています。 状態の決定ロジックを単純化し、可読性を向上させることをお勧めします。 28

#design_conf_extends_ooc -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は、それぞれが何を表しているのかが 明確ではありません。より具体的な名前に変更することをお勧めします。 29

#design_conf_extends_ooc Pull Request 概要 / CodeRabbit 30 妥当な変更内容

#design_conf_extends_ooc PR Review / CodeRabbit レビュー観点が考慮 31

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

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

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

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

#design_conf_extends_ooc Thank you 🙏 36