🔲 Barcode.WASM Easy-8-Steps (TypeScript)

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

🎯 動作確認

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

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

💡 ヒント: src/main.ts を見ると、下記と同じコードが実際に動いています。 
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
//  1次元バーコード生成の例（CODE128）
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

// Step 2: モジュールの初期化（非同期）
const barcodeModule: 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: string = 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 を参照してください。

📋 ファイル構成

Easy-8-Steps/
├── src/
│   ├── wasm/
│   │   ├── barcode.js      ← WASMローダー
│   │   └── barcode.wasm    ← WASMバイナリ
│   └── main.ts             ← メインコード（ここを編集）
├── index.html              ← このファイル
├── package.json
├── tsconfig.json
└── vite.config.ts