日本語の言葉の意味がわかりません

Question

Uncaught TypeError: Cannot read property 'getContext' of undefined

翻訳結果
捕捉されないTypeError：未定義のプロパティ 'getContext'を読み込めません

これはgetContextを定義したら読み込めますよということですか？

この定義の仕方はどうすればいいですか？

<template>
  <div class="qrReader">
    <qrcode-reader @init="onInit" @decode="onDecode"></qrcode-reader>
  </div>
</template>

<script lang="ts">

import Vue from 'vue';
import { AccountHttp, MosaicHttp, NamespaceHttp, MosaicService, Address, PublicAccount, PlainMessage, TransactionHttp,
        SimpleWallet, Password, NetworkType, NetworkCurrencyMosaic, AggregateTransaction, Account, TransferTransaction, Deadline } from 'nem2-sdk';
import Nem2Client from '../libs/Nem2Client';
import settingModel from '@/libs/settingModel';
import { QrcodeReader } from 'vue-qrcode-reader';

export default {
  components: { QrcodeReader },
  name: "qrReader",
  data: () => ({
    nem: new settingModel(),
    qrJson: '',
    isLoading: false,
    rules: {
      senderAddrLimit: (value: string) => (value && (value.length === 46 || value.length === 40)) || '送金先アドレス(-除く)は40文字です。',
      senderAddrInput: (value: string) => {
        const pattern = /^[a-zA-Z0-9-]+$/
        return pattern.test(value) || '送金先の入力が不正です'
      },
      amountLimit: (value:number) => (value >= 0) || '数量を入力してください',
      amountInput: (value:string) => {
        const pattern = /^[0-9.]+$/
        return (pattern.test(value) && !isNaN(Number(value))) || '数字の入力が不正です'
      },
      messageRules: (value:string) => (value.length <= 1024) || 'メッセージの最大文字数が超えています。'
    }
  }),
  methods: {
    async onInit (promise: any) {
      // show loading indicator
      try {
        await promise
        // successfully initialized
      } catch (error) {
        if (error.name === 'NotAllowedError') {
          // user denied camera access permisson
        } else if (error.name === 'NotFoundError') {
          // no suitable camera device installed
        } else if (error.name === 'NotSupportedError') {
          // page is not served over HTTPS (or localhost)
        } else if (error.name === 'NotReadableError') {
          // maybe camera is already in use
        } else if (error.name === 'OverconstrainedError') {
          // passed constraints don't match any camera. Did you requested the front camera although there is none?
        } else {
          // browser is probably lacking features (WebRTC, Canvas)
        }
      } finally {
        // hide loading indicator
      }
    },
    onDecode(content: any){
      // とりあえず呼ばれているか確認
      console.log(content)

      //
      if (content !== '') {
        let qrJson = JSON.parse(content)
        console.log(qrJson)
        console.log(qrJson.data.msg)
        this.sendMultisig(qrJson)
      }
      this.$router.push({name: "sendbutton"})
    },
    /**
     * 今現在マルチシグ送金を行いたいがよくわからないので一つずつ処理できればと思う
     *  */
    async sendMultisig(qrContent: any) {
      // 公開鍵を調べる
      const accountHttp = new AccountHttp('http://localhost:3000');
      const address = Address.createFromRawAddress('SD5DT3-CH4BLA-BL5HIM-EKP2TA-PUKF4N-Y3L5HR-IR54');

      accountHttp
          .getAccountInfo(address)
          .subscribe(accountInfo => console.log(accountInfo), err => console.error(err));

      // テストとしてアカウントの作成が行われるか試す
      // const account = Account.generateNewAccount(NetworkType.MIJIN_TEST);
      // console.log('Your new account address is:', account.address.pretty(), 'and its private key', account.privateKey);
      // 1個目
      // Your new account address is: SC7B5U-GMABRU-QC24YU-ME4JAW-GZBNKF-4AO6WQ-77FW
      // and its private key
      // 46E0D6466801F9202A227F67E86B0E4A6CC616833E9E1FD6A16BD98DCB21A87D

      // 2個目
      // Your new account address is: SCLIPO-74NVXP-MNHT6O-EB6PXH-SFMX7S-EN5HB5-VWIZ
      // and its private key
      // 3329530DA473FF9F57FEBCF6DFC96996F0726BA2131AD7B184DA5BB0C966160D

      // 3個目
      // Your new account address is: SAGIBM-SJUL2J-IUBQU6-3LVZJY-K75QUI-N6XA3Z-2DIL
      // and its private key
      // 32DCAFD970C64BC73433E0E9094B90F2F910E9A7EC493C9ABB79B79DF363E906

      // おそらくこの時点ではマルチシグに必要な変数定義のみが行われていると思う
      // const transactionHttp = new TransactionHttp( 'http://localhost:3000');

      // // 送信者の秘密鍵
      // const cosignatoryPrivateKey = process.env.COSIGNATORY_1_PRIVATE_KEY as string;
      // const cosignatoryAccount = Account.createFromPrivateKey(cosignatoryPrivateKey, NetworkType.MIJIN_TEST);

      // // マルチシグアカウントのパブリックキー
      // const multisigAccountPublicKey = process.env.MULTISIG_ACCOUNT_PUBLIC_KEY as string;
      // const multisigAccount = PublicAccount.createFromPublicKey(multisigAccountPublicKey, NetworkType.MIJIN_TEST);

      // // 受信者のアドレス
      // const recipientAddress = Address.createFromRawAddress('SD5DT3-CH4BLA-BL5HIM-EKP2TA-PUKF4N-Y3L5HR-IR54');

      // // 通常のトランザクションの作成
      // const transferTransaction = TransferTransaction.create(
      //   Deadline.create(),
      //   recipientAddress,
      //   [NetworkCurrencyMosaic.createRelative(10)],
      //   PlainMessage.create('sending 10 cat.currency'),
      //   NetworkType.MIJIN_TEST);

      // アグリゲートトランザクションの作成
      // const aggregateTransaction = AggregateTransaction.createComplete(
      //   Deadline.create(),
      //   [transferTransaction.toAggregate(multisigAccount),],
      //   NetworkType.MIJIN_TEST,
      //   []);

      // 多分これは連署者の署名の実装
      // const networkGenerationHash = process.env.NETWORK_GENERATION_HASH as string;
      // const signedTransaction = cosignatoryAccount.sign(networkGenerationHash);

      //transactionHttp
        //.announce(signedTransaction)
        //.subscribe(x => console.log(x), err => console.error(err));
      }
  },
};
</script>

