vibe codingでQRコードを作成するWEBアプリを作ってみた

27 Jun 2025 — 2 min read

無料のQRコードを作成するアプリって結構あるんですが、自分用のが欲しかったので、今回作ってみました。
正直このレベルだと、特に難しい事を考えなくても作れちゃいます。

一応課程を乗せておきます

制作環境ですが「Claude 4 Sonnet」を利用して作成しました。

これで作成すると、画面構成は現在の完成形ができあがりましたが、QRコードの生成ボタンが押しても反応しないなど、動きませんでした。
QRコード生成のJSのライブラリを利用するような仕組みだったのですが、リンク切れしていたみたいで、エラーが出ていました。

そこで、なんとかしてってお願いすると、出来合いの物を利用しないで、QRコードそのものを生成する機能から実装してくれましたが、実際に実行してみると、中途半端な画像を生成しました。
こちらの画像です

なので、中身のテキストが変換されてない旨と、この画像を直接AIに渡すと、これで動くようになってしまいました。
このツールで出したQRコードです。

この生成サイトへのリンクをQRコードに変換しました。
問題無くスマホからもアクセスできたので、生成したQRコードも問題なさそうです。

QRコードを生成にご自由に利用してくださいｗ
もし変換に失敗するとかあれば教えてください。