概要

QRコードを生成できるアプリを Vue3 で実装します。
生成したQRコードを読み取るとあらかじめ入力したURLにリンクするようにします。

QRコード生成にはQRCode.jsというライブラリを使用しています。

今回完成したものはこちら

UIの作成

URLの入力フォームとQRコードを表示する部分を作っていきます。
srcフォルダにQRCodeGenerator.vueという名前でファイルを作成します。

最初のインプット要素はリンク先のURLを入力するためのものです。
二つ目のセレクトボックスでQRコードの大きさを選択できるようにします。

<template>
  <div>
    <h1>QRコードジェネレーター</h1>
    <p>URLを入力してボタンを押すとQRコードが作成できます。</p>
    <form>
      <input
        type="url"
        placeholder="URLを入力してください"
      />
      <select>
        <option value="100">100x100</option>
        <option value="200">200x200</option>
        <option value="300" selected>300x300</option>
        <option value="400">400x400</option>
        <option value="500">500x500</option>
        <option value="600">600x600</option>
        <option value="700">700x700</option>
      </select>
      <button type="submit">QRコードを生成</button>
    </form>

    <!-- 以下ににQRコードを表示 -->
    <div id="qrcode"></div>
  </div>
</template>

各フォームのステート管理

入力された値をQRコード生成処理に使用できるように、各入力欄にステートを追加します。

<script setup>
import { ref } from 'vue'

const url = ref('')
const size = ref(300)
</script>

作成したステートをフォームに紐付けて入力された値に応じてステートが変化するようにします。
フォームとの紐付けにはv-modelを使います。

<template>
  <div>
    <h1>QRコードジェネレーター</h1>
    <p>URLを入力してボタンを押すとQRコードが作成できます。</p>
    <form>
      <input
        type="url"
        placeholder="URLを入力してください"
        v-model="url"
      />
      <select v-model="size">
        <option value="100">100x100</option>
        <option value="200">200x200</option>
        <option value="300" selected>300x300</option>
        <option value="400">400x400</option>
        <option value="500">500x500</option>
        <option value="600">600x600</option>
        <option value="700">700x700</option>
      </select>
      <button type="submit">QRコードを生成</button>
    </form>

    <!-- 以下ににQRコードを表示 -->
    <div id="qrcode"></div>
  </div>
</template>

QRコード生成処理を追加

表示部分ができたので今度はQRコードを生成する箇所を作っていきます。

QRコードの生成に必要なライブラリを使えるようにします。
index.htmlを開いてheadタグの中に以下を追加してください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

このライブラリの使い方は以下のようになっています。
QRコードを表示したい場所を指定し、埋め込むテキストとサイズを渡します。

<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
  text: "http://jindo.dev.naver.com/collie",
  width: 128,
  height: 128
})
</script>

QRCodeGenerator.vueにQRコード作成処理を追加します。
以下のgenerateが、QRコードを生成ボタンを押したときに実行される関数です。

<script setup>
import { ref } from 'vue'

const url = ref('')
const size = ref(300)

const generate = (e) => {
  e.preventDefault()

  new QRCode(document.getElementById('qrcode'), {
    text: url.value,
    width: size.value,
    height: size.value
  })
}
</script>

2回目以降のQRコード生成に対応する

ここまででアプリの基本的な機能の実装は終わりました。
URLを入力してボタンを押せばQRコードが表示されます。

ですが、一度QRコードを生成してからもう一度ボタンを押すと複数の画像が表示されてしまいます。
ボタンを何度押してもQRコードが1枚しか表示されないように改修しましょう。

QRコードはidがqrcodeのdiv要素の中に生成されます。
よってQRコード生成前にこのdiv要素の中を空っぽにする処理を追加します。

div要素へのアクセス手段にはgetElementByIdもありますが、せっかくなのでVueの組み込み機能でもあるテンプレート参照を使っています。

<script setup>
import { ref } from 'vue'

const url = ref('')
const size = ref(300)

const qrcode = ref(null)

const generate = (e) => {
  e.preventDefault()

  if (qrcode.value) {
    qrcode.value.innerHTML = ''
  }

  new QRCode(qrcode.value, {
    text: url.value,
    width: size.value,
    height: size.value
  })
}
</script>

<!-- 以下ににQRコードを表示 -->
<div id="qrcode" ref="qrcode"></div>