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

クイック レスポンス (QR) コード ジェネレーターを作成する背後にある考え方は、データを画像からテキストに変換することです。 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 npm start cd qrcode-generator 最後に、QR コード ジェネレーターを作成するために必要な依存ライブラリをインストールしましょう。次のコマンドを実行します。 npm install qrcode.react : DOM にレンダリングするための QR コードを生成する React コンポーネント。 qrcode.react QR コード ジェネレーターの作成 これまでのところ素晴らしい仕事です！ QR コード ジェネレーターの作成は、QR コードの構造を含むファイルとコンポーネントの作成から始まります。 src ディレクトリ内に components というフォルダーを作成し、そのフォルダー内に QrCode.js という名前のファイルを作成します。 次のコードをコピーして貼り付けます。 e.preventDefault(); }; setUrl(e.target.value); }; ); ); }; // src/components/QrCode.js import { useState } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => { const [url, setUrl] = useState( "" ); const downloadQRCode = ( e ) => { setUrl( "" ); const qrCodeEncoder = ( e ) => { const qrcode = ( return ( {qrcode} Enter URL Download QR code export default QrCode; 上記のコード スニペットは、次のことを行います。 輸入 変数の初期状態を宣言するために使用され、空の文字列に設定された url と 関数、 状態を更新するために使用されます useState setState setUrl 図書館、 、生成された QR コードをレンダリングするために使用されます qrcode.react 次に、 に付属する機能 の方法 送信イベントによってトリガーされる要素 downloadQRCode onSubmit 上で 要素、 関数を使用したイベント ハンドラー ユーザーの入力を受け取り、その値を取得し、新しい入力が入力されるたびに QR コードを変更します onChange 'qrCodeEncoder' 変数 創造された。それは コンポーネントを呼び出し、QR コードをカスタマイズしてブラウザーで表示できるようにするいくつかの使用可能なプロンプトを渡します。コンポーネント について詳しくは、ドキュメントをご覧ください。 qrcode QRCodeCanvas での props の使用 最後に、 ユーザー入力がデータを受け取るまで、要素は無効になります QRコードアプリのスタイリング の中に フォルダー、スタイルシートの作成、 アプリの視覚的な魅力を担当 src styles.css 次のコードをコピーして貼り付けます。 *, *:before, *:after { } } } } } } } } } } } } } } } /* src/styles.css */ 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 ( 手順が完了すると、アプリは次のようになります。 生成された QR コードのダウンロード ユーザーが生成された QR コードをダウンロードするオプションは、さまざまなユース ケースで役立ちます。コードの印刷から Web サイトへの埋め込みまで、用途は無限です。 に戻る ファイル、使用するコードベースを更新しましょう ドキュメント オブジェクト モデル (DOM) ノードにアクセスします。 components/QrCode.js refs ... ); ); }; // 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 = ( return ( {qrcode} {/* include this */} {/* form input container */} export default QrCode; では、更新してみましょう の機能 QR コードのダウンロード ボタンをクリックし、キャンバスを画像ファイルとして保存できるようにします。 downloadQRCode QrCode.js e.preventDefault(); anchor.href = image; anchor.click(); }; ... ); }; // src/components/QrCode.js // imports const QrCode = () => { // state // useRef const downloadQRCode = ( e ) => { let canvas = qrRef.current.querySelector( "canvas" ); let image = canvas.toDataURL( "image/png" ); let anchor = document .createElement( "a" ); anchor.download = `qr-code.png` ; document .body.appendChild(anchor); document .body.removeChild(anchor); setUrl( "" ); return ( {qrcode} {/* form input container */} export default QrCode; の中に 関数では、次のことが行われます。 downloadQRCode ノードがいつ変更されるかを知るために、 .current プロパティで ref オブジェクトの現在の値を参照します。 の コンポーネントはDOMでcanvas要素を生成し、コンテンツを動的に作成する機能を提供します qrcode.react キャンバスは ファイル形式に設定された指定された型パラメーターを持つメソッド、 toDataURL image/png 次にアンカー、 要素が作成され、 ボタンクリックでQRコードをダウンロードする画像に設定 href アンカー要素はドキュメントの本文に追加され、QR コードがダウンロードされると削除されます 最後に、州の URL が更新されます。 フォームの送信時に生成された QR コードの入力をクリアする変数 setUrl コンポーネント QrCode.js の完全なコード: e.preventDefault(); anchor.href = image; anchor.click(); }; setUrl(e.target.value); }; ); ); }; import { useState, useRef } from "react" ; import { QRCodeCanvas } from "qrcode.react" ; const QrCode = () => { const [url, setUrl] = useState( "" ); const qrRef = useRef(); const downloadQRCode = ( e ) => { let canvas = qrRef.current.querySelector( "canvas" ); let image = canvas.toDataURL( "image/png" ); let anchor = document .createElement( "a" ); anchor.download = `qr-code.png` ; document .body.appendChild(anchor); document .body.removeChild(anchor); setUrl( "" ); const qrCodeEncoder = ( e ) => { const qrcode = ( return ( {qrcode} Enter URL Download QR code export default QrCode; アプリの最終結果は次のようになります。 結論 このチュートリアルでは、QR コード ジェネレーターを作成するプロセスと、後で使用するためにダウンロードする方法について説明しました。 資力 QRコード アンカー要素 QRコードについて