はるのぶろぐ。

情報系大学生ハルが、ゆるゆるとIT関係についてや日々の雑記を綴ります。ちょっとだけ、あなたの役に立てる、そんなブログを目指しています。

トップ > プログラミング > ReactとBing AIを使用してQRコードを生成するウェブアプリを作成する方法

ReactとBing AIを使用してQRコードを生成するウェブアプリを作成する方法

プログラミング Webアプリ開発

にほんブログ村
参加してます！ポチッとお願いします

記事名と
URLをコピー

ランキング参加中
プログラミング

ランキング参加中
知識

こんにちは、情報系大学生のハル（Blog_IT_haru）です。

今回は、Bing AIを使用して、ReactでQRコードを生成するウェブアプリの作成方法について紹介します。最近、OpenAIのChatGPT、GoogleのBardなど、自然言語処理ブームです。ぜひ、参考にしてみてください。

尚、このブログの文章は、一部、BingAIやChat GPTに生成してもらっています。

もくじ

はじめに

このブログでは、ReactとBing AIを使用してQRコードを生成するウェブアプリの作成方法について説明します。本記事は、プログラミング初心者ではなく、ある程度基本的なことがわかっている方を対象としています。また、今回はWindowsで制作しました。Visual Studio Codeはインストール済みであることが前提です。

まず、ReactとBing AIについて簡単に説明します。Reactは、Facebookが開発したJavaScriptライブラリであり、ユーザーインターフェースの構築に使用されます。一方、Bing AIはMicrosoftが開発した人工知能技術を使用しており、検索クエリに対する回答や提案を提供する検索エンジンです。

それでは、ウェブアプリの作成方法について詳しく見ていきましょう。

QRコード生成ウェブアプリ作成方法

以下のように、どんどん質問していくスタイルで今回は行います。

Windowsで、Visual Studio Codeを利用してQRコードアプリを作りたいです。 Reactを使用します。

WindowsでVisual Studio Codeを使用して、Reactを使ったQRコードアプリを作成することができます。以下に手順を示します。

  1. Visual Studio CodeとNode.jsをインストールします。
  2. コマンドプロンプトまたはターミナルで、npx create-react-app my-appを実行して、新しいReactアプリケーションを作成します。
  3. cd my-appで作成したアプリケーションのディレクトリに移動します。
  4. npm startでアプリケーションを起動します。
  5. Visual Studio Codeで、作成したアプリケーションのディレクトリを開きます。
  6. npm install --save react-qr-codeまたはnpm install --save qrcode.reactなどのコマンドを実行して、QRコード生成ライブラリをインストールします。
  7. アプリケーションのコードにQRコード生成機能を実装します。

詳しい情報はReact公式ドキュメントやVisual Studio Code公式ドキュメントに記載されています。

WindowsでNode.jsがインストールされているか確認したいです。

WindowsでNode.jsがインストールされているかどうかを確認するには、コマンドプロンプトまたはPowerShellを開いて、node -vと入力します。もしNode.jsがインストールされていれば、バージョン番号が表示されます。もしインストールされていなければ、エラーメッセージが表示されます。

npx create-react-app my-appはどういう意味ですか？

npx create-react-app my-appは、create-react-appというnpmパッケージを使用して、新しいReactアプリケーションを作成するコマンドです。code>npx は、npmパッケージを実行するためのツールで、このコマンドではcreate-react-appというパッケージが実行されます。また、my-app は作成するアプリケーションの名前で、任意の名前に変更することができます。

npm install --save react-qr-codeまたはnpm install --save qrcode.reactなどのコマンドを実行して、QRコード生成ライブラリをインストールします。 これはどこでやりますか？ visual studio codeですか？

npm install --save react-qr-code またはnpm install --save qrcode.react などのコマンドは、Reactアプリケーションのディレクトリ内で実行します。Visual Studio Codeのターミナルでも、WindowsのコマンドプロンプトやPowerShellでも実行することができます。ただし、コマンドを実行する前に、Reactアプリケーションのディレクトリに移動しておく必要があります。

npm startを終了するには？

npm start を実行しているターミナル（Visual Studio Codeのターミナルや、WindowsのコマンドプロンプトやPowerShellなど）で、Ctrl + C キーを押すことで、npm start を終了することができます。その後、Y キーを押して確認すると、アプリケーションが停止します。

