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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

⾃⼰紹介 2 2

Slide 3

Slide 3 text

3 ⾃⼰紹介島本和樹 ● 株式会社スタディスト ○ Teachme Biz の開発 ● 最近フロントエンド領域に注力

Slide 4

Slide 4 text

はじめに 4 4

Slide 5

Slide 5 text

5 はじめに Vue Fes Japan で発表したこと

Slide 6

Slide 6 text

6 はじめに Vaporモードについて発表しました https://speakerdeck.com/kazukishimamoto/vapormodowoda-gui-mo-sabisunizui-su-dao-ru-sitexue-biwogong-you-suru

Slide 7

Slide 7 text

7 Options API→Composition APIへの書き換え

Slide 8

Slide 8 text

8 書き換えには AI を使いました

Slide 9

Slide 9 text

9 はじめに Vaporモードで動いたプロダクトで

Slide 10

Slide 10 text

10 はじめに VaporモードON/OFFの⽐較をしました

Slide 11

Slide 11 text

11 はじめにスクリプティングの時間が短縮されていた

Slide 12

Slide 12 text

12 はじめに⾼負荷の状況下でもFPSが落ちていない Vapor ON: 更新 18回 Vapor OFF: 更新 5回

Slide 13

Slide 13 text

13 はじめに Vaporモードのすごさを体感した

Slide 14

Slide 14 text

14 はじめにのみサポートされる https://talks.sxzz.moe/2024-10-vue-fes-japan/9?clicks=4

Slide 15

Slide 15 text

15 はじめに Vaporモードのすごさを体感した私としては

Slide 16

Slide 16 text

16 Vaporモードに備えてに書き換えておきたい

Slide 17

Slide 17 text

17 今後の新たな機能もが真っ先に対応されるかも

Slide 18

Slide 18 text

18 (or Composition API) へ移⾏するメリットは⾼まってきている

Slide 19

Slide 19 text

19 ⽣成AIに丸投げして書き換えてもらおう！

Slide 20

Slide 20 text

Claude vs GitHub Copilot Vueコードを丸投げして変換対決！ Vue Fes Japan 2024

Slide 21

Slide 21 text

21 なぜ Claude と GitHub Copilotなの？ 🤔

Slide 22

Slide 22 text

22 A. 弊社ですぐに使えたからです

Slide 23

Slide 23 text

Claude / GitHub Copilot それぞれの特徴 23 23

Slide 24

Slide 24 text

24 Claude / GitHub Copilot それぞれの特徴 Claude と GitHub Copilot Claude GitHub Copilot chat

Slide 25

Slide 25 text

25 Claude / GitHub Copilot それぞれの特徴 Claude と GitHub Copilot Claude GitHub Copilot chat 汎用的な対話型AIアシスタント ● 複雑な指示や長文の処理が得意 ● 数学、分析、コーディング等、幅広いタスクに対応可能

Slide 26

Slide 26 text

26 Claude / GitHub Copilot それぞれの特徴 Claude と GitHub Copilot Claude GitHub Copilot chat 汎用的な対話型AIアシスタント ● 複雑な指示や長文の処理が得意 ● 数学、分析、コーディング等、幅広いタスクに対応可能開発に特化したリアルタイムコーディング支援AI ● VSCodeなどのIDEに統合され、コードの補完や提案を行う ● コンテキストを理解したコード生成が可能 ● プログラミング以外の用途には特化していない

Slide 27

Slide 27 text

27 Claude / GitHub Copilot それぞれの特徴今回利⽤したバージョン Claude GitHub Copilot chat 高精度な理解力と正確性を備えた汎用AI ● 複雑な指示や長文の処理が得意 ● 数学、分析、コーディング等、幅広いタスクに対応可能開発に特化したリアルタイムコーディング支援AI ● VSCodeなどのIDEに統合され、コードの補完や提案を行う ● コンテキストを理解したコード生成が可能 ● プログラミング以外の用途には特化していない Claude 3.5 Sonnet v2 GPT-4oがベース

Slide 28

Slide 28 text

28 Claude / GitHub Copilot それぞれの特徴プロダクトコードが外部に漏れないか ≒ 再学習に使われないか⽣成AI使⽤時の注意点

Slide 29

Slide 29 text

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」より

Slide 30

Slide 30 text

コード変換精度⽐較 30 30

Slide 31

Slide 31 text

31 コード変換精度⽐較上記のVueコンポーネントを<script setup lang="ts"> を使った構⽂で書き直してください。プロンプト

Slide 32

Slide 32 text

32 コード変換精度⽐較 ● atomsコンポーネント ○ 73⾏ ● moleculesコンポーネント ○ 339⾏ ● organismsコンポーネント ○ 1052⾏コンポーネントの⼤きさ毎に⽐較

Slide 33

Slide 33 text

