QR コード生成ライブラリ：qr-image vs qr.js vs qrcode 徹底比較

qr-image、qr.js、qrcode はすべて QR コードを生成するための JavaScript ライブラリですが、それぞれ得意とする環境と出力形式が異なります。開発現場では、サーバー側で画像ファイルを生成したいのか、ブラウザ上で即時描画したいのかによって最適な選択が変わります。ここでは、実際のコード例を交えながら、それぞれの違いと使いどころを解説します。

🖥️ 動作環境：サーバー側とクライアント側

qrcode は Node.js とブラウザの両方で動作します。

• универсаль наな設計により、同じコードベースでサーバーとクライアントを扱えます。
• 環境を気にせず導入できるため、フルスタック開発に最適です。

// qrcode: Node.js とブラウザ両方で動作
const QRCode = require('qrcode');
// Node.js
QRCode.toFile('./qr.png', 'text');
// Browser
QRCode.toCanvas(element, 'text');

qr-image は主に Node.js 環境向けです。

• ブラウザでの動作は想定されておらず、サーバーサイドでの画像生成に特化しています。
• 依存関係が軽く、サーバーレス関数などでの利用に向いています。

// qr-image: 主に Node.js 環境
const qr = require('qr-image');
// Server-side only
const png = qr.imageSync('text');

qr.js は主にブラウザ環境向けです。

• DOM 要素への描画を前提としており、Node.js での使用には追加の設定が必要です。
• クライアントサイドだけで完結するシンプルな用途に使われます。

// qr.js: 主にブラウザ環境
const QRCode = require('qr.js');
// Browser focused
new QRCode(element, 'text');

🖼️ 出力形式：画像データと描画要素

qrcode は多様な出力形式をサポートします。

• Canvas、SVG、DataURL、ターミナル、ファイルなど選択可能です。
• 用途に合わせて形式を使い分けられるため、柔軟性が高いです。

// qrcode: 多様な出力形式
const svg = await QRCode.toString('text', { type: 'svg' });
const dataURL = await QRCode.toDataURL('text');

qr-image は画像バッファやストリームを出力します。

• PNG、SVG、EPS などの形式でバイナリデータを返します。
• ファイルシステムへの保存や HTTP レスポンスへの直接出力に適しています。

// qr-image: 画像バッファ出力
const pngBuffer = qr.imageSync('text', { type: 'png' });
const svgStream = qr.image('text', { type: 'svg' });

qr.js は Canvas 要素への描画が中心です。

• 画像データとしての出力よりも、画面への表示を主目的としています。
• DataURL の取得も可能ですが、機能は限定的です。

// qr.js: Canvas 描画中心
const qrcode = new QRCode(element, {
  text: 'text',
  width: 128,
  height: 128
});

⚙️ API の使い方：同期と非同期

qrcode は Promise ベースの非同期 API を提供します。

• async/await で扱いやすく、現代の JavaScript コードに馴染みます。
• エラー処理も標準的な Promise チェーンで行えます。

// qrcode: Promise ベース
try {
  const url = await QRCode.toDataURL('text');
  console.log(url);
} catch (err) {
  console.error(err);
}

qr-image は同期とストリームの両方に対応します。

• imageSync で即時取得、image でストリーム処理が可能です。
• 単純なスクリプトでは同期版が手軽に使えます。

// qr-image: 同期とストリーム
const buffer = qr.imageSync('text'); // 同期
const stream = qr.image('text'); // ストリーム
stream.pipe(fs.createWriteStream('qr.png'));

qr.js はコンストラクタベースの同期処理です。

• インスタンス生成と同時に描画が行われます。
• 非同期処理が必要な場合は、ラップして使う必要があります。

// qr.js: 同期コンストラクタ
const qrcode = new QRCode(element, 'text');
// 描画は即時実行される

🛠️ メンテナンスと将来性

qrcode は活発にメンテナンスされています。

• 定期的なアップデートがあり、セキュリティや機能改善が続いています。
• 新規プロジェクトでの採用リスクが最も低いです。

// qrcode: 活発なメンテナンス
// 最新の Node.js バージョンでも動作確認が取れています
npm install qrcode

qr-image は安定していますが更新頻度は低めです。

• 機能が成熟しており、大きな変更は不要と判断されています。
• 単純な画像生成用途では十分に信頼できます。

// qr-image: 安定した動作
// 長期間変更されていない安定した API
npm install qr-image

qr.js はメンテナンス頻度が低く、レガシー扱いされつつあります。

• 大きなアップデートが長期間なく、新しい機能追加も期待薄です。
• 新規プロジェクトでは qrcode の使用を強く推奨します。

// qr.js: レガシー扱い
// 新規プロジェクトでの使用は避けるべきです
npm install qr.js

📊 summary: 選び方の基準

💡 結論：どのライブラリを使うべきか

qrcode は現代の Web 開発における標準的な選択肢です 📦。Node.js とブラウザの両方で動作し、出力形式も豊富いため、ほとんどのプロジェクトで最初に検討すべきライブラリです。特に、将来の拡張性やメンテナンス性を重視する場合はこれ一択です。

qr-image はサーバー側で画像ファイルだけを生成したい場合に有効です 🖥️。依存関係を最小限に抑えたい場合や、既存の Node.js スクリプトで単純な QR 生成が必要な場合に適しています。

qr.js は新規プロジェクトでは使用を避けるべきです ⚠️。既存のレガシーシステムで既に導入されており、置き換えコストが高い場合のみ検討します。それ以外のケースでは、より現代的な qrcode への移行を推奨します。

最終的には、「サーバー側だけなら qr-image、両方対応なら qrcode」 と覚えておくと便利です。qr.js は特殊な事情がない限り、選択肢から外して問題ありません。