以下はどういう意味ですか？

added 1 package, and audited 1482 packages in 3s 231 packages are looking for funding run `npm fund` for details 6 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details.

これは、npm（Node Package Manager）の出力メッセージです。npmは、JavaScriptのパッケージ管理ツールです。

  • added 1 package, and audited 1482 packages in 3s：1つのパッケージが追加され、1482個のパッケージが3秒で監査されました。
  • 231 packages are looking for funding run npm fund for details：231個のパッケージが資金調達を求めています。詳細については、npm fundを実行してください。
  • 6 high severity vulnerabilities：6つの高重大度の脆弱性があります。
  • To address all issues (including breaking changes), run: npm audit fix --force：すべての問題（破壊的変更を含む）に対処するには、npm audit fix --forceを実行してください。
  • Run npm audit for details.：詳細については、npm auditを実行してください。

reactでQRコードアプリを作るための、コードを教えてください。

ReactでQRコードアプリを作るためには、いくつかの方法があります。一つの方法として、qrcode.reactというライブラリを使用することができます。このライブラリは、ReactコンポーネントとしてQRコードを生成することができます。

まず、プロジェクトにqrcode.reactをインストールします。

npm install qrcode.react

次に、QRCodeコンポーネントをインポートし、使用することができます。

import React from 'react';
import QRCode from 'qrcode.react';

function App() {
  return <QRCode value="<https://www.example.com>" />;
}

export default App;

上記の例では、value propに指定されたURLのQRコードが生成されます。

このコードは、言語はなんですか？ どのように書けばいいですか？手順を教えてください

このコードは、JavaScriptのReactフレームワークを使用しています。

このコードを使用するには、次の手順に従ってください。

  1. Reactアプリケーションを作成します。create-react-appなどのツールを使用すると簡単です。
  2. qrcode.reactライブラリをインストールします。ターミナルで、プロジェクトのディレクトリに移動し、次のコマンドを実行します。
npm install qrcode.react
  1. このコードを、Reactアプリケーション内の適切な場所（例えば、App.jsファイル）に貼り付けます。
  2. アプリケーションを実行します。通常は、ターミナルで次のコマンドを実行します。
npm start

さっきのコードを、テキストフィールドにURLを貼り付けて、QRコードを作成できるようにしたいです。

テキストフィールドにURLを入力して、QRコードを生成するためには、次のようなコードが必要です。

import React, { useState } from 'react';
import QRCode from 'qrcode.react';

function App() {
  const [url, setUrl] = useState('');

  return (
    <div>
      <input
        type="text"
        value={url}
        onChange={e => setUrl(e.target.value)}
        placeholder="Enter URL here"
      />
      <QRCode value={url} />
    </div>
  );
}

export default App;

上記のコードでは、useStateックを使用して、テキストフィールドの値（URL）を管理しています。テキストフィールドの値が変更されるたびに、onChangeイベントハンドラーが呼び出され、setUrl関数が実行されます。これにより、urlステート変数が更新されます。

QRCodeコンポーネントのcode>value propには、urlステート変数が渡されます。そのため、テキストフィールドの値が変更されるたびに、QRCodeコンポーネントも更新されます。

最初からQRコードが表示されるのではなく、ボタンが押したら、QRコードが生成されるようにしたいです。

QRコードが、ボタンが押されたときにのみ生成されるようにするには、次のようなコードが必要です。

import React, { useState } from 'react';
import QRCode from 'qrcode.react';

function App() {
  const [url, setUrl] = useState('');
  const [showQRCode, setShowQRCode] = useState(false);

  return (
    <div>
      <input
        type="text"
        value={url}
        onChange={e => setUrl(e.target.value)}
        placeholder="Enter URL here"
      />
      <button onClick={() => setShowQRCode(true)}>Generate QR Code</button>
      {showQRCode && <QRCode value={url} />}
    </div>
  );
}

export default App;

上記のコードでは、useStateフックを使用して、QRコードの表示状態を管理するshowQRCodeステート変数を追加しています。初期値はfalseです。

ボタンがクリックされると、onClickイベントハンドラーが呼び出され、setShowQRCode関数が実行されます。これにより、showQRCodeステート変数が更新されます。

