[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68cb724fa7c881919457e33822c058ed","versionInt","title","お台場・班別行動インフォグラフ（react）","type","code/react","content","import React, { useMemo, useState } from \"react\";\n\n// 単一ファイル React コンポーネント\n// Tailwindで装飾。印刷と画面両対応、検索・エリア絞り込み、カード表示＋表表示（コピペ用）の両方に対応。\n// 必要に応じてをレンダリングしてください。\n\nconst DATA = [\n {\n area: \"アクアシティお台場\",\n color: \"from-cyan-500 to-sky-600\",\n spots: [\n {\n name: \"HADO ARENA お台場\",\n fee: \"120分フリープレイ学生2,500円（目安／要現地確認）\",\n feature:\n \"ARゴーグル＆腕センサーでエナジーボールを撃ち合うeスポーツ型アトラクション\",\n recommend:\n \"班で対戦しやすく公平に盛り上がる。動画・写真映えも良い\",\n avoid: \"激しい運動が苦手／強い光・音が苦手／体調不良時\",\n url: \"https://hado-official.com/shops/odaiba/\",\n },\n {\n name: \"アニタッチ（ふれあい動物園）\",\n fee: \"平日:大人1,500円／休日:大人1,800円（学割あり）\",\n feature: \"カピバラやワオキツネザル等とふれあえる“癒やし”特化\",\n recommend: \"動物好き・癒やし目的の班に。SNS写真の素材作り\",\n avoid: \"動物アレルギー／におい・衛生に敏感\",\n url: \"https://www.anitouch.jp/\",\n },\n {\n name: \"ニンジャ☆パークお台場店\",\n fee: \"初回登録500円＋90分:平日1,800円／土日祝2,300円\",\n feature: \"トランポリン・ボルダリング等の屋内アスレチック\",\n recommend: \"体を動かしたい班に。短時間でも満足度高い\",\n avoid: \"動きにくい服装／ケガしやすい人は無理しない\",\n url: \"https://ninja-park.com/\",\n },\n {\n name: \"フジテレビ本社（球体展望室はちたま）\",\n fee: \"高校生以上800円／小中500円\",\n feature: \"お台場とレインボーブリッジを一望できる展望室\",\n recommend: \"屋内で天候に強く、時間調整にも使いやすい\",\n avoid: \"高所・人混みが苦手／荒天時の営業変更\",\n url: \"https://www.fujitv.com/ja/visit_fujitv/\",\n },\n ],\n },\n {\n area: \"デックス東京ビーチ\",\n color: \"from-amber-500 to-orange-600\",\n spots: [\n {\n name: \"東京ジョイポリス\",\n fee: \"入場1,500円／パスポート高校生4,800円（夕方割有）\",\n feature: \"屋内型テーマパーク。絶叫・ホラー・協力系まで多彩\",\n recommend: \"天候不問で“がっつり遊ぶ”。班で役割分担しやすい\",\n avoid: \"乗り物酔い／暗所・大音量が苦手／混雑耐性が低い\",\n url: \"https://tokyo-joypolis.com/\",\n },\n {\n name: \"東京トリックアート迷宮館\",\n fee: \"高校生以上1,200円／小人800円\",\n feature: \"目の錯覚×撮影が楽しい。所要1時間前後\",\n recommend: \"コスト低めで写真素材を量産。短時間で区切りやすい\",\n avoid: \"撮影興味薄い班／混雑待ちが苦手\",\n url: \"https://trickart.info/\",\n },\n {\n name: \"マダム・タッソー東京\",\n fee: \"日付指定:中学生以上2,100円〜（変動制）\",\n feature: \"等身大フィギュアに“見る・撮る・触る”。一部有料VRあり\",\n recommend: \"有名人・アーティスト好きに刺さる。屋内で天候に強い\",\n avoid: \"撮影に興味がない／人混みが極端に苦手\",\n url: \"https://www.madametussauds.com/tokyo/\",\n },\n {\n name: \"レゴランド・ディスカバリー・センター東京\",\n fee: \"動的価格（例:2,600円〜）。※16歳以上のみの入場不可\",\n feature: \"レゴの体験型屋内施設（主に小学生向け）\",\n recommend: \"縦割りで小学生以下同伴の班向け。雨天の避難先\",\n avoid: \"高校生だけの班は入場要件NG\",\n url: \"https://www.legolanddiscoverycenter.jp/tokyo/\",\n },\n {\n name: \"カジノヴィーナス（お試しカジノ）\",\n fee: \"入場無料（チップ体験は別途）。未成年は入場制限あり\",\n feature: \"賭けない体験型カジノ。大人の世界観を学ぶ\",\n recommend: \"社会見学としてユニーク（校則・学校方針確認必須）\",\n avoid: \"校則でNG／賭博連想に強い抵抗がある\",\n url: \"https://www.venusfort.co.jp/（※旧情報、施設案内・現地確認）\",\n },\n {\n name: \"The Kids（屋内キッズパーク）\",\n fee: \"平日フリー1,300円／休日時間制1,500円ほか（小児向け）\",\n feature: \"未就学〜小低向け。高校生のみ利用は場違い\",\n recommend: \"縦割りで小さい子のサポートが目的なら\",\n avoid: \"高校生だけの班\",\n url: \"https://odaiba-decks.com/\",\n },\n ],\n },\n {\n area: \"東京テレポート／青海\",\n color: \"from-emerald-500 to-teal-600\",\n spots: [\n {\n name: \"City Circuit Tokyo Bay（電動カート）\",\n fee: \"走行プラン多数（例: 基本走行10分×2 など）\",\n feature: \"市街地コースを電動カートで走行。写真・動画映え\",\n recommend: \"スピード体験＆順番交代で班行動しやすい。安全講習あり\",\n avoid: \"安全ルールに従えない／運転不安が強い／荒天中止あり\",\n url: \"https://city-circuit.com/\",\n },\n {\n name: \"イマーシブ・フォート東京\",\n fee: \"演目ごとに個別チケット（価格は演目により異なる）\",\n feature: \"自分が物語に入り込む没入型テーマパーク（ホラー〜冒険）\",\n recommend: \"体験の質が高い。役割分担で複数演目攻略も◎\",\n avoid: \"暗所・大音量・驚かしが苦手／演出酔い\",\n url: \"https://immersivefort.com/\",\n },\n ],\n },\n {\n area: \"ダイバーシティ東京プラザ\",\n color: \"from-fuchsia-500 to-pink-600\",\n spots: [\n {\n name: \"ティフォニウムお台場（VR）\",\n fee: \"2,300円〜（作品により異なる）\",\n feature: \"VR体験。ホラー『コリドール』など13歳以上対象\",\n recommend: \"短時間×高体験価値。感想共有が盛り上がる\",\n avoid: \"VR酔い／強い光・音に弱い／妊娠中・体調不良\",\n url: \"https://www.tyffonium.com/\",\n },\n {\n name: \"実物大ユニコーンガンダム立像\",\n fee: \"観覧無料（発光・変身演出は時間帯ごと）\",\n feature: \"屋外で迫力の演出。合流地点に使いやすい\",\n recommend: \"無料で満足度高い。記念撮影に最適\",\n avoid: \"混雑が苦手／天候の影響を受ける\",\n url: \"https://mitsui-shopping-park.com/divercity-tokyo/\",\n },\n {\n name: \"リトルプラネット（デジタルテーマパーク）\",\n fee: \"例: 休日30分高校生720円〜（会員制・時間課金）\",\n feature: \"“遊びが学びに変わる”インタラクティブ遊具\",\n recommend: \"ICT×創造遊び。短時間で区切れる\",\n avoid: \"小児向け色が強いのが苦手／混雑待ち\",\n url: \"https://litpla.com/\",\n },\n {\n name: \"うんこミュージアム TOKYO\",\n fee: \"動的価格（例: 大人2,000〜3,000円、学生1,500〜1,600円）\",\n feature: \"“うんこ”をテーマにしたポップアート＆体験\",\n recommend: \"ノリで楽しめる班に。SNS映え\",\n avoid: \"テーマに抵抗が強い／混雑・音量が苦手\",\n url: \"https://unkomuseum.com/tokyo/\",\n },\n {\n name: \"ラウンドワンスタジアム\",\n fee: \"種目・時間帯で変動（例: スポッチャ学生1,990円〜/3h）\",\n feature: \"ボウリング・カラオケ・アミューズメントを一か所で\",\n recommend: \"大人数班でも“みんなで”楽しめる。雨天でも安心\",\n avoid: \"体力が極端に低い人は長時間パック非推奨／深夜不可\",\n url: \"https://www.round1.co.jp/\",\n },\n ],\n },\n {\n area: \"ちょっと離れて（有明・南側ほか）\",\n color: \"from-indigo-500 to-blue-600\",\n spots: [\n {\n name: \"東京都水の科学館（有明）\",\n fee: \"入場無料\",\n feature: \"体験展示で“水の循環”を学べる科学館\",\n recommend: \"予算ゼロで“学び×体験”。暑い日の避難先にも\",\n avoid: \"体験展示に興味がない班\",\n url: \"https://www.mizunokagaku.jp/\",\n },\n {\n name: \"日本科学未来館（青海）\",\n fee: \"常設: 大人960円／18歳以下320円（企画展別）\",\n feature: \"宇宙・地球環境・医療など大型科学展示\",\n recommend: \"レポート課題と相性抜群。テーマ分担がしやすい\",\n avoid: \"展示量多く“駆け足見学”が苦手／混雑時待ち\",\n url: \"https://www.miraikan.jst.go.jp/\",\n },\n {\n name: \"SMALL WORLDS TOKYO（有明）\",\n fee: \"大人2,700円／中高生1,900円（当日）\",\n feature: \"1/80ミニチュアの精密世界。撮影・観察に最適\",\n recommend: \"“観察×撮影”が好きな班に。創作のインスピレーション\",\n avoid: \"細かい模型に興味が薄い／撮影待ちが苦手\",\n url: \"https://www.smallworlds.jp/\",\n },\n ],\n },\n];\n\nfunction Badge({ children }: { children: React.ReactNode }) {\n return (\n \n {children}\n \n );\n}\n\nfunction SpotCard({ spot }: { spot: any }) {\n return (\n

{spot.name}

\n \n 公式サイト\n \n

\n 入場料\n

{spot.fee}

\n 特徴\n

{spot.feature}

\n 高校生におすすめ\n

{spot.recommend}

\n やめた方がいい人\n

{spot.avoid}

\n );\n}\n\nfunction AreaSection({ area, spots, color }: any) {\n return (\n

\n \n

{area}

\n \n

\n {spots.map((s: any) => (\n \n ))}\n

\n );\n}\n\nfunction CopyTable({ filtered }: { filtered: typeof DATA }) {\n return (\n

コピペ用・表形式（エリア→施設の順）

\n ※選択してコピー可。スプレッドシートに貼り付け前提のシンプル表。\n

\n {filtered.map((g) => (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n {g.spots.map((s: any) => (\n \n \n \n \n \n \n \n \n \n ))}\n \n

エリア	施設名	入場料	特徴	高校生におすすめ	やめた方がいい人	公式URL
{g.area}	{s.name}	{s.fee}	{s.feature}	{s.recommend}	{s.avoid}	{s.url}

\n ))}\n

\n );\n}\n\nexport default function OdaibaInfographic() {\n const [q, setQ] = useState(\"\");\n const [onlyArea, setOnlyArea] = useState(\"すべて\");\n const [showTable, setShowTable] = useState(true);\n\n const areas = useMemo(() => [\"すべて\", ...DATA.map((d) => d.area)], []);\n\n const filtered = useMemo(() => {\n return DATA.map((group) => ({\n ...group,\n spots: group.spots.filter((s) => {\n const hitQ =\n !q ||\n [group.area, s.name, s.feature, s.recommend, s.avoid]\n .join(\"\\t\")\n .toLowerCase()\n .includes(q.toLowerCase());\n const hitArea = onlyArea === \"すべて\" || onlyArea === group.area;\n return hitQ && hitArea;\n }),\n })).filter((g) => g.spots.length > 0);\n }, [q, onlyArea]);\n\n return (\n

\n {/* ヘッダ */}\n

\n お台場・班別行動インフォグラフ（遊戯・体験型施設）\n

\n 料金は日付や時間帯で変動する場合があります。最終確認は各公式サイトで。\n

\n setQ(e.target.value)}\n placeholder=\"検索（施設名・特徴など）\"\n className=\"w-60 rounded-xl border border-black/20 bg-white px-3 py-2 text-sm shadow-inner focus:outline-none\"\n />\n setOnlyArea(e.target.value)}\n className=\"rounded-xl border border-black/20 bg-white px-3 py-2 text-sm\"\n >\n {areas.map((a) => (\n \n ))}\n \n window.print()}\n className=\"rounded-xl border border-black/20 bg-white px-3 py-2 text-sm shadow-sm hover:shadow\"\n title=\"印刷／PDF化\"\n >\n 印刷／PDF\n \n \n setShowTable(e.target.checked)}\n />\n コピペ用の表を表示\n \n

\n\n {/* グリッド */}\n

\n {filtered.map(({ area, spots, color }) => (\n \n ))}\n {showTable && }\n

\n\n {/* フッタ */}\n \n\n {/* 印刷用最小スタイル */}\n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","2735052631264297170","traceTime",1776432868219]