<style>
.qrReader {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  width: 300px;/*幅*/
  height: 300px;/*高さ*/
  text-align: center;/*中央寄せ*/
  transition: .3s;/*滑らかな動きに*/
}
</style>

QRコードを読み込んだら別のページに戻る処理をしています。
そこでページ遷移はできているのですがそれとは引き換えにエラーがたくさん発生するようになっています

Comments

[takasima20]

場合によります。とりあえず、エラーが出るコードを質問に追記してください。

[kazumasamatsumo]

コードを追加しました。
そもそもここに書いた中にgetContextがないので？？？となっています

[takasima20]

できれば、どこでエラーが出てるかもわかるといいとおもいます。

[kazumasamatsumo]

ありがとうございます！！エラーが発生するタイミング等記載させていただきました！

Answer 1

foo.getContext() みたいな処理をする際に foo が undefined のケースで出るエラーです。こんな感じで同じエラーを出せます。

> let foo = undefined
undefined
> foo.getContext
TypeError: Cannot read property 'getContext' of undefined

---

追記:
getContext なんてそもそも書いてないっていう件ですが、ライブラリ内部で起こってるエラーっぽいですね。
github の vue-qrcode-reader のリポジトリの issue にそれっぽいのを見つけたのでリンクしておきます。
https://github.com/gruhn/vue-qrcode-reader/issues/85#issuecomment-483122371

Comments

[kazumasamatsumo]

getContextの前にある単語が定義されていないときに発生するエラーという認識ですか？

[set0gut1]

エラー自体はその理解であってます。関連した記述をgithubで見かけたので回答に追記しました。

[kazumasamatsumo]

ありがとうございます！！

[kazumasamatsumo]

ありがとうございます！！qrcode-readerの使い方自体が間違っていました！！本当にありがとうございます！！
https://gruhn.github.io/vue-qrcode-reader/demos/DecodeAll.html

[set0gut1]

おめでとうございます！

Answer 2

getContextは定義されていません。
という方が理解しやすいかと。

getContextというのはなにをするモノなんでしょうか。
そのように実装すればいいと言えばそんでいいんですが、問題はそこじゃないような気がします

Comments

[kazumasamatsumo]

getContextが何なのかコードを検索かけているのですがまだ見つかりません

[y_waiwai]

わけのわからないコードをいくらいじったところでわけがわからないのはかわりません。
身に過ぎたことやあっさりやめて、コードを理解することに努めましょう

[kazumasamatsumo]

はーいわかりました！