進級制作で頑張ったこと
今回の進級制作について
進級制作では「Baw Baw Izakaya」というミャンマー料理店のWebサイトを制作しました。
今回の制作では、デザインだけでなくコーディングにも多く挑戦しました。
Reactのコンポーネントに挑戦したこと
今回初めて、Reactを使ってWebサイトのパーツをコンポーネントに分けて作りました。
同じデザインを何度も書かなくていいので、とても便利だと感じました。
const popularData = [
{ num: 1, title: "モヒンガー", price: "¥980", image: "./images/ramen02.png" },
{ num: 2, title: "シャンカウスエ", price: "¥980", image: "./images/shan-noodle.png" },
{ num: 3, title: "ビリヤニ", price: "¥1100", image: "./images/dan-pauk.png" },
{ num: 4, title: "チェーオーシーチェッ", price: "¥1100", image: "./images/ramen03.png" },
{ num: 5, title: "ココナッツミルクラーメン", price: "¥1100", image: "./images/coconnut-ramen.png" },
{ num: 6, title: "スパイシー豚リブスープ", price: "¥1200", image: "./images/soup03.png" },
];
const Popular = () => {
return (
<div className="popular__items">
{popularData.map((item) => (
<div className="popular__post post" key={item.num}>
<img
src={item.image}
alt={item.title}
className="post__image"
/>
<div className="post__content">
<h3>{item.title}</h3>
<p className="post__price">{item.price}</p>
</div>
</div>
))}
</div>
);
};
ReactDOM.createRoot(document.querySelector("#popular-root")).render(
<Popular />
);JavaScriptで動きをつけたこと
ボタンを押したらメニューが表示されるような動きも追加しました。
const hamburger = document.querySelector("#hamburger");
const gnav = document.querySelector("#gnav");
const links = document.querySelectorAll("#gnav a");
// Close menu when a link is clicked
for (let i = 0; i < links.length; i++) {
links[i].addEventListener("click", function () {
hamburger.classList.remove("active");
gnav.classList.remove("active");
document.body.classList.remove("no-scroll");
});
}
// Toggle menu
hamburger.addEventListener("click", (e) => {
e.stopPropagation();
hamburger.classList.toggle("active");
gnav.classList.toggle("active");
document.body.classList.toggle("no-scroll");
});
// Close menu when clicking outside
document.addEventListener("click", (e) => {
if (!hamburger.contains(e.target) && !gnav.contains(e.target)) {
hamburger.classList.remove("active");
gnav.classList.remove("active");
document.body.classList.remove("no-scroll");
}
});難しかったこと
Reactの仕組みを理解するのが難しかったです。特に、propsの使い方やコンポーネントの分け方で悩みました。しかし、調べながら作ることで少しずつ理解できるようになりました。
学んだこと
今回の制作で、Webサイトは見た目だけでなく、コードの整理も大切だと学びました。
コンポーネントを使うことで、管理しやすくなることを知りました。
今後に活かしたいこと
これからの制作でもReactを使って、もっと効率よくWebサイトを作れるようになりたいです。
また、JavaScriptの理解も深めていきたいと思いました。
