Migrate: コンポーネントをキャメルケースに、script setup構文に

[sevenc-nanashi]

内容

Vueの書き方を変更します。

• <script setup>構文を使う
• コンポーネントをキャメルケースで書くようにする
• template→script→styleの順番にする

関連 Issue

• closes: Vue3の<script setup>を使うようにする #1065

スクリーンショット・動画など

（なし）

その他

（なし）

[Hiroshiba]

ありがとうございます！！
凄まじい変更量ですね！

VOICEVOXはテストがないため、安心して大胆な変更をする場合の戦略は２つあります。
変更にはバグがないかをそこそこ慎重に調査するか、勇気を持ってえいやでマージする方法です。
やはり変更量はなるべく少なくした方がユーザーにとっても（バグ期待値が低いので）良いのかなと思っています。

script setupとtemplateを入れ替えられているのですが、これによりscriptのコードがすべて差分になっていそうです。
順序は保ったままのが良いかなと思いました。
（あと大多数の人が最初に見たいのはview部分なので、templateが上のが良いのかなと思います。これは要議論。）

いろいろ確認できてとても助かりました、ありがとうございます！！！

[sevenc-nanashi]

https://stackoverflow.com/questions/71052403/ref-not-working-on-custom-component-in-vue3

どうやらscript setupにするとexposeしないといけなくなる様子。
EditorHome内のAudioCell以外には見付かりませんでした

[sevenc-nanashi]

[17:15:40.618] [error] TypeError: Cannot read properties of undefined (reading 'config')
    at updateModifiers$1 (http://localhost:8080/js/webpack:/node_modules/quasar/dist/quasar.esm.prod.js:1951:29)
    at beforeMount (http://localhost:8080/js/webpack:/node_modules/quasar/dist/quasar.esm.prod.js:1983:1)
    at callWithErrorHandling (http://localhost:8080/js/webpack:/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:157:1)
    at callWithAsyncErrorHandling (http://localhost:8080/js/webpack:/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:166:1)
    at invokeDirectiveHook (http://localhost:8080/js/webpack:/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:2819:1)
    at mountElement (http://localhost:8080/js/webpack:/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5236:1)
    at processElement (http://localhost:8080/js/webpack:/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5178:1)
    at patch (http://localhost:8080/js/webpack:/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5098:1)
    at ReactiveEffect.componentUpdateFn [as fn] (http://localhost:8080/js/webpack:/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5638:1)    
    at ReactiveEffect.run (http://localhost:8080/js/webpack:/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:187:1)

という警告が大量に出ていたため、Quasarをアプデしました。

[sevenc-nanashi]

分割のためClose。