本記事ではQRコードを使う中で、実用的に使えるまでに必要となるまでの知識をつけて、実際にTypescirptで生成できるまでを目指します。今回はReact上でやってみようと思います。QRコードについて何をするものなのかバーコードと似たような仕組みで、バーコードは横方向の情報しか持たないのに対して、QRコードは2次元で情報を表現することができる。格納できるデータは文字列、画像などいろんなメディアに対応している。元は自動車部品の管理などで使われる用途であったが、その利便性の高さから広く普及しました。データ容量QRコードで格納できるデータ量が以下の通りである。このデータはバージョンを現段階で最大の40にして、誤り訂正レベルを最低にしたときのものである。用語バージョンバージョンは1~40まであって、セル構成が異なる。バージョン1は21×21セルであり、バージョン40は177×177セルである。誤り訂正レベルQRコードに欠損や、何かしらの障害物で一部読み取れなくても誤りを修正するような仕組みがあり、その修正レベルを誤り訂正レベルという。30%程度復元できるTypescriptで生成してみる使うライブラリgithub.comインストール以下のようにライブラリをインストールをします。qrcode.reactこのときにTypescriptを使うので型の情報が必要となります。以下のように@types...もインストールしてください。@types/qrcode.reactコンポーネントを作る私の場合、QRコード単体で呼び出すはなく、ラベルなどをつけて表示したいので、以下のようにコンポーネントにしてしまいます。importをします。スタイルづけも同時にしたいので以下のようにstyled-componentsを使います。'qrcode.react'...次に以下のように実際のクラスを作ります。}}....スタイリングは以下の通りです。flex;`これで完成です。これで呼び出すときに以下のようにすれば良いです。/>}すると以下のようになります。QRコードをカスタマイズはじめにQRコードの場合は最初の説明にもあったように一部なら破損しても構いません。今回はレベルをHにして、30%程度かけていてもいいので画像をかぶせたいと思います。先ほどのQRCodeコンポーネントにpropsを追加します。level="H"/>すると64×64のQRコードが生成されます。画像の大きさは30×30ならばQRコードとしては認識するはずです。初期配置まず、以下のように配置します。ここまではこのようになっています。styled.img``Styled-Componentで整えて行く以下のように変更します。white`すると、以下ようにすることができます。[まとめ簡単にQRコードを生成することができ、画像などをかぶせることでカスタマイズすることができることを知って、何かサービスに活かせそうだなと思いました。»プロフィール学生エンジニア。忘れてしまうので備忘録です。flaskでServerlessにホストするTelepresence概論スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。