QRコード等の読取値を取得し、各項目を表示する

## やりたいこと
### ハンディバーコードスキャナからQRコード等を読み取り、値を抽出、項目ごとに振り分け表示する。（Vue.js）

伝票のデータは以下の仕様があるものとします。
|項目|何番目の桁数か|読み取り値|
|:---:|:---:|:--:|
|納入番号|8-12桁目|A2563|
|品番|20-29桁目|2301255567|
|数量|13-14桁目|05|

## 画面の動き
ページ表示時に自動でテキストボックスへフォーカスされる。
![input_2024-06-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3805530/a0b870b3-fbde-de9f-a831-30372b78819b.png)
　　　　↓

①値を入力（QRコード読み取り）
例えば、ある伝票のQRコードを読み取った時、
"**12345␣␣A2563405G01␣␣2301255567**" が入力されたとします。

![qr_code_inputed_2024-06-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3805530/de84fc2e-442a-6af0-6cfc-9c513f630d50.png)
　　　　↓
②追加ボタン押下
　　　　↓
③各項目値を表示する。
以下の様に、入力されたQRコードを納入番号、品番、数量の右欄へ振り分け表示します。

![qr_button_on_2024-06-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3805530/7ca2e654-1d64-8c7b-eb6d-2433107d66de.png)

以下のソースコードをjsfiddleのHTML欄へコピペして動きを確認して頂けます。

https://jsfiddle.net/

```HTML:vue.js
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Practice</title>
</head>
<body>
    
    <!-- Vue.js アプリケーションのマウントポイント -->
    <div id="app">
        <!-- フォームの送信時に addQrCode メソッドを呼び出す -->
        <form @submit.prevent="addQrCode">
            <label for="name">QRコード</label>
            <!-- v-model を使用して qrCode データプロパティとバインド -->
            <input type="text" id="name" v-model="qrCode" ref="qrInput" style="width: 220px;" />
            <button type="submit">追加</button>
        </form>
        <br>
        <!-- qrData 配列の各要素を表示 -->
        <div v-for="(data, index) in qrData" :key="index">
            <div>QRコード：{{ data.qrCode }}</div>
            <div>納入番号：{{ data.nonyuNum }}</div>
            <div>品番：{{ data.hinban }}</div>
            <div>数量：{{ data.suryou }}</div>
            <br>
        </div>
    </div>
 
    <!-- Vue.js の読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script type="text/javascript">
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    qrCode: '', // QRコードの入力値
                    qrData: [] // QRコードデータの配列
                };
            },
            computed: {
                // 納入番号を計算するコンピューテッドプロパティ
                nonyuNum() {
                    return this.qrCode.length >= 13 ? this.qrCode.substring(8, 13) : '';
                },
                // 品番を計算するコンピューテッドプロパティ
                hinban() {
                    if (this.qrCode.length >= 30) {
                        let part1 = this.qrCode.substring(20, 25);
                        let part2 = this.qrCode.substring(26, 30);
                        return `${part1}-${part2}`;
                    } else {
                        return '';
                    }
                },
                // 数量を計算するコンピューテッドプロパティ
                suryou() {
                    return this.qrCode.length >= 15 ? this.qrCode.substring(13, 15) : '';
                }
            },
            methods: {
                // QRコードを qrData 配列に追加する
                addQrCode() {
                    this.qrData.push({
                        qrCode: this.qrCode,
                        nonyuNum: this.nonyuNum,
                        hinban: this.hinban,
                        suryou: this.suryou
                    });
                    this.qrCode = ''; // 入力フィールドをクリア
                },
                // QRコード入力フィールドにフォーカス
                focusInput() {
                    this.$refs.qrInput.focus();
                }
            },
            // コンポーネントのマウント時に実行される処理
            mounted() {
                this.focusInput();
                document.addEventListener('click', this.focusInput);
            },
            // コンポーネントが破棄される前に実行される処理
            beforeUnmount() {
                document.removeEventListener('click', this.focusInput);
            }
        }).mount('#app'); // Vue.js アプリケーションを #app 要素にマウント
    </script>
 
</body>
</html>
```

## ソースコードの概要
①"12345␣␣A2563405G01␣␣2301255567" が入力されqrCodeへ格納。
②追加ボタン押下でaddQrCode()メソッドが走り各変数へ値が格納。
③例えばthis.qrCode.substring(8, 13)であればqrCodeの8‐12桁目の値を抽出しnonyuMum()へリターン。
④例えばnonyuMum()でリターンされた値をnonyuNumへ格納。
```JavaScript:addQrCode()
 addQrCode() {
    this.qrData.push({
        qrCode: this.qrCode,          // QRコード
        nonyuNum: this.nonyuNum,      // 納入番号
        hinban: this.hinban,          // 品番
        suryou: this.suryou           // 数量
    });
```
⑤\<div>納入番号：{{ data.nonyuNum }}\</div>で表示。