Claude vs GitHub Copilot Vueのコード変換丸投げしてみた

Transcript

1. Claude vs GitHub Copilot Vueのコード変換丸投げしてみた Vue Fes After Night
2. ⾃⼰紹介 2 2
3. 3 ⾃⼰紹介 島本 和樹 • 株式会社スタディスト ◦ Teachme Biz の開発 • 最近フロントエンド領域に注力
4. はじめに 4 4
5. 5 はじめに Vue Fes Japan で発表したこと
6. 6 はじめに Vaporモードについて発表しました https://speakerdeck.com/kazukishimamoto/vapormodowoda-gui-mo-sabisunizui-su-dao-ru-sitexue-biwogong-you-suru
7. 7 Options API→Composition APIへの書き換え
8. 8 書き換えには AI を使いました
9. 9 はじめに Vaporモードで動いたプロダクトで
10. 10 はじめに VaporモードON/OFFの⽐較をしました
11. 11 はじめに スクリプティングの時間が短縮されていた
12. 12 はじめに ⾼負荷の状況下でもFPSが落ちていない Vapor ON: 更新 18回 Vapor OFF: 更新 5回
13. 13 はじめに Vaporモードのすごさを体感した
14. 14 はじめに <script setup>のみサポートされる https://talks.sxzz.moe/2024-10-vue-fes-japan/9?clicks=4
15. 15 はじめに Vaporモードのすごさを体感した私としては
16. 16 Vaporモードに備えて <script setup>に書き換えておきたい
17. 17 今後の新たな機能も <script setup>が真っ先に 対応されるかも
18. 18 <script setup>(or Composition API) へ移⾏するメリットは⾼まってきている
19. 19 ⽣成AIに丸投げして 書き換えてもらおう！
20. Claude vs GitHub Copilot Vueコードを丸投げして変換対決！ Vue Fes Japan 2024
21. 21 なぜ Claude と GitHub Copilotなの？ 🤔
22. 22 A. 弊社ですぐに使えたからです
23. Claude / GitHub Copilot それぞれの特徴 23 23
24. 24 Claude / GitHub Copilot それぞれの特徴 Claude と GitHub Copilot Claude GitHub Copilot chat
25. 25 Claude / GitHub Copilot それぞれの特徴 Claude と GitHub Copilot Claude GitHub Copilot chat 汎用的な対話型AIアシスタント • 複雑な指示や長文の処理が得意 • 数学、分析、コーディング等、 幅広いタスクに対応可能
26. 26 Claude / GitHub Copilot それぞれの特徴 Claude と GitHub Copilot Claude GitHub Copilot chat 汎用的な対話型AIアシスタント • 複雑な指示や長文の処理が得意 • 数学、分析、コーディング等、 幅広いタスクに対応可能 開発に特化したリアルタイムコーディング支援AI • VSCodeなどのIDEに統合され、コードの補完や提案 を行う • コンテキストを理解したコード生成が可能 • プログラミング以外の用途には特化していない
27. 27 Claude / GitHub Copilot それぞれの特徴 今回利⽤したバージョン Claude GitHub Copilot chat 高精度な理解力と正確性を備えた汎用AI • 複雑な指示や長文の処理が得意 • 数学、分析、コーディング等、 幅広いタスクに対応可能 開発に特化したリアルタイムコーディング支援AI • VSCodeなどのIDEに統合され、コードの補完や提案 を行う • コンテキストを理解したコード生成が可能 • プログラミング以外の用途には特化していない Claude 3.5 Sonnet v2 GPT-4oがベース
28. 28 Claude / GitHub Copilot それぞれの特徴 プロダクトコードが外部に漏れないか ≒ 再学習に使われないか ⽣成AI使⽤時の注意点
29. 29 Claude / GitHub Copilot それぞれの特徴 • Amazon Bedrock • GitHub Copilot Amazon Bedrock / GitHub Copilotどちらも再学習しない いいえ。AWS およびサードパーティーのモデルプロバイダーは、 Amazon Bedrock への⼊⼒または Amazon Bedrock からの出⼒を使⽤して Amazon Titan またはサードパーティーのモデルをトレーニングすることはありません。 ※「Amazon Bedrockのよくある質問」より Prompts are only transmitted to the AI model to generate suggestions in real-time and are deleted once the suggestions are generated. Copilot for Business also does not use your code to train the Azure OpenAI model. ※「How to responsibly adopt GitHub Copilot with the GitHub Copilot Trust Center」より
30. コード変換精度⽐較 <script setup> 30 30
31. 31 コード変換精度⽐較 <script setup> 上記のVueコンポーネントを<script setup lang="ts"> を使った構⽂で書き直してください。 プロンプト
32. 32 コード変換精度⽐較 <script setup> • atomsコンポーネント ◦ 73⾏ • moleculesコンポーネント ◦ 339⾏ • organismsコンポーネント ◦ 1052⾏ コンポーネントの⼤きさ毎に⽐較
33. 33 コード変換精度⽐較 <script setup> atomsコンポーネントの変換結果 Claude GitHub Copilot <script setup lang="ts"> interface Props { label: string disabled?: boolean // 省略 } withDefaults(defineProps<Props>(), { disabled: false, // 省略 }) </script> <script setup lang="ts"> import { defineProps, withDefaults } from 'vue'; const props = withDefaults(defineProps<{ label: string; disabled?: boolean; // 省略 }>(), { disabled: false, width: '', // 省略 }); </script>
34. 34 コード変換精度⽐較 <script setup> 変換精度に⼤きな差はない Claude GitHub Copilot <script setup lang="ts"> interface Props { label: string disabled?: boolean // 省略 } withDefaults(defineProps<Props>(), { disabled: false, // 省略 }) </script> <script setup lang="ts"> import { defineProps, withDefaults } from 'vue'; const props = withDefaults(defineProps<{ label: string; disabled?: boolean; // 省略 }>(), { disabled: false, width: '', // 省略 }); </script>
35. 35 コード変換精度⽐較 <script setup> 不要なコードはあるが、プロンプトで対応できるだろう Claude GitHub Copilot <script setup lang="ts"> interface Props { label: string disabled?: boolean // 省略 } withDefaults(defineProps<Props>(), { disabled: false, // 省略 }) </script> <script setup lang="ts"> import { defineProps, withDefaults } from 'vue'; const props = withDefaults(defineProps<{ label: string; disabled?: boolean; // 省略 }>(), { disabled: false, width: '', // 省略 }); </script> 不要な import ⽂
36. 36 コード変換精度⽐較 <script setup> moleculesコンポーネントの変換結果 その1 Claude GitHub Copilot <script setup lang="ts"> （省略） const fromImage = () => { imageFileInput.value.click() opened.value = false } const fromVideo = () => { videoFileInput.value.click() opened.value = false } （省略） </script> <script setup lang="ts"> （省略） const fromImage = () => { // 画像を追加する処理 }; const fromVideo = () => { // 動画を追加する処理 }; （省略） </script>
37. 37 コード変換精度⽐較 <script setup> moleculesコンポーネントの変換結果 その2 Claude GitHub Copilot <script setup lang="ts"> const emit = defineEmits<{ (e: 'createStep', payload: any): void (e: 'createStepList', payload: any[]): void }>() </script> <script setup lang="ts"> （定義がない） </script>
38. 38 コード変換精度⽐較 <script setup> organismsコンポーネントの変換結果 Claude GitHub Copilot
39. 39 コード変換精度⽐較 <script setup> 1455⾏のコンポーネントを出⼒ Claude GitHub Copilot
40. 40 コード変換精度⽐較 <script setup> 応答の⻑さ制限により出⼒不可 Claude GitHub Copilot
41. 41 コード変換精度⽐較 <script setup> • atomsコンポーネントはほぼ同精度 • moleculesコンポーネントだと GitHub Copilotのコードにヌケモレが顕著に多くなる • organismsコンポーネントだとClaudeじゃないと出⼒で きない <script setup>への変換⽐較まとめ
42. 42 コード変換精度⽐較 <script setup> • GitHub Copilotはプロンプトの指⽰が反映されないこと が⽐較的多かった その他の気付き
43. 43 ところで 社内ではVuexからPiniaへの書き換え も実施されている
44. 44 これも⽣成AIで 書き換えできるんだろうか
45. コード変換精度⽐較 Vuex to Pinia 45 45
46. 46 参照すべき変換元ファイルが複数あっても 適切に出⼒できるのか 「<script setup>への書き換え」と違う点
47. 47 （Vuexのストア定義を渡し）useBookmarkStore.tsを⽣成 してください。 defineStoreの第2引数はオブジェクト形式で記述してくださ い。 プロンプト
48. 48 出⼒結果 Claude GitHub Copilot
49. 49 出⼒結果 Claude GitHub Copilot
50. 50 出⼒結果 Claude GitHub Copilot
51. 51 出⼒結果 Claude GitHub Copilot
52. 52 出⼒結果 応答の⻑さ制限により出⼒不可 どちらもちゃんと ストア定義されている！
53. 53 変換結果 抜粋その1: actionの定義 Claude GitHub Copilot actions: { async loadBookmarkList(params: LoadBookmarkListParams) { // スライド都合で省略 }, async deleteBookmarkList(idList: number[]) { // スライド都合で省略 } } actions: { async LOAD_BOOKMARK_LIST(payload: { page?: number; perPage?: number; sortKey?: string; sortOrder?: string }) { // スライド都合で省略 } }
54. 54 GitHub Copilotはあるべきメソッドがない Claude GitHub Copilot actions: { async loadBookmarkList(params: LoadBookmarkListParams) { // スライド都合で省略 }, async deleteBookmarkList(idList: number[]) { // スライド都合で省略 } } actions: { async LOAD_BOOKMARK_LIST(payload: { page?: number; perPage?: number; sortKey?: string; sortOrder?: string }) { // スライド都合で省略 } } // deleteBookmarkListがない！！
55. 55 変換結果 抜粋その2: エラーハンドリング Claude3 GitHub Copilot catch (error) { createErrorHandler(error) throw error } catch (error) { console.error('Failed to load bookmarks:', error); }
56. 56 Claude の⽅が元のコードを参照するのが得意 Claude GitHub Copilot catch (error) { createErrorHandler(error) throw error } catch (error) { console.error('Failed to load bookmarks:', error); }
57. 57 • Vueコードの変換においては Claude 3.5 Sonnet v2 の⽅が良かった ◦ 複雑‧⻑⽂の指⽰を漏れることなく反映させている ◦ まとまった量のコードを変換するタスクに向いている • GitHub Copilotはリアルタイム‧少ない⼊⼒でコーディ ングを補助してくれるものだと改めて理解した やってみての感想
58. 58 Vueコードの変換においては Claude 3.5 Sonnet v2 が良い！！！ 結論
59. 59 Claude の⽅がいいけど、GitHub CopilotはIDEと連携して ファイルを読ませたりできるところは便利なんだよな〜 おまけ
61. 61 みんなは Claude 3.5 Sonnetを GitHub Copilotから使おう！！ まとめ
62. https://studist.jp/