0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Claude Desktop MCPでVue2からVue3のアップグレード、機能拡充を行った

Last updated at Posted at 2025-11-24

タイトル通りですが、これが結構良かったです。

対象のプログラムは、私がVue.jsの勉強用に作った自分用のツールで、勉強したとは言い難いほどちゃちな作りをしていました。

実装している機能は以下のとおりです。

  • マークアップ言語、CSS、JavaScript、JSON、SQLを整形するツール
  • QRコードをカメラデバイスやアップロード画像から読み取るツール(QR Code Reader)
  • アップロード画像のData URI Schemeを生成するツール
  • パスワードを生成するツール(Password Generator)
  • 世界時計

Vue2からVue3へのアップグレード過程で次のようなこともお願いしました。

  • Password Generator
    • もともと使っていたライブラリーがブラウザーの機能制限の影響で使えなくなっているので、別のライブラリを採用
    • 似た文字列を排除、生成したパスワードの中に文字の重複がないようにすること
  • QR Code Reader
    • QRの読み取り精度が悪いのでその改善
    • 全体的にレイアウトの調整、レスポンシブ対応
  • 世界時計
    • 中途半端なコンポーネント化をしている(DOM使っていたりしている)ので、これを完璧にしてくれ

それぞれちゃんとコード改修してくれますが、やはり完璧ではありません。
こちらがデバッグをして、エラーコードと症状をある程度伝えるとちゃんと修正してくれます。

QR Code Readerに至っては、QRにフォーカスしているマークまで実装してくれましたw(頼んでないけど作ってくれる。なんともありがたい)
しかも読み取ったらビープ音が鳴るという親切仕様。
通常だったらこの手の実装は結構面倒なので、仕事でも断っちゃいそうです。
ここまで簡単にできちゃうと、仕事で使いたくなりますね。

qiita_vue2_to_vue3_002.png

2025.11.27追記
よくよく見ると枠線がつくのはVue Qrcode Readerのデモにサンプルがあるみたいです。

いくつか問題があるのですが、ひとつは比較的小規模なプロジェクトであっても、有料契約しているProプランの上限を使い切ってしまうということです。
その場合は、自分でいじったりもしますが、基本的にしないほうがいいので、後ほどどういう変更をしたのかを共有するようにしています。
Maxプランにすればいいというところもありますが、現状はまだいいかなという感じです。

もう一つは大規模プロジェクトでどのような動きになるのだろうということです。
使っているときの制限では、考える時間が長くてなかなかレスポンスがなかったり、アウトプットの制限など、AIに考えてもらっている時間が長いことが多かったので、待ちの時間が多くなります。
このあたりは、使い方によるのかもしれませんが、もし使えるなら結構強力なんだろうなと思いました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?