WebアプリにおけるQRコード生成ライブラリ：技術的比較と選定ガイド

QRコード生成はモバイル認証、支払い、チケット発行など多くのWebアプリで必要となる機能です。しかし「QRコードを表示する」と一言で言っても、環境（ブラウザ vs Node.js）、フレームワーク（Reactあり/なし）、デザイン要件（シンプル vs 高度カスタマイズ）、出力形式（SVG, Canvas, PNG, PDF）によって最適なライブラリは大きく異なります。この記事では、代表的な5つのnpmパッケージを実際のコード例とともに比較し、各ユースケースに合った選択を支援します。

🧩 基本的な使い方と出力形式

まず、各ライブラリの基本的な使い方とサポートされる出力形式を確認しましょう。

qrcode-generator：低レベルで軽量なコア

qrcode-generatorは、QRコードのデータ生成のみを行う最小限のライブラリです。描画は含まれていないため、SVGやCanvasへの出力は自分で実装する必要があります。

// qrcode-generator: データ生成のみ
import qrcode from 'qrcode-generator';

const qr = qrcode(0, 'M'); // エラー訂正レベルM
qr.addData('https://example.com');
qr.make();

// SVG文字列を手動で生成
const svg = qr.createSvgTag(4, 10); // cellSize=4, margin=10

qrcode：多用途でバランスの取れた高レベルAPI

qrcodeはqrcode-generatorを内部で使い、すぐに使える出力メソッドを提供します。

// qrcode: ブラウザでSVG出力
import QRCode from 'qrcode';

const svg = await QRCode.toString('https://example.com', { type: 'svg' });

// Node.jsでPNGバッファ生成
const pngBuffer = await QRCode.toBuffer('https://example.com');

qr-image：Node.js専用の画像出力

qr-imageはNode.js環境でのみ動作し、PNG/SVG/PDF形式をサポートします。

// qr-image: Node.jsでのPNG生成
const qr = require('qr-image');

const pngStream = qr.image('https://example.com', { type: 'png' });
// Express.jsでレスポンスに流す例
app.get('/qr.png', (req, res) => {
  res.type('png');
  pngStream.pipe(res);
});

qr-code-styling：ブラウザ向けの高度カスタマイズ

qr-code-stylingはブラウザ専用で、CSSのようなスタイルオプションで見た目を細かく調整できます。

// qr-code-styling: 色・ロゴ付きQRコード
import QRCodeStyling from 'qr-code-styling';

const qrCode = new QRCodeStyling({
  data: 'https://example.com',
  width: 300,
  height: 300,
  dotsOptions: { color: '#4267b2', type: 'rounded' },
  cornersSquareOptions: { color: '#000000', type: 'extra-rounded' },
  image: 'logo.png' // 中央にロゴ挿入
});

qrCode.append(document.getElementById('qr-container'));

react-qr-code：React専用のシンプルコンポーネント

react-qr-codeはReactコンポーネントとして即座に使えるシンプルな実装です。

// react-qr-code: Reactコンポーネント
import QRCode from 'react-qr-code';

function App() {
  return (
    <div>
      <QRCode value="https://example.com" size={256} />
    </div>
  );
}

🎨 カスタマイズ性とデザイン制御

シンプルなQRコードで十分な場合

react-qr-codeやqrcodeのデフォルト設定で十分です。特にReactプロジェクトではreact-qr-codeが最も手軽です。

// react-qr-code: 最小構成
<QRCode value="https://example.com" />

// qrcode: デフォルトSVG
const svg = await QRCode.toString('https://example.com', { type: 'svg' });

色や形状を変更したい場合

qr-code-stylingが圧倒的に柔軟です。qrcodeでも一部のスタイル変更は可能ですが、制限があります。

// qrcode: 限定的な色変更（SVGの場合）
const svg = await QRCode.toString('https://example.com', {
  type: 'svg',
  color: { dark: '#FF0000', light: '#FFFFFF' }
});

一方、qr-code-stylingではドットの形状（円、四角、丸四角など）、コーナーのデザイン、背景色、ロゴ挿入などが可能です。

// qr-code-styling: 詳細なスタイル制御
new QRCodeStyling({
  data: 'https://example.com',
  dotsOptions: { type: 'dots', color: '#333' },
  backgroundOptions: { color: '#eee' },
  image: '/logo.svg',
  imageOptions: { hideBackgroundDots: true, imageSize: 0.4 }
});

qrcode-generatorはスタイル制御が一切ないため、完全に自前実装が必要です。

🖥️ 環境対応：ブラウザ vs Node.js

qr-imageはブラウザで動作しないため、フロントエンドでの利用はできません。逆にqr-code-stylingはNode.js環境で使えません。

