58,493 測定値

React で QR コードジェネレーターをビルドする方法

に Teri8m2022/07/01

長すぎる; 読むには

クイックレスポンス (QR) コードジェネレーターを作成する背後にある考え方は、データを画像からテキストに変換することです。 QR コードは単に画像データをテキストとして表現したものであり、レストランのメニューやコンサートのチケット、オンラインカレンダーの招待状、支払いなど、さまざまな用途に使用できます。

Company Mentioned

featured image - React で QR コードジェネレーターをビルドする方法

このチュートリアルでは、JavaScript ライブラリの React を使用して QR コードを作成する方法を学習します。 React を使用する利点は、開発者がコンポーネントを再利用する方法を提供するため、フロントエンドアプリケーションの構築が簡単になることです。

このチュートリアルでは、次の内容について説明します。

前提条件
入門
QR コードジェネレーターの作成
QR コードアプリのスタイリング
生成された QR コードのダウンロード
結論
資力

デモ

前提条件

このチュートリアルを完了するには、次のものが必要です。

React.js の基本的な理解

ノード >= 14.0.0 および npm >= 5.6がローカルマシンにインストールされている

入門

コード行を記述する前に、ターミナルを開いて次のコマンドを実行します。

 npx create-react-app qrcode-generator

上記のコマンドは、ファイルをスキャフォールディングし、React アプリの作成に必要ないくつかのパッケージをインストールします。

次に、プロジェクトディレクトリに移動し、次の場所でアクセス可能な開発サーバーを実行します。

 http://localhost:3000

以下のコマンドを使用して、ブラウザーでアプリをプレビューします。

 cd qrcode-generator npm start

最後に、QR コードジェネレーターを作成するために必要な依存ライブラリをインストールしましょう。次のコマンドを実行します。

 npm install qrcode.react

 qrcode.react

: DOM にレンダリングするための QR コードを生成する React コンポーネント。

QR コードジェネレーターの作成

これまでのところ素晴らしい仕事です！

QR コードジェネレーターの作成は、QR コードの構造を含むファイルとコンポーネントの作成から始まります。 src ディレクトリ内に components というフォルダーを作成し、そのフォルダー内に QrCode.js という名前のファイルを作成します。

次のコードをコピーして貼り付けます。

 // src/components/QrCode.js
import { useState } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => {  const [url, setUrl] = useState( "" );  const downloadQRCode = ( e ) => {  e.preventDefault();  setUrl( "" ); };  const qrCodeEncoder = ( e ) => {  setUrl(e.target.value); };  const qrcode = (    < QRCodeCanvas
      id = "qrCode"
      value = {url}
      size = {300}
      bgColor = { "# 00ff00 "}      level = { " H "}  />
 );  return (    < div className = "qrcode__container" >
      < div > {qrcode} </ div >
      < div className = "input__group" >
        < form onSubmit = {downloadQRCode} >
          < label > Enter URL </ label >
          < input
            type = "text"
            value = {url}
            onChange = {qrCodeEncoder}
            placeholder = "https://hackernoon.com"
     />
          < button type = "submit" disabled = {!url} >
      Download QR code          </ button >
        </ form >
      </ div >
    </ div >
 ); }; export default QrCode;

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

輸入
```
useState
```
変数の初期状態を宣言するために使用され、空の文字列に設定された url と
```
setState
```
関数、
```
 setUrl
```
状態を更新するために使用されます
図書館、
```
 qrcode.react
```
、生成された QR コードをレンダリングするために使用されます

次に、
```
 downloadQRCode
```
に付属する機能
```
onSubmit
```
の方法
```
<form>
```
送信イベントによってトリガーされる要素
上で
```
<input>
```
要素、
```
 onChange
```
関数を使用したイベントハンドラー
```
'qrCodeEncoder'
```
ユーザーの入力を受け取り、その値を取得し、新しい入力が入力されるたびに QR コードを変更します

変数
```
qrcode
```
創造された。それは
```
QRCodeCanvas
```
コンポーネントを呼び出し、QR コードをカスタマイズしてブラウザーで表示できるようにするいくつかの使用可能なプロンプトを渡します。コンポーネントでの props の使用について詳しくは、ドキュメントをご覧ください。

最後に、
```
 <button>
```
ユーザー入力がデータを受け取るまで、要素は無効になります

QRコードアプリのスタイリング

の中に

src

フォルダー、スタイルシートの作成、

 styles.css

アプリの視覚的な魅力を担当

次のコードをコピーして貼り付けます。

 /* src/styles.css */
