// バリエーションB: マガジン風グリッド (大判ヒーロー + 4カラムグリッド + サイドバー細め) function VariationB({ activeCategory, setActiveCategory }) { const data = useData(); const articles = activeCategory === "all" ? data.articles : data.articles.filter((a) => a.cat === activeCategory); const hero = data.articles.find((a) => a.id === 11) || data.articles[0]; const subFeatures = data.articles.filter((a) => a.featured && a.id !== hero.id).slice(0, 2); const grid = articles.slice(0, 12); return (

{/* Minimal magazine header */}

VOL.{data.established.slice(-2)} · {new Date().toLocaleDateString("ja-JP")}

{data.siteName}

— {data.tagline} —

EST. {data.established} · TOKYO

{[ { id: "all", label: "ALL" }, ...data.categories.slice(0, 7).map((c) => ({ id: c.slug, label: c.name.toUpperCase() })), ].map((n) => ( ))}

{/* Hero */}

COVER STORY

{hero.title}

{hero.excerpt}

文・{hero.author} {hero.date} 👁 {fmt(hero.views)}

{/* Section heading */}

{activeCategory === "all" ? "LATEST" : data.categories.find((c) => c.slug === activeCategory)?.name}

{grid.length} ARTICLES

{/* 4-column grid */}

{grid.map((a) => (

{a.title}

{a.date} 👁 {fmt(a.views)}

))}

{/* Two-up callout: ranking + opinion */}

週間ランキング

{data.ranking.slice(0, 5).map((r) => { const a = data.articles.find((x) => x.id === r.id); return (

{String(r.rank).padStart(2, "0")}

{a.title}

{a.date}

👁{fmt(a.views)}

); })}

OPINION

GCAPの意義は「機体」ではなく「枠組み」にある

次期戦闘機GCAPを単なるプラットフォーム更新と見るのは誤りである。日英伊の三国共同という枠組みそのものが、戦後日本の防衛装備調達における…

山

山岡健一

主筆

); } Object.assign(window, { VariationB });