QRコード生成ツールをブラウザ完結で作った話｜エラー訂正の仕組みとサーバー送信しない理由

「QRコード 作成 無料」で検索すると、たくさんのサイトが出てきます。ただ、その多くには見落とされがちな仕組みがあります。この記事では、Lapis Tech Toolsの QRコードジェネレーター を題材に、実装上の設計判断と、QRコードそのものの仕組みを解説します。

---

なぜ「サーバーに送信しない」ことが重要なのか

一般的な無料QRコード作成サイトの多くは、入力したURLやテキストを一度サーバーへ送信し、サーバー側で画像を生成して返す仕組み（サーバーサイドレンダリング）になっています。

これは、非公開を前提とした推測不可能な長文URL（例: 限定公開ページ、招待リンクなど）を変換する場合、そのURL文字列が外部サーバーにログとして記録・保存されるリスクがゼロではないことを意味します。

このツールではqrcodeというJavaScriptライブラリを使い、QRコードの計算・描画をすべて端末のブラウザ内部で完結させています。

import QRCode from 'qrcode';

QRCode.toCanvas(canvas, text, {
  width: size,
  margin: 2,
  errorCorrectionLevel: ecLevel, // 'L' | 'M' | 'Q' | 'H'
  color: { dark: colorDark, light: colorLight }
});

通信を遮断した状態（機内モードなど）でもQRコードが生成できることが、この設計の何よりの証明になります。

---

エラー訂正レベルとは何か

QRコードには「一部が汚れたり欠けたりしてもデータを読み取れる」という特徴があります。これを実現しているのがリード・ソロモン符号というエラー訂正技術です。QRコード規格ではこの訂正能力を4段階（L・M・Q・H）から選べます。

レベル	復元可能な割合	主な用途
L	約7%	データ量を優先したい場合
M	約15%	標準的な用途（デフォルト）
Q	約25%	ロゴを重ねる場合など
H	約30%	ポスター印刷など、汚損が想定される場面

訂正レベルを上げるほど、破損に強くなる代わりにQRコードのドット（モジュール）が細かく複雑になり、データ容量あたりの見た目のサイズが大きくなるというトレードオフがあります。ツールではこの4段階をその場で切り替えて、見た目の変化を確認しながら選べるようにしています。

---

リアルタイムプレビューの実装

入力のたびにQRコードを再描画すると、特に長いテキストでは処理が重くなることがあります。そのため、入力イベントに対してデバウンス処理（一定時間、次の入力がなければ実行する）を入れています。

inputs.forEach(el => {
  el.addEventListener('input', () => {
    clearTimeout(timer);
    timer = window.setTimeout(renderQR, 100);
  });
});

100ミリ秒という短い間隔にすることで、体感的には「リアルタイム」に見えつつ、1文字入力するごとに毎回再計算するような無駄な負荷を避けています。

---

まとめ

QRコードジェネレーターは一見単純なツールですが、

• サーバーに送信しないことによる情報漏洩リスクの排除
• リード・ソロモン符号によるエラー訂正レベルの選択
• デバウンスによる描画パフォーマンスの最適化

といった設計判断が積み重なっています。非公開URLの共有や、印刷物用のQRコード作成にはQRコードジェネレーターを安全に使ってみてください。