【ChatGPT】エンジニアが使える汎用的なプロンプト #JavaScript

エンジニアが使える汎用的なプロンプト

あなたは、プロの【その分野の専門家】です。

以下の制約条件と入力文をもとに、【出力内容】を出力してください。

# 制約条件
  - 前提条件
  - 決まりごと

# 入力文
期待する出力結果・指示

例

	あなたは、プロのプログラマーです。
	
	以下の制約条件と入力文をもとに、プログラムを出力してください。
	
	# 制約条件
	  - JavaScriptを使うこと
	  - React 18.1.0を使うこと
	  - AtomicDesignでコンポーネントを作ること
	  - 初心者でも分かりやすいコードを書くこと
	  - コメントを残すこと
	
	# 入力文
	huluやネットフリックスのサービスページのような動画一覧ページを作成する
	CSSもつけてリッチなデザインにする。

出力結果

以下のコードは、React 18.1.0とAtomic Designを使って、HuluやNetflixのような動画一覧ページを作成するための簡単な例です。初心者にも分かりやすいようにコメントを追加しました。

まず、Atomic Designに基づいてコンポーネントを設計します。この例では、以下の階層構造を持つコンポーネントを作成します。

アトムズ (Atoms): 基本的なHTML要素
モレキュール (Molecules): アトムズを組み合わせた小さな機能単位のコンポーネント
オーガニズム (Organisms): モレキュールを組み合わせた大きな機能単位のコンポーネント
テンプレート (Templates): オーガニズムを組み合わせたページのレイアウト
ページ (Pages): テンプレートにデータを流し込んで完成させた実際のページ

// Atoms/Image.js
import React from 'react';

const Image = ({ src, alt, ...props }) => {
  return <img src={src} alt={alt} {...props} />;
};

export default Image;

// Atoms/Title.js
import React from 'react';

const Title = ({ children, ...props }) => {
  return <h2 {...props}>{children}</h2>;
};

export default Title;

// Molecules/Thumbnail.js
import React from 'react';
import Image from '../Atoms/Image';
import Title from '../Atoms/Title';

const Thumbnail = ({ imageUrl, title, ...props }) => {
  return (
    <div className="thumbnail" {...props}>
      <Image src={imageUrl} alt={title} />
      <Title>{title}</Title>
    </div>
  );
};

export default Thumbnail;

// Organisms/VideoList.js
import React from 'react';
import Thumbnail from '../Molecules/Thumbnail';

const VideoList = ({ videos, ...props }) => {
  return (
    <div className="video-list" {...props}>
      {videos.map((video) => (
        <Thumbnail key={video.id} imageUrl={video.imageUrl} title={video.title} />
      ))}
    </div>
  );
};

export default VideoList;

// Templates/VideoGallery.js
import React from 'react';
import VideoList from '../Organisms/VideoList';

const VideoGallery = ({ videos, ...props }) => {
  return (
    <main className="video-gallery" {...props}>
      <VideoList videos={videos} />
    </main>
  );
};

export default VideoGallery;

// Pages/VideoGalleryPage.js
import React from 'react';
import VideoGallery from '../Templates/VideoGallery';

const VideoGalleryPage = ({ videos }) => {
  return <VideoGallery videos={videos} />;
};

export default VideoGalleryPage;

次に、CSSを追加してリッチなデザインにします。この例では、シンプルなスタイルを適用していますが、お好みでカスタマイズしてください。

/* styles.css */
.thumbnail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.thumbnail h2 {
  margin-top: 10px;
  font-size: 18px;
  text-align: center;
  color: #333;
}

.video-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
}

.video-gallery {
  padding: 40px 0;
  background-color: #f5f5f5;
}

出来上がり

まぁネットフリックスのデザインとはほど遠いですが、
無事にChatGPTにプログラム出力をお願いすることができました。

GPTくんにお願いする時ぜひご参考ください。