33 コード変換精度⽐較 atomsコンポーネントの変換結果 Claude GitHub Copilot <script setup lang="ts"> interface Props { label: string disabled?: boolean // 省略 } withDefaults(defineProps<Props>(), { disabled: false, // 省略 }) import { defineProps, withDefaults } from 'vue'; const props = withDefaults(defineProps<{ label: string; disabled?: boolean; // 省略 }>(), { disabled: false, width: '', // 省略 });

Slide 34

Slide 34 text

34 コード変換精度⽐較変換精度に⼤きな差はない Claude GitHub Copilot <script setup lang="ts"> interface Props { label: string disabled?: boolean // 省略 } withDefaults(defineProps<Props>(), { disabled: false, // 省略 }) import { defineProps, withDefaults } from 'vue'; const props = withDefaults(defineProps<{ label: string; disabled?: boolean; // 省略 }>(), { disabled: false, width: '', // 省略 });

Slide 35

Slide 35 text

35 コード変換精度⽐較不要なコードはあるが、プロンプトで対応できるだろう Claude GitHub Copilot <script setup lang="ts"> interface Props { label: string disabled?: boolean // 省略 } withDefaults(defineProps<Props>(), { disabled: false, // 省略 }) import { defineProps, withDefaults } from 'vue'; const props = withDefaults(defineProps<{ label: string; disabled?: boolean; // 省略 }>(), { disabled: false, width: '', // 省略 }); 不要な import ⽂

Slide 36

Slide 36 text

36 コード変換精度⽐較 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 } （省略）（省略） const fromImage = () => { // 画像を追加する処理 }; const fromVideo = () => { // 動画を追加する処理 }; （省略）

Slide 37

Slide 37 text

37 コード変換精度⽐較 moleculesコンポーネントの変換結果その2 Claude GitHub Copilot <script setup lang="ts"> const emit = defineEmits<{ (e: 'createStep', payload: any): void (e: 'createStepList', payload: any[]): void }>() （定義がない）

Slide 38

Slide 38 text

38 コード変換精度⽐較 organismsコンポーネントの変換結果 Claude GitHub Copilot

Slide 39

Slide 39 text

39 コード変換精度⽐較 1455⾏のコンポーネントを出⼒ Claude GitHub Copilot

Slide 40

Slide 40 text

40 コード変換精度⽐較応答の⻑さ制限により出⼒不可 Claude GitHub Copilot

Slide 41

Slide 41 text

41 コード変換精度⽐較 ● atomsコンポーネントはほぼ同精度 ● moleculesコンポーネントだと GitHub Copilotのコードにヌケモレが顕著に多くなる ● organismsコンポーネントだとClaudeじゃないと出⼒できない <script setup>への変換⽐較まとめ

Slide 42

Slide 42 text

42 コード変換精度⽐較 ● GitHub Copilotはプロンプトの指⽰が反映されないことが⽐較的多かったその他の気付き

Slide 43

Slide 43 text

43 ところで社内ではVuexからPiniaへの書き換えも実施されている

Slide 44

Slide 44 text

44 これも⽣成AIで書き換えできるんだろうか

Slide 45

Slide 45 text

コード変換精度⽐較 Vuex to Pinia 45 45

Slide 46

Slide 46 text

46 参照すべき変換元ファイルが複数あっても適切に出⼒できるのか「への書き換え」と違う点

Slide 47

Slide 47 text

47 （Vuexのストア定義を渡し）useBookmarkStore.tsを⽣成してください。 deﬁneStoreの第2引数はオブジェクト形式で記述してください。プロンプト

Slide 48

Slide 48 text

48 出⼒結果 Claude GitHub Copilot

Slide 49

Slide 49 text

49 出⼒結果 Claude GitHub Copilot

Slide 50

Slide 50 text

50 出⼒結果 Claude GitHub Copilot

Slide 51

Slide 51 text

51 出⼒結果 Claude GitHub Copilot

Slide 52

Slide 52 text

52 出⼒結果応答の⻑さ制限により出⼒不可どちらもちゃんとストア定義されている！

Slide 53

Slide 53 text

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 }) { // スライド都合で省略 } }

Slide 54

Slide 54 text

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がない！！

Slide 55

Slide 55 text

55 変換結果抜粋その2: エラーハンドリング Claude3 GitHub Copilot catch (error) { createErrorHandler(error) throw error } catch (error) { console.error('Failed to load bookmarks:', error); }

Slide 56

Slide 56 text

56 Claude の⽅が元のコードを参照するのが得意 Claude GitHub Copilot catch (error) { createErrorHandler(error) throw error } catch (error) { console.error('Failed to load bookmarks:', error); }

Slide 57

Slide 57 text

57 ● Vueコードの変換においては Claude 3.5 Sonnet v2 の⽅が良かった ○ 複雑‧⻑⽂の指⽰を漏れることなく反映させている ○ まとまった量のコードを変換するタスクに向いている ● GitHub Copilotはリアルタイム‧少ない⼊⼒でコーディングを補助してくれるものだと改めて理解したやってみての感想

Slide 58

Slide 58 text

58 Vueコードの変換においては Claude 3.5 Sonnet v2 が良い！！！結論

Slide 59

Slide 59 text

59 Claude の⽅がいいけど、GitHub CopilotはIDEと連携してファイルを読ませたりできるところは便利なんだよな〜おまけ

Slide 60

Slide 60 text

Slide 61

Slide 61 text

61 みんなは Claude 3.5 Sonnetを GitHub Copilotから使おう！！まとめ

Slide 62

Slide 62 text

https://studist.jp/ 