Webアプリに「QRコードで情報を共有したい」「URLやテキストを簡単に配布したい」といったニーズはよくあります。この記事では、QRコードの生成と画像としてのダウンロードをJavaScriptで実装する方法を、ライブラリ選定からコード実装まで順を追って解説します。
Contents
✅ 使用ライブラリ：qrcode
まず、QRコードの生成には qrcode ライブラリが便利です。Node.jsでもブラウザでも動作し、canvasやimgタグ、データURL形式など柔軟な出力が可能です。
インストール（Node.js/Reactの場合）
npm install qrcode
またはCDN（Vanilla JS用）
<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
🧪 基本のQRコード生成（ブラウザ）
<div id="qrcode-container"></div>
<script>
const text = "https://example.com";
QRCode.toCanvas(text, { width: 200 }, (err, canvas) => {
if (err) return console.error(err);
document.getElementById('qrcode-container').appendChild(canvas);
});
</script>
💾 QRコードを画像としてダウンロードするには？
QRコードはCanvas要素として出力されるため、canvas.toDataURL() を使えばPNG形式の画像としてダウンロード可能です。
▶ フル実装例（QRコード + ダウンロードボタン）
<div id="qrcode-container"></div>
<button id="download-btn">ダウンロード</button>
<script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script>
<script>
const text = "https://example.com";
QRCode.toCanvas(text, { width: 256 }, (err, canvas) => {
if (err) return console.error(err);
canvas.id = "qrCanvas";
document.getElementById('qrcode-container').appendChild(canvas);
});
document.getElementById("download-btn").addEventListener("click", () => {
const canvas = document.getElementById("qrCanvas");
const link = document.createElement("a");
link.download = "qrcode.png";
link.href = canvas.toDataURL("image/png");
link.click();
});
</script>
🧱 HTML構成だけで見るとこんな感じ
<div id="qrcode-container"></div>
<button id="download-btn">QRコードを保存</button>
生成されたQRコードは <canvas> としてDOMに挿入され、ボタンを押すとPNGファイルとしてローカルに保存されます。
💡 応用ポイント
- テキストだけでなく、メールアドレス、電話番号、Wi-Fi設定などもエンコード可能（
mailto:〜,tel:〜など）。 - モバイル端末では自動でギャラリーに保存されるように設計する場合は別途工夫が必要です。
canvas.toBlob()を使えば、File APIと組み合わせた処理も可能。
✅ よくあるトラブルと対策
| 問題 | 解決策 |
|---|---|
| QRコードが生成されない | ライブラリの読み込み確認、toCanvasに失敗していないか確認 |
| ダウンロードが動作しない（モバイル） | aタグでのダウンロードは一部ブラウザで制限されることあり |
| 画像が荒い | widthを大きめに設定し、解像度を確保する |
📝 まとめ
qrcodeライブラリを使えばブラウザで簡単にQRコードが生成可能。canvas.toDataURL()で画像形式に変換し、a.downloadで保存できる。- 最低限のHTMLとJSだけで軽量に実装可能。
QRコードの共有は、URLや認証コードの配布など、シンプルながら実用性の高いUI/UXです。この記事のコードをもとに、自分のアプリやLPなどにぜひ取り入れてみてください。