react-qr-codeはSSR（サーバーサイドレンダリング）時にエラーになる可能性があるため、Next.jsなどのフレームワークで使う場合はuseEffectや動的インポートでクライアントサイド限定にする必要があります。

📦 出力形式のサポート

各ライブラリがサポートする出力形式を比較します。

• qrcode-generator: 生データ（ビット配列）のみ。SVG/Canvasは手動実装必須
• qrcode: SVG, Canvas, PNG（ブラウザ）, PNGバッファ（Node.js）, UTF8テキスト
• qr-image: PNG, SVG, EPS, PDF（Node.js専用）
• qr-code-styling: SVG（Canvas出力も可能だが非推奨）
• react-qr-code: SVG（React要素として）

PDF出力が必要な場合はqr-imageが唯一の選択肢です。ブラウザでPNG画像としてダウンロードしたい場合はqrcodeのtoCanvas() + toDataURL()を使うのが一般的です。

// qrcode: ブラウザでPNGダウンロード
const canvas = await QRCode.toCanvas('https://example.com');
const link = document.createElement('a');
link.download = 'qrcode.png';
link.href = canvas.toDataURL();
link.click();

⚙️ エラーハンドリングとパフォーマンス

• qrcode-generator: 最も軽量で高速。エラーは同期的にthrow
• qrcode: Promiseベースで非同期処理。無効な入力でreject
• qr-image: Streamベースでメモリ効率良好。エラーはstreamのerrorイベント
• qr-code-styling: 初期化時にDOM操作が発生するため、レンダリングコストあり
• react-qr-code: Reactの再レンダリングに追従。props変更で自動更新

大規模なQRコード（大量のデータ）を扱う場合、qrcode-generatorやqrcodeの低レベルAPIがパフォーマンス面で有利です。一方、qr-code-stylingは複雑なスタイル計算のため、描画に時間がかかることがあります。

🧪 実際の選定シナリオ

シナリオ1: ReactアプリでシンプルなQRコードを表示

✅ 推奨: react-qr-code 理由: コンポーネントとして即座に使え、追加の設定不要。バンドルサイズも小さい。

import QRCode from 'react-qr-code';

export default function TicketQR({ ticketId }) {
  return <QRCode value={`ticket:${ticketId}`} size={200} />;
}

シナリオ2: ブランドカラーに合わせたカスタムQRコード

✅ 推奨: qr-code-styling 理由: 色・形状・ロゴの自由度が高く、マーケティング資料やブランドガイドラインに沿ったデザインが可能。

new QRCodeStyling({
  data: 'https://campaign.example.com',
  dotsOptions: { color: '#e50914', type: 'classy' },
  cornersSquareOptions: { color: '#e50914', type: 'extra-rounded' },
  backgroundOptions: { color: '#ffffff' }
});

シナリオ3: Node.js APIでPDFチケットにQRコードを埋め込む

✅ 推奨: qr-image 理由: PDF出力が唯一サポートされており、サーバーサイドでの静的ファイル生成に最適。

const qr = require('qr-image');
const pdf = require('pdfkit');

const doc = new pdf();
doc.pipe(fs.createWriteStream('ticket.pdf'));

const qrStream = qr.image('TICKET-123', { type: 'pdf' });
qrStream.pipe(doc); // 実際にはPDFKitの画像埋め込みAPIを使う

シナリオ4: バンドルサイズを最小限に抑えたい軽量アプリ

✅ 推奨: qrcode-generator 理由: コア機能のみで依存がなく、描画ロジックを自前で最適化できる。

// 自前SVG描画関数
function renderQrToSvg(qrData, size = 200) {
  const qr = qrcode(0, 'M');
  qr.addData(qrData);
  qr.make();
  return qr.createSvgTag(size / qr.getModuleCount(), 4);
}

シナリオ5: ブラウザとNode.jsの両方で同じコードを使いたい

✅ 推奨: qrcode 理由: 同じAPIで両環境に対応しており、出力形式も豊富。

// 共通モジュール
export async function generateQrSvg(data) {
  return await QRCode.toString(data, { type: 'svg' });
}

// ブラウザでもNode.jsでも同じ関数が使える

📌 まとめ：選定のポイント

• Reactを使っている？ → react-qr-code（シンプル） or qr-code-styling（カスタム）
• Node.jsサーバーで画像生成？ → qr-image（PDF必要） or qrcode（汎用）
• 高度なビジュアルカスタマイズ？ → qr-code-styling（ブラウザ専用）
• 最小限のバンドルサイズ？ → qrcode-generator（描画は自前）
• 両環境で共通コード？ → qrcode

各ライブラリは明確な役割分担を持っており、要件に合ったものを選べば過剰な依存や機能不足を避けられます。特に、qr-code-stylingはブラウザ専用、qr-imageはNode.js専用という点を間違えると実装が破綻するため、環境要件を最初に確認することが重要です。