【jQuery】QRコードを生成する完全ガイド｜qrcode.js・リアルタイム生成・PNG保存・カスタマイズまで

WebページでQRコードを動的に生成するには、JavaScriptライブラリを使う方法が最も手軽です。この記事では最も広く使われている qrcode.js をメインに、リアルタイム生成・PNG保存・カラーカスタマイズ・エラー訂正レベルの選択まで実務で使えるパターンを体系的に解説します。

使用するライブラリの選択

WebでQRコードを生成する主なライブラリを比較します。

この記事では qrcode.js をメインで解説します。jQuery不要で動作し、jQueryプロジェクトにも組み合わせて使えます。

qrcode.jsで基本的なQRコードを生成する

CDNでの読み込み

<!-- qrcode.js をCDNから読み込む -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<!-- QRコードを表示するコンテナ -->
<div id="qrcode"></div>

// 基本的なQRコードの生成
var qr = new QRCode(document.getElementById('qrcode'), {
  text:          'https://codingls.com/',  // QRコードに埋め込むテキスト/URL
  width:         200,                      // 幅（px）
  height:        200,                      // 高さ（px）
  colorDark:     '#000000',               // 暗い部分の色
  colorLight:    '#ffffff',               // 明るい部分の色
  correctLevel:  QRCode.CorrectLevel.M    // エラー訂正レベル
});

テキスト入力からリアルタイムにQRコードを生成する

フォームに入力された内容を即座にQRコードに反映するパターンです。URLやWi-Fiのパスワードを入力してQRコードを生成するツールで使われます。

<input type="text" id="qr-input" placeholder="URLまたはテキストを入力" style="width:300px;">
<button id="qr-generate-btn">QRコード生成</button>
<div id="qr-output" style="margin-top:16px;"></div>

$(function () {
  var qrInstance = null;

  function generateQR(text) {
    if (!text.trim()) return;

    var $output = $('#qr-output');
    $output.empty();  // 前のQRコードを消去

    qrInstance = new QRCode($output[0], {
      text:         text,
      width:        200,
      height:       200,
      colorDark:    '#000000',
      colorLight:   '#ffffff',
      correctLevel: QRCode.CorrectLevel.H
    });
  }

  // ボタンクリックで生成
  $('#qr-generate-btn').on('click', function () {
    generateQR($('#qr-input').val());
  });

  // Enterキーでも生成
  $('#qr-input').on('keydown', function (e) {
    if (e.key === 'Enter') generateQR($(this).val());
  });
});

QRコードをPNG画像としてダウンロードする

qrcode.jsはCanvas要素にQRコードを描画しているため、CanvasのデータURLを使ってPNG画像としてダウンロードできます。

<div id="qr-canvas-output"></div>
<button id="download-btn">PNG画像をダウンロード</button>

$(function () {
  // Canvasモードで生成（PNG保存にはCanvas必須）
  var qr = new QRCode($('#qr-canvas-output')[0], {
    text:         'https://codingls.com/',
    width:        300,
    height:       300,
    correctLevel: QRCode.CorrectLevel.H
  });

  $('#download-btn').on('click', function () {
    // Canvas要素を取得
    var canvas = $('#qr-canvas-output canvas')[0];
    if (!canvas) {
      alert('QRコードが生成されていません');
      return;
    }

    // Canvasの内容をDataURLとして取得してaタグでダウンロード
    var dataURL = canvas.toDataURL('image/png');
    var $a = $('<a>').attr({
      href:     dataURL,
      download: 'qrcode.png'
    });
    $('body').append($a);
    $a[0].click();
    $a.remove();
  });
});

カラー・サイズ・エラー訂正レベルのカスタマイズ

エラー訂正レベルの選択

エラー訂正レベルが高いほどQRコードが欠けても読み取れますが、コードが複雑（密度が高い）になります。

カラーカスタマイズ例

// ブランドカラーを使ったQRコード
new QRCode($('#qr-brand')[0], {
  text:         'https://codingls.com/',
  width:        200,
  height:       200,
  colorDark:    '#0284c7',  // ブランドカラー（青）
  colorLight:   '#f0f9ff',  // 背景色（薄い青）
  correctLevel: QRCode.CorrectLevel.H
});

現在のページURLのQRコードを自動生成する

Webサイトに「このページのQRコード」を表示する機能の実装例です。現在のページURLを取得してQRコードにします。

$(function () {
  var currentURL = window.location.href;

  new QRCode($('#page-qr')[0], {
    text:         currentURL,
    width:        200,
    height:       200,
    correctLevel: QRCode.CorrectLevel.M
  });

  // URLをテキストとして表示する
  $('#page-url-text').text(currentURL);
});

Google Charts APIでQRコードを生成する（サーバーサイド不要）

JavaScriptライブラリを使わずに、Google Charts APIのURLに画像リクエストを送るだけでQRコードを表示できます。ただし外部APIへの依存と通信が必要です。

<!-- imgタグのsrcにGoogle Charts APIのURLを設定するだけ -->
<img id="google-qr"
     src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl=https%3A%2F%2Fcodingls.com%2F&choe=UTF-8"
     alt="QRコード">

// jQueryでURLエンコードしてからimgのsrcに設定する
$(function () {
  var url     = 'https://codingls.com/';
  var apiBase = 'https://chart.googleapis.com/chart';
  var qrUrl   = apiBase + '?chs=200x200&cht=qr&chl=' +
                encodeURIComponent(url) + '&choe=UTF-8';

  $('#google-qr').attr('src', qrUrl);
});

まとめ

WebページでQRコードを生成する最もおすすめの方法は、CDNから qrcode.js を読み込んで使う方法です。jQuery不要で動作し、Canvas出力によるPNG保存やカラーカスタマイズも対応しています。

• 基本生成: new QRCode(element, { text, width, height })
• 再生成: コンテナを empty() してから新しいインスタンスを作成
• PNG保存: canvas.toDataURL("image/png") でDataURL取得 → aタグでダウンロード
• エラー訂正: 印刷・屋外には CorrectLevel.H、通常は M

関連記事: URLを取得・操作する完全ガイド / 要素の表示・非表示を切り替える完全ガイド

よくある質問（FAQ）