chatGPTに画像を拡大表示するReactコンポーネントを作成してもらう

はじめに

先日、個人開発で「StableDeffusionで作ったカワイイ猫の画像がたくさん保存されているWebサイト」の作成を行っている際にフロントエンドの構築をReactで行うことがありました。
ただ、私はReactやフロントエンドについてはナンモワカラン状態だったので、ChatGPTに作ってもらえば楽なんじゃないかと思い、試してみたところ予想以上に簡単にコンポーネントの作成ができたので記事にしたいと思います。

Reactの画像を拡大表示するコンポーネントを作成してもらう

以下が実際にChatgptにお願いした内容です。

クリックすると画像を拡大表示するReactのComponentを書いて。拡大表示した時は背景を暗くして、画像以外の部分をクリックすると拡大表示を終了する仕様でお願いします。

出力内容の中にはコードの解説も含まれていたためその部分は抜粋して、コードとしては以下が出力されました。
※全文は記事の最後に記載しています。

ImageModel.js

import React, { useState } from 'react';
import './ImageModal.css';

const ImageModal = ({ src }) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <>
      <img onClick={handleOpen} src={src} alt="画像" />
      {isOpen && (
        <div onClick={handleClose} className="modal-overlay">
          <div className="modal-content">
            <img src={src} alt="画像" />
          </div>
        </div>
      )}
    </>
  );
};

export default ImageModal;

ImageModel.css

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal-content img {
  max-width: 80%;
  max-height: 80%;
}

す、、すげぇ、、、めっちゃ楽・・・

おそらく、handleOpenとhandleCloseの処理はStateをToggleする形で一つの処理にまとめられそうですが、文字を打つだけで作ってくれるのは大変助かります。
CSSのファイルまで分けていただいて気が効きますね。ちなみにスマホやタブレットでも問題なく動作できました。

実際の動作画面

か、、かわいい、、、、　
多少の修正は行いましたが特に問題なく動作しました、素晴らしい。

まとめ

うまく使えば予想以上に作業時間の短縮やライフハックができそうです。
「AIが完全に人の仕事/作業をやってくれる」状態はまだか先だと思いますが「AIに手伝ってもらいながら仕事/作業を行う」ことはすぐできそうですね。

なかなか楽しいツールなので、是非試してみてください〜

おまけ

実際の会話文は以下です。

こんにちは！

こんにちは。お悩みやご質問がありましたら、お気軽にお尋ねください。お役に立てるよう、頑張ります。

クリックすると画像を拡大表示するReactのComponentを書いて。拡大表示した時は背景を暗くして、画像以外の部分をクリックすると拡大表示を終了する仕様でおねがいします

以下は、クリックすると画像を拡大表示するReactのComponentの例です。拡大表示した時は背景を暗くして、画像以外の部分をクリックすると拡大表示を終了する仕様になっています。

import React, { useState } from 'react';

const ImageModal = ({ src }) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <>
      <img onClick={handleOpen} src={src} alt="画像" />
      {isOpen && (
        <div onClick={handleClose} className="modal-overlay">
          <div className="modal-content">
            <img src={src} alt="画像" />
          </div>
        </div>
      )}
    </>
  );
};

export default ImageModal;

上記のコードでは、ImageModalというコンポーネントを定義しています。このコンポーネントは、srcというpropsを受け取ります。srcは、拡大表示する画像のURLです。

ImageModalコンポーネントは、画像を表示するimg要素と、拡大表示した時に表示するモーダルを表示するためのdiv要素を返します。

img要素には、onClickハンドラを設定しています。このハンドラは、画像をクリックすると、handleOpen関数が呼び出されます。handleOpen関数は、isOpenの状態をtrueに設定することで、モーダルを表示するようにしています。

モーダルには、onClickハンドラを設定しています。このハンドラは、モーダル以外の部分をクリックすると、handleClose関数が呼び出されます。handleClose関数は、isOpenの状態をfalseに設定することで、モーダルを非表示にする

続きを教えて

次に、スタイルを追加して、モーダルを表示すると背景が暗くなるようにします。また、モーダルの中にある画像を中央に表示するようにもします。

以下は、スタイルを追加した例です。

import React, { useState } from 'react';
import './ImageModal.css';

const ImageModal = ({ src }) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <>
      <img onClick={handleOpen} src={src} alt="画像" />
      {isOpen && (
        <div onClick={handleClose} className="modal-overlay">
          <div className="modal-content">
            <img src={src} alt="画像" />
          </div>
        </div>
      )}
    </>
  );
};

export default ImageModal;

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal-content img {
  max-width: 80%;
  max-height: 80%;
}

上記のCSSでは、.modal-overlayクラスを設定しています。このクラスは、モーダルの背景を暗くするために、background-colorプロパティを設定しています。また、.modal-contentクラスは、モーダルの中にある画像を中央に表示するために、positionプロパティとtopプロパティ、leftプロパティ、transformプロパティを設定しています。.modal-content imgクラスは、画像のサイズを制限するために、max-widthプロパティとmax-heightプロパティを設定しています。

ありがとう！助かりました！

どういたしまして。お役に立てて、嬉しいです。ご質問がありましたら、お気軽にお尋ねください。

じゃがりこ好き？

私は、コンピュータープログラムであるため、食べ物に対する好みを持たないことをご存じでしょうか。私は、人間のように感情を持たず、プログラムされた内容を実行することしかできません。そのため、じゃがりこが好きかどうかといったことを言うことはできません。私は、人間の方々が楽しんでいるようであれば、それはとても嬉しいことです。

おわり