QRCode.Fun QRCode.Fun
始める
JavaScript QRコードライブラリ

JavaScriptでQRコードを生成

JavaScriptはWeb開発で最も人気のある言語です。qrcode.jsやqr-code-stylingなどのライブラリを使用してブラウザやNode.jsでQRコードを生成するか、QRCode.fun APIを呼び出して高度なスタイリングを取得できます。

QRジェネレーターを試すAPIドキュメントを見る

インストール

お好みのパッケージマネージャーを使用して人気のJavaScript QRコードライブラリをインストールします。

npm
npm install qrcode
yarn
yarn add qrcode
npm (styled)
npm install qr-code-styling

JavaScriptライブラリでQRコードを生成

人気のJavaScript QRコードライブラリを使用してプロジェクトでQRコードを生成するコード例です。

Basic QR Code (Node.js)
const QRCode = require('qrcode')

// Generate QR code as data URL
const dataUrl = await QRCode.toDataURL('https://qrcode.fun')
console.log(dataUrl)

// Generate QR code as file
await QRCode.toFile('./qrcode.png', 'https://qrcode.fun', {
  width: 300,
  margin: 2,
  color: {
    dark: '#1A2B3C',
    light: '#FFFFFF'
  }
})
Browser Canvas Rendering
import QRCode from 'qrcode'

const canvas = document.getElementById('canvas')
await QRCode.toCanvas(canvas, 'https://qrcode.fun', {
  width: 256,
  margin: 2,
  color: {
    dark: '#1A2B3C',
    light: '#FFFFFF'
  }
})
Styled QR Code with Logo
import QRCodeStyling from 'qr-code-styling'

const qrCode = new QRCodeStyling({
  width: 300,
  height: 300,
  data: 'https://qrcode.fun',
  image: '/logo.png',
  dotsOptions: {
    color: '#1A2B3C',
    type: 'rounded'
  },
  cornersSquareOptions: {
    color: '#8564C3',
    type: 'extra-rounded'
  },
  backgroundOptions: {
    color: '#FFFFFF'
  }
})

qrCode.append(document.getElementById('qr-container'))
qrCode.download({ extension: 'png' })
QRCode.fun API

JavaScriptでAPIを使ってQRコードを生成

QRCode.fun APIを使用して、JavaScriptアプリケーションからカスタムカラー、シェイプ、ロゴ付きのスタイル付きQRコードを生成します。

JavaScript API連携
// Using fetch (Browser or Node.js 18+)
const response = await fetch('https://qrcode.fun/api/generate-qr-styled', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    data: 'https://qrcode.fun',
    width: 300,
    height: 300,
    type: 'png',
    margin: 10,
    dotsOptions: {
      color: '#1A2B3C',
      type: 'rounded'
    },
    cornersSquareOptions: {
      color: '#8564C3',
      type: 'extra-rounded'
    },
    backgroundOptions: {
      color: '#FFFFFF'
    }
  })
})

const result = await response.json()
// result.data contains the base64 PNG data URL
console.log(result.data)

QRコードライブプレビュー

今すぐJavaScriptでQRコードを生成してみましょう。

QRプレビュー

ネイティブライブラリ vs API

JavaScript QRコードライブラリの直接使用とQRCode.fun APIの比較。

機能ネイティブライブラリQRCode.fun API
セットアップの複雑さパッケージのインストール、バンドラーの設定単一のHTTPリクエスト
カスタマイズライブラリにより異なるフルスタイリング：カラー、シェイプ、ロゴ
オフラインサポートはいインターネット接続が必要
メンテナンス手動で依存関係を更新常に最新
出力形式PNG, SVG（ライブラリにより異なる）PNG, SVG

JavaScript QRコードの使用例

JavaScript開発者がQRコードを生成する一般的なシナリオ。

Webアプリケーション

React、Vue、Angular、またはバニラJSのWebアプリで、リンク共有、決済、認証のためにQRコードを動的に生成します。

Node.jsバックエンド

請求書、チケット、配送ラベル、自動メール添付用にサーバーサイドでQRコードを作成します。

プログレッシブWebアプリ

PWAにQRコード生成機能を追加し、オフライン対応のモバイル体験とスキャン可能なコードを実現します。

ブラウザ拡張機能

現在のページURLまたは選択テキストのQRコードを生成するChromeまたはFirefox拡張機能を構築します。

よくある質問

JavaScriptでのQRコード生成に関する一般的な質問。

最も人気のある2つの選択肢は、qrcode（軽量でシンプルなQRコードに最適）とqr-code-styling（カラー、シェイプ、ロゴによる高度なカスタマイズ）です。シンプルさを求めるならqrcode、デザインの柔軟性を求めるならqr-code-stylingを選びましょう。

JavaScriptでQRコード生成を始めましょう

無料のオンラインジェネレーターで素早くQRコードを作成するか、APIをJavaScriptプロジェクトに統合して自動生成を実現しましょう。

QRジェネレーターを開くAPIドキュメントを見る