syncfusion-react-barcode

Syncfusion React バーコードの実装

このスキルを使用する場面

次のような場合にこのスキルを使用します。

• React でバーコード（Code39、Code128、Code11、Code32、Code93、Codabar）を生成する
• URL、連絡先情報、製品識別用の QR コードを作成する
• ラベル、追跡、在庫管理用の Data Matrix コードを生成する
• バーコードの外観（サイズ、色、テキスト表示）をカスタマイズする
• バーコードを画像（JPG、PNG）または base64 文字列としてエクスポートする
• フォーム、レポート、アプリケーションにバーコード生成を組み込む

ライブラリの概要：3 種類のジェネレーター

Syncfusion React Barcode には、主に 3 つのコンポーネントがあります。

1. BarcodeGeneratorComponent - 従来の 1D バーコード（Code39、Code128 など）

   • 文字エンコーディングは種類によって異なります
   • 最適な用途：製品コード、在庫管理、小売
   • 読み取りやすさ：高く、基本的なスキャナーで読み取れます

2. QRCodeGeneratorComponent - 2D Quick Response コード

   • バージョン 1～40 に対応し、自動的に拡大縮小します
   • 最適な用途：URL、連絡先情報、製品リンク、広告
   • 容量：数千文字まで

3. DataMatrixGeneratorComponent - 2D Data Matrix コード

   • 正方形または長方形の形式で、コンパクトなサイズです
   • 最適な用途：ラベル、部品の追跡、航空宇宙／自動車
   • 容量：英数字データに対応し、効率的にエンコードできます

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールと依存関係
• Vite／React のセットアップ
• コンポーネントのインポートと基本構造
• 親コンポーネントの初期化

バーコードジェネレーターの種類

📄 参照： references/barcode-generator.md

• Code39、Code39Extended、Code11、Code128、Code32、Code93、Codabar
• 各種類の用途
• 種類ごとの文字セットのサポート
• エンコーディングとチェックサムの情報
• 各種類の実装例

QR コードジェネレーター

📄 参照： references/qr-code-generator.md

• QR コードの基本とバージョン
• バージョンの自動選択
• 文字エンコーディング（numeric、alphanumeric、JIS8）
• 一般的な用途とパターン
• さまざまなデータ型を使用した実装

Data Matrix ジェネレーター

📄 参照： references/data-matrix-generator.md

• Data Matrix の基本と構造
• エンコーディングの規則と対応する文字
• サイズと容量に関する考慮事項
• ラベルおよび印刷への応用
• 他のバーコードの種類との比較

カスタマイズとスタイル設定

📄 参照： references/customization.md

• バーコードの寸法（幅、高さ）
• 色（foreColor、backgroundColor）
• 表示テキストのカスタマイズ
• サイズや色のバリエーション例
• レスポンシブデザインのパターン

エクスポートと統合

📄 参照： references/export-and-integration.md

• 画像（JPG、PNG）としてエクスポート
• base64 文字列としてエクスポート
• メソッド：exportImage(filename, format)
• メソッド：exportAsBase64Image(format)
• フォーム、API、レポートとの統合

クイックスタートの例

Code39 バーコード

import React from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <BarcodeGeneratorComponent
      id="barcode"
      type="Code39"
      value="SYNCFUSION"
      width="200px"
      height="150px"
    />
  );
}

QR コード

import React from 'react';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <QRCodeGeneratorComponent
      id="qrcode"
      value="https://www.syncfusion.com"
      width="200px"
      height="200px"
    />
  );
}

Data Matrix

import React from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <DataMatrixGeneratorComponent
      id="datamatrix"
      value="Syncfusion"
      width="200px"
      height="200px"
    />
  );
}

一般的なパターン

パターン 1：動的な値の生成

const [barcodeValue, setBarcodeValue] = React.useState('DEFAULT123');

<BarcodeGeneratorComponent
  type="Code128"
  value={barcodeValue}
  width="200px"
  height="150px"
/>

パターン 2：ボタンのクリック時にエクスポート

const barcodeRef = React.useRef();

const handleExport = () => {
  barcodeRef.current.exportImage('barcode', 'PNG');
};

<div>
  <BarcodeGeneratorComponent
    ref={barcodeRef}
    type="Code39"
    value="SYNC123"
    width="200px"
    height="150px"
  />
  <button onClick={handleExport}>Download Barcode</button>
</div>

パターン 3：スタイルを設定したコンテナー

<div style={{ padding: '20px', border: '1px solid #ddd' }}>
  <QRCodeGeneratorComponent
    value="https://example.com"
    width="250px"
    height="250px"
    foreColor="#333"
    backgroundColor="#fff"
  />
</div>

主な Props

Prop	説明	使用するコンポーネント
type	バーコードの種類（Code39、Code128、Code11、Code32、Code93、Codabar）	BarcodeGeneratorComponent
value	エンコードするデータ	すべてのジェネレーター
width	バーコードの幅（px 付きの文字列）	すべてのジェネレーター
height	バーコードの高さ（px 付きの文字列）	すべてのジェネレーター
foreColor	暗色／バーの色	すべてのジェネレーター
backgroundColor	明色／スペースの色	すべてのジェネレーター
displayText	表示テキストをカスタマイズするオブジェクト	すべてのジェネレーター
id	一意のコンポーネント識別子（エクスポートに必須）	すべてのジェネレーター

一般的なユースケース

1. 小売・在庫管理：商品や SKU 用の Code128 バーコード
2. E コマース：商品ページやレビューにリンクする QR コード
3. 物流：荷物の追跡やラベル用の Data Matrix
4. 文書管理：文書のメタデータを埋め込んだ QR コード
5. マーケティング：分析機能付きの動的 QR コード
6. 医療：検体や患者のラベル用の Code128／Code39
7. フォームのワークフロー：印刷またはアーカイブ用のバーコードをエクスポート

次のステップ

1. ユースケースに基づいてジェネレーターの種類を選びます
2. はじめにのガイドを読みます
3. 該当するジェネレーターのドキュメントを確認します
4. 必要に応じて外観をカスタマイズします
5. ワークフローで必要な場合は、エクスポート機能を実装します