はじめに
この記事では、React知識ゼロの筆者が、Reactを用いたWEBサービスを開発するまでの手順を公開しています。
筆者のプログラミングスキルはPythonを高専教育で習得したレベルです。
特別な知識はありません。
過去の投稿はこちら⬇︎
トップページの作成
作成の前に
vol.3で「次は受注管理システムの構築」とか言っておいて、なかなかやる気が出なかったためトップページを作成してしまいました。すみません。
おかげさまで、よりWEBサイトらしさが出てきました。
2024年12月5日、ChatGPTよりo1とo1proモデルが公開されました。
o1proは月額200＄のChatGPT Proに入ると使用できるみたいです。
本記事ではo1について詳しい紹介しないので、こちらの記事を参考にしてみて下さい⬇︎
今まではGPT-4oで作成していましたが、今回はo1モデルで作成してみました。（私はPro入ってないのでo1proは試せず。。）
作成の手順
例の如く、始めます。
あなたは優秀なWEB開発エンジニアです。
ReactとFirebaseで受注管理システムを作成しています。
トップページを作成したいです。
下記要件に従ってHome.jsを作成して下さい。
## 要件
・3枚の画像が定期で移り変わるようにしたい
・その画像の中央に「WELCOME」の文字を表示させたい
・Contact usというカテゴリの内容を表示させたい
・Google Mapで所在地を表示させたい
・Facebookの情報を表示させたい
※以下ChatGPTo1の回答を引用
以下は要件を満たすサンプルコード例です。
実際のプロジェクト要件やスタイルガイドに合わせて、画像のパスやスタイリング、Facebook情報、Google Mapの位置情報などは適宜調整してください。
また、外部ライブラリ（例えば、Carousel用にreact-slickやreact-bootstrap、Map用にreact-google-mapsなど）を利用しても良いですが、ここでは依存を最小限にしたシンプルなサンプルを示します。
import React, { useState, useEffect } from "react";
import "./Home.css"; // スタイルシートでレイアウトやポジションを調整
const images = [
"/images/banner1.jpg",
"/images/banner2.jpg",
"/images/banner3.jpg"
];
const Home = () => {
const [currentIndex, setCurrentIndex] = useState(0);
// 3秒ごとに画像を切り替える
useEffect(() => {
const interval = setInterval(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
}, 3000);
return () => clearInterval(interval);
}, []);
return (
<div className="home-container">
{/* ヒーローエリア：スライドショー */}
<div className="hero-container">
<div className="hero-image-wrapper">
<img src={images[currentIndex]} alt="Hero" className="hero-image" />
<div className="hero-text-overlay">
<h1>WELCOME</h1>
</div>
</div>
</div>
{/* Contact us セクション */}
<div className="contact-section">
<h2>Contact Us</h2>
<p>お問い合わせやご相談はこちらからお気軽にご連絡ください。</p>
<ul>
<li>電話番号: 03-1234-5678</li>
<li>メール: info@example.com</li>
<li>住所: 東京都渋谷区〇〇1-2-3</li>
</ul>
</div>
{/* Google Map 埋め込みセクション */}
<div className="map-section">
<h2>Location</h2>
{/* Google Mapの埋め込み: 適宜座標を修正 */}
<iframe
title="Google Map"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.286949161955!2d139.70046485130232!3d35.65911558010011!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ca9bdf6f0df%3A0x8ba2c8b744ec3436!2z5qCq5byP5Lya56S-44G-44K444K_44OZ44Or!5e0!3m2!1sja!2sjp!4v1600000000000!5m2!1sja!2sjp"
width="100%"
height="400"
frameBorder="0"
style={{ border: 0 }}
allowFullScreen
aria-hidden="false"
tabIndex="0"
></iframe>
</div>
{/* Facebook情報表示セクション */}
<div className="facebook-section">
<h2>Facebook</h2>
{/* Facebookページのプラグイン埋め込み例 */}
{/* 下記はFacebook Page Pluginの例。ページURLは適宜差し替えてください。 */}
<div
className="fb-page"
data-href="https://www.facebook.com/facebook"
data-tabs="timeline"
data-width="500"
data-height="600"
data-small-header="false"
data-adapt-container-width="true"
data-hide-cover="false"
data-show-facepile="true"
>
<blockquote
cite="https://www.facebook.com/facebook"
className="fb-xfbml-parse-ignore"
>
<a href="https://www.facebook.com/facebook">Facebook</a>
</blockquote>
</div>
</div>
</div>
);
};
export default Home;
スタイル例 (Home.css)
.home-container {
font-family: sans-serif;
width: 100%;
margin: 0 auto;
}
.hero-container {
position: relative;
width: 100%;
height: 60vh;
overflow: hidden;
}
.hero-image-wrapper {
width: 100%;
height: 100%;
position: relative;
}
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-text-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 3rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
text-align: center;
}
.contact-section,
.map-section,
.facebook-section {
padding: 40px 20px;
max-width: 1200px;
margin: 0 auto;
}
.contact-section h2,
.map-section h2,
.facebook-section h2 {
margin-bottom: 20px;
}
.contact-section ul {
list-style: none;
padding: 0;
}
.contact-section li {
margin-bottom: 10px;
}
.facebook-section .fb-page {
margin-top: 20px;
}
補足
- スライドショーはuseEffectとsetIntervalを用いて簡易的に実装しています。より高度な演出にはreact-slickやswiperなどのライブラリを検討してください。
- Facebook情報表示はFacebook Developerサイトで取得できるコード（Facebook Page Pluginなど）を使用しています。実際には <div id="fb-root"></div> や Facebook SDK のスクリプト読み込みが必要になります（public/index.htmlなどで設定）。
- Google Mapはiframeを用いた簡易例です。@react-google-maps/apiなどを利用するとより柔軟な地図表示が可能です。
- スタイルは例示用です。実際のデザインに合わせて適宜変更してください。
画像の置き場所
上記サンプルコード中で参照している画像は、Reactの一般的なプロジェクト構成を想定すると public ディレクトリ配下の images フォルダに配置されていることを想定しています。たとえば、以下のようなディレクトリ構成を取ります。
my-app/
├─ public/
│ ├─ index.html
│ └─ images/
│ ├─ banner1.jpg
│ ├─ banner2.jpg
│ └─ banner3.jpg
└─ src/
├─ pages/
│ ├─ Home.js
│ └─ Home.css
└─ ...
この場合、Home.js 内で "/images/banner1.jpg" と書くことで、public/images/banner1.jpg の画像が参照されます。
banner1.jpg, banner2.jpg, banner3.jpg はそれぞれ public/images 配下に配置します。
完成したトップページ
上記コードから、画像遷移をフェード（グラデーション）で柔らかく切り替える方法を聞き出し修正しています。
使用した3枚の画像もChatGPTのDALL•Eで生成しました。
MAPやFacebook（Facebook公式アカウント）の投稿も表示させることができました。
※この度の知人の農家に向けたWEBアプリ開発ですが、情報非公開とさせていただきたいので位置情報やコンタクト先、Facebookのアカウントはデフォルトのままで行います。
最後に
今回作成したHome.js、おそらく「可読性の良いファイル構成にして」とか聞くと分割してさらに見やすく、メンテナンスしやすい構成になるかと思います。
私はまだ一つのファイルですがこの先分けようと思っています。
さて、最近（2024年12月10日現在）ChatGPTがアツいですね。
「12 Days of OpenAI」なるものが公表されていて目が離せません。
ChatGPTをバディに開発を行っている身として、取り入れられる技術は取り入れて開発進めていこうと思います。
次回こそ、メインである受注管理システムの構築です。
最初は注文の受付フォーム作成からで。
過去の投稿
アクセンチュア株式会社所属の社員有志による運営です。アクセンチュアの社員による様々な発信をまとめています。なお、投稿内容は社員個人の見解であり、所属する組織を代表するものではありません。
Discussion