Reactを使用してQRコードジェネレーターを作成する方法

QR（クイックレスポンス）コードは、マシンが読み取れる形式で情報を保存して伝達できる2次元バーコードです。このような情報には、会社のWebサイトへのリンク、レストランのメニュー、製品の詳細、または手順ページが含まれます。

QRコードの技術は、企業がユーザーに情報をすばやく提供できるようにすることを目的としており、競争上の優位性をもたらす可能性があります。

実用的なコード例を使用して、ReactでQRコードジェネレーターを作成する方法を学びましょう。

始める前に

QRコードジェネレーターを作成するには、次のものが必要です。

HTML入力要素、JavaScript、およびReact useStateフックに関する基本的な知識。
Reactで条件付きレンダリングを実装する方法を理解していること。
ローカルマシンにNodeがインストールされており、パッケージマネージャー（npmまたはyarn）に慣れていること。

完成したプロジェクトは、参考およびさらなる調査のためにGitHubで確認できます。

QRコードの技術について

QRコードはシンプルかつランダムに見えるかもしれませんが、このフォーマットには、大量のデータを格納し、読みやすさを高めるためのいくつかの優れた機能が備わっています。

デザインと構造

おそらく、QRコードのイメージはご存知でしょう。上のQRコードをスキャンすると、MUOのホームページに移動します。同様のQRコードは、製品パッケージ、レストラン、または看板で見かけたことがあるかもしれません。

QRコードのデザインは、色やサイズ、QRコード内にロゴを追加すること、独自のアートワークを組み込むこと、またはさまざまな視覚効果を適用することなど、その美しさに重点が置かれています。

一方、QRコードの構造は、QRコード内の要素の物理的な配置に重点を置いています。これらの要素は、適切なデコードを保証するために、定義済みのレイアウトに従います。それらは次のとおりです。

データモジュールは、ユーザーに表示されるすべての情報を格納するために使用されるQRコードの白と黒のブロックです。
目またはファインダーパターンは、QRコードの角にある大きな正方形で、スキャナーがQRコードを正確かつ迅速に認識できるようにします。
セパレーターは、スキャナーがファインダーパターンと実際のデータを区別するのに役立ちます。
静止領域は、QRコードの周りの境界として機能する白い背景です。この領域は、スキャナーがファインダーパターンを見つけるのに役立ちます。
位置合わせマーカーは、ファインダーパターンよりも小さく、QRコードを任意の角度でスキャンできるようにします。

エンコードとデコード

前者は、入力データまたは情報（URL）をQRコードマトリックスに変換することを指します。対照的に、後者は、スマートフォンカメラまたは専用のQRコードスキャナーを使用してQRコードから保存されたデータまたは情報を抽出することを指します。

QRコードライブラリについて

QRCodeは、2Dバーコードを生成するために使用されるサードパーティのライブラリです。QRCodeは現在最も人気のあるQRコードライブラリであり、毎週100万回以上インストールされ、クライアントおよびサーバーアプリケーションをサポートしています。

既存のReactアプリケーションにQRCodeをインストールするには、ターミナルを開き、プロジェクトディレクトリに移動し、次のコードを実行します。

yarn add qrcode

またはnpmを好む場合は、次を使用します。

npm i qrcode

プロジェクトの設定

プロジェクトのリポジトリには、starterとfinalの2つのブランチがあります。前者をプロジェクトを構築するためのベースとして使用することも、後者を完成したデモをプレビューするために使用することもできます。

スターターアプリの複製

実装に集中できるよう、UIを備えたスターターアプリをGitHubで提供しています。ターミナルを開き、次のコマンドを実行して、リポジトリのスターターブランチをローカルマシンに複製します。

git clone -b starter https://github.com/makeuseofcode/qr-code-generator.git

プロジェクトディレクトリ内で次のターミナルコマンドを実行して、依存関係をインストールします。

yarn

または:

npm install

アプリケーションを起動するには、次を実行します。

yarn start

または:

npm start

素晴らしい！ブラウザにUIが表示されます。

ステップごとのロジックの実装

src/App.jsxファイルを開き、その内容を次のコードに置き換えます。

import { useState } from "react";
import "./styles.scss";
import QRCode from "qrcode";
const App = () => {
const [url, setUrl] = useState("");
const [dataUrl, setDataUrl] = useState("");
const handleQRCodeGeneration = () => {
QRCode.toDataURL(url, { width: 300 }, (err, dataUrl) => {
if (err) console.error(err);
// set dataUrl state to dataUrl
setDataUrl(dataUrl);
});
};
return (
<div className="app">
<h1>QR Code Generator</h1>
<form onSubmit={handleQRCodeGeneration}>
<input
required
type="url"
placeholder="Enter a valid URL"
value={url}
onChange={(e) => setUrl(e.target.value)}
/>
<input type="submit" value="Generate" />
</form>
{
/* code to conditionally display the QR code and a download button
would go here */
}
</div>
);
};
export default App;

このコードスニペットは、次のことを行います。

最上位レベルでQRCodeをインポートします。
入力されたURLを格納するurlステートと、生成されたQRコードをDataURL形式で格納するdataUrlステートを作成します。
handleQRCodeGenerationアロー関数を、QRCodeオブジェクトのtoDataURLメソッドを次の引数で呼び出すように作成します。
1. 最初の引数は、エンコードする入力URLです。
2. 2番目の引数は、QRコードの幅を指定するオプションオブジェクトです。
3. 3番目の引数は、入力されたURLのdataURLバージョンを返すコールバック関数です。
フォーム送信時に、form要素内のhandleQRCodeGenerationアロー関数を呼び出します。
ユーザーが入力した値にurlのステートを更新します。

これで、dataUrlステートが変更されたときに、生成されたビューをdiv要素で条件付きレンダリングできます。

{dataUrl && (
<div className="generated-view">
<img src={dataUrl} />
<a href={dataUrl}

ブラウザでアプリケーションをテストし、期待どおりの結果が得られることを確認します。

QRコードを安全にスキャンする

QRコードの技術は、人々が情報にすばやくアクセスできるようにすることを目的としていますが、潜在的なセキュリティ上の懸念もいくつかあります。

ReactアプリケーションでQRコードを生成する方法を学んだので、これらのQRコードを安全にスキャンする方法について学ぶ必要があります。

パソコンの友達