①googleのsandboxを活用して、Reactで健康管理アプリを作成
②健康アプリ（日々、体重、血圧、体重を記録する）
③App.jsのソースコード
import React, { useState } from "react"; // ReactとuseStateをインポート
import "./styles.css"; // CSSファイルをインポート
import HealthForm from "./HealthForm";
import HealthList from "./HealthList";
function App() {
const loadDataFromLocalStorage = () => {
const savedData = localStorage.getItem("healthData");
return savedData ? JSON.parse(savedData) : [];
};
const [data, setData] = useState(loadDataFromLocalStorage);
const handleAddEntry = (newEntry) => {
const updatedData = [...data, newEntry];
setData(updatedData);
localStorage.setItem("healthData", JSON.stringify(updatedData));
};
const handleDeleteEntry = (index) => {
const updatedData = data.filter((_, i) => i !== index);
setData(updatedData);
localStorage.setItem("healthData", JSON.stringify(updatedData));
};
return (
<div className="app-container">
{/* 背景ぼかし用の要素 */}
<div className="background-blur"></div>
<div className="content">
<h1>健康管理アプリ</h1>
<HealthForm onAddEntry={handleAddEntry} />
<HealthList data={data} onDeleteEntry={handleDeleteEntry} />
</div>
</div>
);
}
export default App;
④HealthForm.jsのソースコード
import React, { useState } from "react";
function HealthForm({ onAddEntry }) {
const [form, setForm] = useState({
date: "",
temperature: "",
bloodPressure: "",
weight: "",
});
const handleChange = (e) => {
const { name, value } = e.target;
setForm({ ...form, [name]: value });
};
const handleSubmit = (e) => {
e.preventDefault();
if (form.date && form.temperature && form.bloodPressure && form.weight) {
onAddEntry(form);
setForm({ date: "", temperature: "", bloodPressure: "", weight: "" });
} else {
alert("全ての項目を入力してください！");
}
};
return (
<form onSubmit={handleSubmit} style={{ marginBottom: "20px" }}>
<input
type="date"
name="date"
value={form.date}
onChange={handleChange}
required
placeholder="日付"
/>
<input
type="number"
name="temperature"
value={form.temperature}
onChange={handleChange}
placeholder="体温 (℃)"
required
/>
<input
type="text"
name="bloodPressure"
value={form.bloodPressure}
onChange={handleChange}
placeholder="血圧"
required
/>
<input
type="number"
name="weight"
value={form.weight}
onChange={handleChange}
placeholder="体重 (kg)"
required
/>
<button type="submit">追加</button>
</form>
);
}
export default HealthForm;
⑤HealthList.jsのソースコード
import React from "react";
function HealthList({ data, onDeleteEntry }) {
return (
<div>
<h2>健康データ</h2>
<ul style={{ listStyleType: "none", padding: 0 }}>
{data.length === 0 ? (
<p>データがありません</p>
) : (
data.map((entry, index) => (
<li
key={index}
style={{
marginBottom: "10px",
border: "1px solid #ccc",
padding: "10px",
borderRadius: "5px",
}}
>
<p>日付: {entry.date}</p>
<p>体温: {entry.temperature}℃</p>
<p>血圧: {entry.bloodPressure}</p>
<p>体重: {entry.weight}kg</p>
<button onClick={() => onDeleteEntry(index)}>削除</button>
</li>
))
)}
</ul>
</div>
);
}
export default HealthList;
⑥index.jsのソースコード
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
⑦styles.css
body {
margin: 0;
font-family: Arial, sans-serif;
}
.app-container {
position: relative;
min-height: 100vh;
overflow: hidden;
}
/* 背景ぼかし用のスタイル */
.background-blur {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("/pic.webp") no-repeat center center fixed;
background-size: cover;
filter: blur(3px); /* 背景のみぼかす */
z-index: -1; /* 背景をコンテンツの後ろに配置 */
}
.content {
position: relative;
z-index: 1; /* コンテンツを背景より前に配置 */
padding: 20px;
color: #333;
backdrop-filter: none; /* フォームやテキストの背景ぼかしを無効化 */
}