はじめに

なんか最近ハードウェアとソフトウェア両方ともやってて雑食となりつつある今日この頃。
AWS資格、せめてCRFくらいは取りたいなぁと思いつつ最近はReactで色々やっております。

さて、今回はReact内でQRコードを表示しようとした際にちょっとした事があったので、折角なので新しい物を導入した雑感を記録していこうかと思います。

開発環境

AWS EC2 t2.microインスタンス
Amazon Linux 2 ＋ Cloud9
Node.js 16.11.1
React 17.0.2

事の発端

Webアプリケーションを作っていると、どうしても必要な物というのは色々出てくる。
その中で、2段階認証(俗に言うTOTP)が必要な段階になった。
あまり予算を使いたくない都合上SMSを使った認証は却下して、QRコードとAuthenticatorを利用した仕組みを導入しようとしました。
で、さーqrcode.reactも導入したし、いざQRコードを表示！ってなった時にこんなエラーが出た訳です。

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: QRCodeCanvas

ざっくり自己流に翻訳すると、
「えーマジー？componentWillReceivePropsー！？古ーい！componentWillReceivePropsが許されるのは、React17までよねー！キャハハハ！」
って事なわけで今は問題ないけど、将来的にアップデートされたらダメじゃんこれ、な状態です。
表面上は今作れておけば問題ないんだろうけど、将来的に何かあったら嫌だしなー、だったら解消させようかー、という若干の下心を下に解消策を探す旅に出ました。

そして見つけた新しい子

とりあえず上記のエラーが発生するのはQRコードを表示する為のプログラムが古くて、旧式の関数使っているのがいけないんだよな？
と言う解釈のもと、まずはqrcode.reactをアップデート。しかし結果は表示変わらず。
そうなると何か別の物を持ってくる必要があるよなー、と言う事でnpmで色々探しているとnext-qrcodeと言う物を発見。見た感じ使い勝手はそこまで変わらなさそうなので、これを使ってみようと思った。
基本的な使い方はそれとなくReactのuseStateに似ている為、結構とっつきやすかったと言うのもある。

npm i next-qrcode

まずはインストールして、

QR.js

import React from 'react';
import { useQRCode } from 'next-qrcode';

const QR = () => {
  const { Canvas } = useQRCode();
  return (
  <Canvas
    text={'https://qiita.com/AoiReia'} // QRコードで表示される内容。省略できません。
    options={{ // ここの要素は省略可能。ご利用は計画的に。
      type: 'image/webp', // 出力フォーマット。 pngかjpegかwebpから選べる
      quality: 0.95, // クオリティ。 0〜１で1に近い方が綺麗。
      level: 'M', // 補正レベル。 low(L)、medium（Ｍ）、quartile(Ｑ)、high(H)から選べる。
      margin: 3, // クワイエットゾーンの広さを決める。
      scale: 4, // ドット1個につき何px使うかの指標。
      width: 200, // 出力画像の幅の指定。(収まらなかったら無視する)
      color: { // RGBAで色を決める。
        dark: '#010599FF',
        light: '#FFBF60FF',
      },
    }}
  />
  );
}

export default QR;

と、かなりざっくり言えばこんな感じで記載をすればいい。

上記のコードを実際に動かすとこんな風になります。

ちなみにtext要素以外は省略可能だったり、

  const { Image } = useQRCode();

と表記すれればImage出力になったりもするらしい。(ただ、書いている本人には違いはよくわからない。)
詳しくは下記参考サイトにてご確認いただけますと幸いです。

参考サイト

React.jsでQRコード生成
 next-qrcode

おわりに

色々作っていると必要になる物も多いけど、なんだかんだ探せば大量に出てくる世の中は非常に助かる。
先人の知恵とはよく言った物だが、使えるものはしっかり使わせてもらって、快適なプログラミングライフを送りたいなー、と思った今日この頃でした。

ReactでQRコードを表示したいというお話