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

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

## 🎯 動作確認

PNG SVG
⏳ 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