🔲 Barcode.WASM Easy-8-Steps

Barcode.WASMの使い方をたった8ステップで理解できるサンプルです。
まずは下のボタンを押して、バーコードが生成されることを確認してください。

🎯 動作確認

⏳ WASMモジュール初期化中...

📝 コード解説（8ステップ）

💡 ヒント: このHTMLファイルのソースコードを見ると、下記と同じコードが実際に動いています。 
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//  1次元バーコード生成の例（CODE128）
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

// Step 1: モジュールのインポート
import Module from './barcode.js';

// Step 2: モジュールの初期化（非同期）
const barcodeModule = await Module();

// Step 3: バーコードインスタンス作成
const barcode = new barcodeModule.Code128();
// ↑ 他のバーコード: Code39, Code93, Jan13, QR, DataMatrix など

// Step 4: 指定幅ぴったり調整（省略可）
barcode.setFitWidth(true);
// ↑ false にすると、指定幅以内で高精度なバーコードを出力

// Step 5: 出力形式設定（省略可、デフォルトはPNG）
if (isSvg) barcode.setOutputFormat('svg');

// Step 6: バーコード生成
const result = barcode.draw("Hello 12345", 400, 100);
//                         ↑データ      ↑幅  ↑高さ

// Step 7: HTMLに表示
if (isSvg) {
    element.innerHTML = result;                      // SVG: そのまま挿入
} else {
    element.innerHTML = '<img src="' + result + '">';  // PNG: imgタグ
}

// Step 8: メモリ解放（重要！）
barcode.delete();
⚠️ 重要: WASMはガベージコレクションされません。delete() を忘れるとメモリリークします。

🔄 バーコードを変更するには

Step 3 のクラス名を変更するだけです：

// 1次元バーコードの例
new barcodeModule.Code128()     // CODE128（英数字・記号OK）
new barcodeModule.Code39()      // CODE39（英大文字・数字のみ）
new barcodeModule.Jan13()       // JAN-13（数字13桁）

// 2次元バーコードの例
new barcodeModule.QR()          // QRコード
new barcodeModule.DataMatrix()  // DataMatrix
📖 全18種類のバーコードと詳細なAPIは barcode.wasm.md を参照してください。

📋 ファイル構成

your-project/
├── Easy-8-Steps.html   ← このファイル（またはあなたのHTML）
├── barcode.js          ← WASMローダー（必須）
└── barcode.wasm        ← WASMバイナリ（必須）