NuxtでQRコードを簡単に生成する機能を実装！こんなに簡単に実装できたのか！

QRコード生成機能は実装が簡単！

URLを入力してポチッとボタンを押せばQRコードが生成されるあの機能。
実際に実装してみましたが、超簡単にできたので共有します。
バックエンドは不要で、Javascriptだけで実装できてしまいます。
（複雑そうな仕組みに見えるので、もっと大変かと思っていました...）

実装方法は以下の通りです。
フレームワークはNuxt.js + TypeScriptで実装しました。

モジュールのインストール

まずはqrcodeというモジュールをインストールしましょう。

TypeScriptを使用している型は型定義されたものをインストールします。
（ちゃんと用意されているみたい）

# npm
npm install --save @types/qrcode
# yarn
yarn add @types/qrcode

特に型定義が不要であれば以下のようにインストールしましょう。

# npm
npm install --save qrcode
# yarn
yarn add qrcode

コードの実装

あとはこんな感じでimportしてQRCode.toDataURLをすればできてしまうのです。
※URLとwidthの箇所は環境に合わせて設定してください。

import QRCode from 'qrcode'

const url = 'https://example.jp' // URLの指定ができます。
const width = 100                // widthの指定ができます。
QRCode.toDataURL(url, { width: width })
  .then(code => {
    // コード(URLスキーム)が生成されるので、imgタグのsrc=の中に値を入れましょう
    console.log(code)
  })
  .catch(err => {
    console.error(err)
  })

上記は超簡単な生成例ですが、以下ページのようにQRCode.toDataURLには色々なオプションがあったりします。
https://www.npmjs.com/package/qrcode
仕様に合わせて設定してみてください。

以上で終わりです。
こんな簡単に実装できてしまうんですね。

筆者が実装してみたページ

筆者がNuxt.js + TypeScriptで実装してみたページのリンクを以下に載せておきます。
jidou.jp

QRコード生成ツール

上記の実装方法を応用し、複数のURLを一度にQRコードに変換できたりします。
SPでURLを打ち込むのが面倒な時に、このサイトを使ってたりします。
試しに使ってみてください。