クエスト10：総合問題（ブログ風ページ）

今回の課題

ArticleCard コンポーネントでタイトル・カテゴリ・日付を表示し、BlogList で articles.map() を使って一覧を作ろう！

📖 解説を見る

🏆 Next.js 総合問題

これまで学んだ知識を使って、ブログ風の記事一覧ページを完成させよう！
• ArticleCard コンポーネント（title・category・date を表示）
• BlogList ページ（articles を map() で並べる）

コンポーネントへの props 渡しと map() を使った繰り返しがポイントです。

ヒントを見る

ArticleCard に {title}{category}{date} を表示。BlogList で articles.map(a => <ArticleCard key={a.id} title={a.title} ... />) を書こう

期待する出力

ブログ記事一覧

📄 見本

「答えを見る」を押すと、お手本のコードが出ます。クリックでコピーできます。

💻 コードエディタ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <style>body{margin:0}</style>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
// ブログ風ページを完成させよう！
// 以下の記事データを使って記事一覧ページを作ってください

const articles = [
  { id: 1, title: "Next.jsを始めよう", category: "入門", date: "2026-01-01" },
  { id: 2, title: "ファイルベースルーティングの仕組み", category: "応用", date: "2026-01-10" },
  { id: 3, title: "getStaticPropsでデータを取得する", category: "応用", date: "2026-01-20" },
];

// ① ArticleCard コンポーネントを作ろう（title, category, date を表示）
function ArticleCard({ title, category, date }) {
  return (
    <div style={{border:"1px solid #e5e7eb",borderRadius:"8px",padding:"16px",marginBottom:"12px"}}>
      {/* タイトル・カテゴリ・日付を表示しよう */}
    </div>
  );
}

// ② BlogList ページを完成させよう
function BlogList() {
  return (
    <div style={{maxWidth:"600px",margin:"0 auto",padding:"20px",fontFamily:"sans-serif"}}>
      <h1 style={{borderBottom:"2px solid #000",paddingBottom:"8px"}}>📰 ブログ記事一覧</h1>
      {/* articles.map() で ArticleCard を並べよう */}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<BlogList />);
  </script>
</body>
</html>

あなたの出力

実行すると結果がここに表示されます

このクエストはプレミアム限定です

クエスト10：総合問題（ブログ風ページ）

クエスト10：総合問題（ブログ風ページ）

れんしゅうもんだい