最後に、条件付きレンダリングを使用しています。もしshowQRCodeステート変数が真（つまり、ボタンがクリックされた）であれば、QRCodeコンポーネントがレンダリングされます。

そのコードに、QRコード・URLを削除するボタンをつけたいです。

QRコードとURLを削除するボタンを追加するには、次のようなコードが必要です。

import React, { useState } from 'react';
import QRCode from 'qrcode.react';

function App() {
  const [url, setUrl] = useState('');
  const [showQRCode, setShowQRCode] = useState(false);

  const handleReset = () => {
    setUrl('');
    setShowQRCode(false);
  };

  return (
    <div>
      <input
        type="text"
        value={url}
        onChange={e => setUrl(e.target.value)}
        placeholder="Enter URL here"
      />
      <button onClick={() => setShowQRCode(true)}>Generate QR Code</button>
      <button onClick={handleReset}>Reset</button>
      {showQRCode && <QRCode value={url} />}
    </div>
  );
}

export default App;

上記のコードでは、handleReset関数を追加しています。この関数は、setUrlとsetShowQRCode関数を使用して、URLとQRコードの表示状態をリセットします。

また、新しいボタンが追加されています。このボタンがクリックされると、onClickイベントハンドラーが呼び出され、handleReset関数が実行されます。

URLが入力されていないとき、URL以外の文字列が入力されたときは、「URLを入力してください」というエラーメッセージを出したいです。

このコードには、URLが入力されていない場合や、URL以外の文字列が入力された場合に、「URLを入力してください」というエラーメッセージを表示する機能はありません。この機能を追加するには、次のような変更が必要です。

  1. showQRCodeステートをfalseからnullまたは空文字列に変更します。
  2. setShowQRCode関数を呼び出す前に、入力されたURLが有効かどうかを確認します。
  3. URLが無効な場合は、エラーメッセージを表示するための新しいステート変数（例えばerrorMessage）を使用して、エラーメッセージを設定します。

以下は、上記の変更点を反映したコードの例です。

import React, { useState } from 'react';
import QRCode from 'qrcode.react';