*, *:before, *:after { margin: 0 ;  padding : 0 ;  box-sizing : border-box; } :root { -- font - color : 230 35% 7% ; } body {  color : hsl ( var (--font-color)); } img {  max-width : 100% ;  display : block; } .section {  padding : 2em 0 ;  display : flex;  min-height : 100vh ;  align-items : center; } .container {  margin -inline: auto;  max-width : 75rem ;  width : 85% ; } .input__group {  display : flex;  margin-top : 2em ; } input {  width : 100% ;  padding : 1em 0.75em ;  border : 1px solid #444343 ;  border-radius : 3px ;  margin-bottom : 2em ;  margin-top : 0.75em ; } button {  border : unset;  background : hsl ( 231 , 77% , 90% );  padding : 1em 0.75em ;  color : hsl ( var (--font-color));  cursor : pointer;  text-transform : uppercase;  font-weight : bold; } @media screen and ( min-width : 768px ) {  .section {    padding : 0 ; }  input {    margin : 0 ; }  .qrcode__container {    display : flex;    align-items : center; }  .input__group {    margin-left : 3em ; }  input {    margin-bottom : 2em ;    margin-top : 0.75em ;    font-size : 1rem ; } }

次に、アプリのエントリポイントである App.js に QrCode.js ファイルとスタイルシートをインポートします。

 // src/App.js
import QrCode from "./components/QrCode" ; import "./styles.css" ; export default function App ( ) {  return (    < div className = "section container" >
      < QrCode />
    </ div >
 ); }

手順が完了すると、アプリは次のようになります。

生成された QR コードのダウンロード

ユーザーが生成された QR コードをダウンロードするオプションは、さまざまなユースケースで役立ちます。コードの印刷から Web サイトへの埋め込みまで、用途は無限です。

に戻る

components/QrCode.js

ファイル、使用するコードベースを更新しましょう

refs

ドキュメントオブジェクトモデル (DOM) ノードにアクセスします。

 // src/components/QrCode.js
import { useState, useRef } from "react" ; // other import
const QrCode = () => {  const [url, setUrl] = useState( "" );  const qrRef = useRef(); // include this: call the useRef function
 ...  const qrcode = (    < QRCodeCanvas
      id = "qrCode"
      value = {url}
      size = {300}
      bgColor = { "# 00ff00 "}      level = { " H "}  />
 );  return (    < div className = "qrcode__container" >
      < div ref = {qrRef} > {qrcode} </ div > {/* include this */}   {/* form input container */}    </ div >
 ); }; export default QrCode;

では、更新してみましょう

downloadQRCode

の機能

QrCode.js

QR コードのダウンロードボタンをクリックし、キャンバスを画像ファイルとして保存できるようにします。

 // src/components/QrCode.js
// imports
const QrCode = () => {  // state
  // useRef
  const downloadQRCode = ( e ) => {  e.preventDefault();    let canvas = qrRef.current.querySelector( "canvas" );    let image = canvas.toDataURL( "image/png" );    let anchor = document .createElement( "a" );  anchor.href = image;  anchor.download = `qr-code.png` ;    document .body.appendChild(anchor);  anchor.click();    document .body.removeChild(anchor);  setUrl( "" ); }; ...  return (    < div className = "qrcode__container" >
      < div ref = {qrRef} > {qrcode} </ div >
   {/* form input container */}    </ div >
 ); }; export default QrCode;

の中に

downloadQRCode

関数では、次のことが行われます。

ノードがいつ変更されるかを知るために、 .current プロパティで ref オブジェクトの現在の値を参照します。

の
```
qrcode.react
```
コンポーネントはDOMでcanvas要素を生成し、コンテンツを動的に作成する機能を提供します

キャンバスは
```
toDataURL
```
ファイル形式に設定された指定された型パラメーターを持つメソッド、
```
 image/png
```

次にアンカー、
```
 <a>
```
要素が作成され、
```
 href
```
ボタンクリックでQRコードをダウンロードする画像に設定

アンカー要素はドキュメントの本文に追加され、QR コードがダウンロードされると削除されます

最後に、州の URL が更新されます。
```
 setUrl
```
フォームの送信時に生成された QR コードの入力をクリアする変数

コンポーネント QrCode.js の完全なコード:

 import { useState, useRef } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => {  const [url, setUrl] = useState( "" );  const qrRef = useRef();  const downloadQRCode = ( e ) => { e.preventDefault();    let canvas = qrRef.current.querySelector( "canvas" );    let image = canvas.toDataURL( "image/png" );    let anchor = document .createElement( "a" ); anchor.href = image; anchor.download = `qr-code.png` ;    document .body.appendChild(anchor); anchor.click();    document .body.removeChild(anchor); setUrl( "" ); };  const qrCodeEncoder = ( e ) => { setUrl(e.target.value); };  const qrcode = (    < QRCodeCanvas
      id = "qrCode"
      value = {url}
      size = {300}
      bgColor = { "# 00ff00 "}      level = { " H "} />
 );  return (    < div className = "qrcode__container" >
      < div ref = {qrRef} > {qrcode} </ div >
      < div className = "input__group" >
        < form onSubmit = {downloadQRCode} >
          < label > Enter URL </ label >
          < input
            type = "text"
            value = {url}
            onChange = {qrCodeEncoder}
            placeholder = "https://hackernoon.com"
 />
          < button type = "submit" disabled = {!url} >
 Download QR code          </ button >
        </ form >
      </ div >
    </ div >
 ); }; export default QrCode;