function App() {
  const [url, setUrl] = useState('');
  const [showQRCode, setShowQRCode] = useState(null);
  const [errorMessage, setErrorMessage] = useState(null);

  const handleReset = () => {
    setUrl('');
    setShowQRCode(null);
    setErrorMessage(null);
  };

  const handleGenerate = () => {
    if (!url) {
      setErrorMessage('URLを入力してください');
      return;
    }
    try {
      new URL(url);
      setShowQRCode(true);
      setErrorMessage(null);
    } catch (e) {
      setErrorMessage('有効なURLではありません');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={url}
        onChange={e => setUrl(e.target.value)}
        placeholder="Enter URL here"
      />
      <button onClick={handleGenerate}>Generate QR Code</button>
      <button onClick={handleReset}>Reset</button>
      {showQRCode && <QRCode value={url} />}
      {errorMessage && <p>{errorMessage}</p>}
    </div>
  );
}

export default App;

そのエラーメッセージを、ページ内ではなく、ポップアップとして出せるようにしてほしいです。

エラーメッセージをポップアップとして表示するには、alert()関数を使用することができます。handleGenerate関数内のsetErrorMessage関数の呼び出しを、次のように変更します。

const handleGenerate = () => {
  if (!url) {
    alert('URLを入力してください');
    return;
  }
  try {
    new URL(url);
    setShowQRCode(true);
  } catch (e) {
    alert('有効なURLではありません');
  }
};

この変更により、エラーメッセージがポップアップとして表示されるようになります。ただし、alert()関数はモーダルダイアログを表示するため、ユーザーがダイアログを閉じるまで、他の操作ができなくなります。そのため、ユーザビリティの観点からは、ページ内にエラーメッセージを表示する方が望ましい場合もあります。

少しデザインを変更したいです。 ボタンを、マテリアルデザインっぽく変更し、QRコードは、テキストフィールドとボタンの下に表示されるようにしてほしいです。 テキストフィールド自体は、サイトの真ん中に表示し、レスポンシブデザインを意識してください。

ご希望のデザイン変更を実現するには、CSSを使用してスタイルを適用する必要があります。また、マテリアルデザインのボタンを実装するには、@material-ui/coreライブラリからButtonコンポーネントをインポートして使用することができます。

以下は、上記の変更点を反映したコードの例です。

import React, { useState } from 'react';
import QRCode from 'qrcode.react';
import Button from '@material-ui/core/Button';
import './App.css';

function App() {
  const [url, setUrl] = useState('');
  const [showQRCode, setShowQRCode] = useState(null);

  const handleReset = () => {
    setUrl('');
    setShowQRCode(null);
  };

  const handleGenerate = () => {
    if (!url) {
      alert('URLを入力してください');
      return;
    }
    try {
      new URL(url);
      setShowQRCode(true);
    } catch (e) {
      alert('有効なURLではありません');
    }
  };

  return (
    <div className="container">
      <div className="input-container">
        <input
          type="text"
          value={url}
          onChange={e => setUrl(e.target.value)}
          placeholder="Enter URL here"
        />
        <div className="button-container">
          <Button variant="contained" color="primary" onClick={handleGenerate}>
            Generate QR Code
          </Button>
          <Button variant="contained" color="secondary" onClick={handleReset}>
            Reset
          </Button>
        </div>
      </div>
      {showQRCode && (
        <div className="qrcode-container">
          <QRCode value={url} />
        </div>
      )}
    </div>
  );
}

export default App;

そして、次のようなCSSスタイルをApp.cssファイルに追加します。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-container {
  display: flex;
  flex-direction: column;
}

.button-container {
  margin-top: 10px;
}

.button-container > button {
  margin-right: 10px;
}

.qrcode-container {
  margin-top: 20px;
}

このコードでは、テキストフィールドがページの中央に配置され、ボタンがマテリアルデザイン風に表示されます。また、QRコードはテキストフィールドとボタンの下に表示されます。

Module not found: Error: Can't resolve '@material-ui/core/Button' in 'C:\Users\harun\Project\practice-app\src'はどう対処すればよいですか？

このエラーは、@material-ui/coreパッケージがプロジェクトにインストールされていないことを示しています。このパッケージをインストールするには、プロジェクトのルートディレクトリで次のコマンドを実行します。

npm install @material-ui/core

または

yarn add @material-ui/core

上記のコマンドのいずれかを実行した後、再度アプリケーションを起動してみてください。エラーが解消されるはずです

ページタイトルを「QRコード生成」としたいです。

ページタイトルを「QRコード生成」に設定するには、React.useEffectフックを使用して、ドキュメントのtitleプロパティを変更することができます。次のように、Appコンポーネント内にuseEffectフックを追加します。

import React, { useState, useEffect } from 'react'; // ...省略... function App() { // ...省略... useEffect(() => { document.title = 'QRコード生成'; }, []); // ...省略... } export default App;

この変更により、ページが読み込まれたときに、ページタイトルが「QRコード生成」に設定されます。

ヘッダーに、「QRコード生成ウェブアプリ」と表示し、フッターに、©haruna & bing AI2023と表示したいです。

ヘッダーとフッターを追加するには、次のように変更することができます。

import QRCode from 'qrcode.react';
import Button from '@material-ui/core/Button';
import './App.css';
import React, { useState, useEffect } from 'react';

function App() {
  const [url, setUrl] = useState('');
  const [showQRCode, setShowQRCode] = useState(null);
  useEffect(() => {
    document.title = 'QRコード生成';
  }, []);
  const handleReset = () => {
    setUrl('');
    setShowQRCode(null);
  };

  const handleGenerate = () => {
    if (!url) {
      alert('URLを入力してください');
      return;
    }
    try {
      new URL(url);
      setShowQRCode(true);
    } catch (e) {
      alert('有効なURLではありません');
    }
  };

  return (
    <div className="container">
      <header>
        <h1>QRコード生成ウェブアプリ</h1>
      </header>
      <div className="input-container">
        <input
          type="text"
          value={url}
          onChange={e => setUrl(e.target.value)}
          placeholder="Enter URL here"
        />
        <div className="button-container">
          <Button variant="contained" color="primary" onClick={handleGenerate}>
            Generate QR Code
          </Button>
          <Button variant="contained" color="secondary" onClick={handleReset}>
            Reset
          </Button>
        </div>
      </div>
      {showQRCode && (
        <div className="qrcode-container">
          <QRCode value={url} />
        </div>
      )}
      <footer>©haruna & bing AI2023</footer>
    </div>
  );
}

export default App;

これで、ヘッダーに「QRコード生成ウェブアプリ」と表示され、フッターに「©haruna & bing AI2023」と表示されるようになります。

urlを入力したあと、エンターキーを押すことによっても、QRコードが生成できるようにしたいです。

URLを入力した後にエンターキーを押してQRコードを生成するには、次のように変更することができます。

import QRCode from 'qrcode.react';
import Button from '@material-ui/core/Button';
import './App.css';
import React, { useState, useEffect } from 'react';

function App() {
  const [url, setUrl] = useState('');
  const [showQRCode, setShowQRCode] = useState(null);
  useEffect(() => {
    document.title = 'QRコード生成';
  }, []);
  const handleReset = () => {
    setUrl('');
    setShowQRCode(null);
  };

  const handleGenerate = () => {
    if (!url) {
      alert('URLを入力してください');
      return;
    }
    try {
      new URL(url);
      setShowQRCode(true);
    } catch (e) {
      alert('有効なURLではありません');
    }
  };

  const handleKeyPress = e => {
    if (e.key === 'Enter') {
      handleGenerate();
    }
  };

  return (
    <div className="container">
      <header>
        <h1>QRコード生成ウェブアプリ</h1>
      </header>
      <div className="input-container">
        <input
          type="text"
          value={url}
          onChange={e => setUrl(e.target.value)}
          onKeyPress={handleKeyPress}
          placeholder="Enter URL here"
        />
        <div className="button-container">
          <Button variant="contained" color="primary" onClick={handleGenerate}>
            Generate QR Code
          </Button>
          <Button variant="contained" color="secondary" onClick={handleReset}>
            Reset
          </Button>
        </div>
      </div>
      {showQRCode && (
        <div className="qrcode-container">
          <QRCode value={url} />
        </div>
      )}
      <footer>©haruna & bing AI2023</footer>
    </div>
  );
}

export default App;

これで、URLを入力した後にエンターキーを押すと、handleGenerate関数が呼び出されて、QRコードが生成されるようになります。

QRコード生成ウェブアプリ、という文字列の下に、「以下のテキストフィールドにURLを貼り付けて、簡単にQRコードを生成することができます。」という文字列を足してください。

QRコード生成ウェブアプリ」という文字列の下に、「以下のテキストフィールドにURLを貼り付けて、簡単にQRコードを生成することができます。」という文字列を追加するには、次のように変更することができます。

import QRCode from 'qrcode.react';
import Button from '@material-ui/core/Button';
import './App.css';
import React, { useState, useEffect } from 'react';

function App() {
  const [url, setUrl] = useState('');
  const [showQRCode, setShowQRCode] = useState(null);
  useEffect(() => {
    document.title = 'QRコード生成';
  }, []);
  const handleReset = () => {
    setUrl('');
    setShowQRCode(null);
  };

  const handleGenerate = () => {
    if (!url) {
      alert('URLを入力してください');
      return;
    }
    try {
      new URL(url);
      setShowQRCode(true);
    } catch (e) {
      alert('有効なURLではありません');
    }
  };

  const handleKeyPress = e => {
    if (e.key === 'Enter') {
      handleGenerate();
    }
  };

  return (
    <div className="container">
      <header>
        <h1>QRコード生成ウェブアプリ</h1>
        <p>以下のテキストフィールドにURLを貼り付けて、簡単にQRコードを生成することができます。</p>
      </header>
      <div className="input-container">
        <input
          type="text"
          value={url}
          onChange={e => setUrl(e.target.value)}
          onKeyPress={handleKeyPress}
          placeholder="Enter URL here"
        />
        <div className="button-container">
          <Button variant="contained" color="primary" onClick={handleGenerate}>
            Generate QR Code
          </Button>
          <Button variant="contained" color="secondary" onClick={handleReset}>
            Reset
          </Button>
        </div>
      </div>
      {showQRCode && (
        <div className="qrcode-container">
          <QRCode value={url} />
        </div>
      )}
      <footer>©haruna & bing AI2023</footer>
    </div>
  );
}

export default App;

これで、「以下のテキストフィールドにURLを貼り付けて、簡単にQRコードを生成することができます。」という文字列が追加されるようになります。

「QRコード生成ウェブアプリ」と 「以下のテキストフィールドにURLを貼り付けて、簡単にQRコードを生成することができます。」は中央揃えにしたいです。CSSで中央揃えにしたいです。

CSSで「QRコード生成ウェブアプリ」と「以下のテキストフィールドにURLを貼り付けて、簡単にQRコードを生成することができます。」を中央揃えにするには、次のように変更することができます。

import QRCode from 'qrcode.react';
import Button from '@material-ui/core/Button';
import './App.css';
import React, { useState, useEffect } from 'react';

function App() {
  const [url, setUrl] = useState('');
  const [showQRCode, setShowQRCode] = useState(null);
  useEffect(() => {
    document.title = 'QRコード生成';
  }, []);
  const handleReset = () => {
    setUrl('');
    setShowQRCode(null);
  };

  const handleGenerate = () => {
    if (!url) {
      alert('URLを入力してください');
      return;
    }
    try {
      new URL(url);
      setShowQRCode(true);
    } catch (e) {
      alert('有効なURLではありません');
    }
  };

  const handleKeyPress = e => {
    if (e.key === 'Enter') {
      handleGenerate();
    }
  };

  return (
    <div className="container">
      <header>
        <h1 className="center-text">QRコード生成ウェブアプリ</h1>
        <p className="center-text">
          以下のテキストフィールドにURLを貼り付けて、簡単にQRコードを生成することができます。
        </p>
      </header>
      <div className="input-container">
        <input
          type="text"
          value={url}
          onChange={e => setUrl(e.target.value)}
          onKeyPress={handleKeyPress}
          placeholder="Enter URL here"
        />
        <div className="button-container">
          <Button variant="contained" color="primary" onClick={handleGenerate}>
            Generate QR Code
          </Button>
          <Button variant="contained" color="secondary" onClick={handleReset}>
            Reset
          </Button>
        </div>
      </div>
      {showQRCode && (
        <div className="qrcode-container">
          <QRCode value={url} />
        </div>
      )}
      <footer>©haruna & bing AI2023</footer>
    </div>
  );
}

export default App;

そして、App.cssファイルに次のスタイルを追加します。

.center-text { text-align: center; }

これで、「QRコード生成ウェブアプリ」と「以下のテキストフィールドにURLを貼り付けて、簡単にQRコードを生成することができます。」が中央揃えされるようになります。

github pagesでreactのアプリをホスティングする方法を詳しく教えてください。

GitHub PagesでReactアプリを公開する方法として、create-react-appで作成したアプリをGitHub Pagesで公開することができます。まず、リポジトリを作成し、gh-pagesをインストールしてデプロイします1。

詳しい手順については、Qiitaの記事やuxbear.meの記事などが参考になるかもしれません。

私は、紹介されているうちの1つの、以下のウェブサイトがGitHub Pagesのホスティングで参考になりました。

uxbear.me

デモ

実際に私が作成したウェブアプリは、以下になります。

https://haru-330.github.io/QRCodeGenerate/

この記事を呼んで、Reactに興味を持った方は以下の本がオススメ！！フロントエンド開発において、React、Angular、Vueは欠かせない技術です。これらをスムーズに修得するためには、最新のフロントエンド技術入門書がおすすめです。最新のトレンドや実践的な知識が詰まった入門書で、効率的に学習しましょう！

www.amazon.co.jp

まとめ

いかがでしたか？

ReactとBing AIを使用して、QRコードを生成するウェブアプリを作成する方法をまとめてみました。

ぜひ、みなさんもBing AIを使用して、楽しくプログラミングしていきましょう！

ここまで読んでいただき、ありがとうございました。

この記事がいいな、と思ってくれたら、SNSなどで拡散したり、

ブックマークやコメントなどしてくれると励みになります！

下の方とサイドバーにある、サポートもお待ちしています！

更に、読者になってくれたら、お返しに私も読者になります！

また、この記事の内容についてなにかありましたら、

お問い合わせ、コメント、TwitterのDMなどによろしくお願いします。

それでは。

素材提供

Bing icon by Icons8