[V0_FILE]typescriptreact:file="components/settings-screen.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Switch } from "@/components/ui/switch" import { Badge } from "@/components/ui/badge" import { ArrowLeft, Search, MapPin, Heart, Bell, Thermometer, Globe } from "lucide-react" interface SettingsScreenProps { currentCity: string onCityChange: (city: string) => void onBack: () => void } const popularCities = [ { name: "東京都", country: "日本", temp: "22°C" }, { name: "大阪府", country: "日本", temp: "20°C" }, { name: "京都府", country: "日本", temp: "18°C" }, { name: "横浜市", country: "日本", temp: "21°C" }, { name: "名古屋市", country: "日本", temp: "19°C" }, { name: "福岡市", country: "日本", temp: "23°C" }, { name: "札幌市", country: "日本", temp: "15°C" }, { name: "神戸市", country: "日本", temp: "20°C" }, ] const favoriteCities = [ { name: "東京都", lastVisited: "2024-12-15" }, { name: "大阪府", lastVisited: "2024-11-20" }, ] export function SettingsScreen({ currentCity, onCityChange, onBack }: SettingsScreenProps) { const [searchQuery, setSearchQuery] = useState("") const [notifications, setNotifications] = useState(true) const [tempUnit, setTempUnit] = useState<"celsius" | "fahrenheit">("celsius") const [favorites, setFavorites] = useState(favoriteCities) const filteredCities = popularCities.filter((city) => city.name.toLowerCase().includes(searchQuery.toLowerCase())) const addToFavorites = (cityName: string) => { if (!favorites.find((fav) => fav.name === cityName)) { setFavorites((prev) => [...prev, { name: cityName, lastVisited: new Date().toISOString().split("T")[0] }]) } } const removeFromFavorites = (cityName: string) => { setFavorites((prev) => prev.filter((fav) => fav.name !== cityName)) } return (

{/* ヘッダー */}

設定

{/* 現在の場所 */} 現在の場所

{currentCity} 選択中

{/* 都市検索 */} 都市を検索

setSearchQuery(e.target.value)} className="pl-10" />

{filteredCities.map((city) => (

onCityChange(city.name)} >

{city.name}

{city.country}

{city.temp}

))}

{/* お気に入り都市 */} お気に入り都市 {favorites.length === 0 ? (

お気に入りの都市がありません

都市をお気に入りに追加して素早くアクセス

) : (

{favorites.map((city) => (

onCityChange(city.name)} >

{city.name}

最終訪問: {city.lastVisited}

))}

)} {/* 通知設定 */} 通知設定

天気アラート

天気の変化をお知らせします

毎日の天気予報

朝の天気サマリー

旅行リマインダー

持ち物や計画のリマインダー

{/* 単位設定 */} 単位設定

温度

温度の単位を選択

距離

キロメートルまたはマイル

{/* アプリ情報 */} アプリについて

WeatherWise Travel

バージョン 1.0.0

天気予報に基づくスマートな旅行計画アプリ

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { MainScreen } from "@/components/main-screen" import { DetailScreen } from "@/components/detail-screen" import { SettingsScreen } from "@/components/settings-screen" import { MapScreen } from "@/components/map-screen" import type { WeatherData, TouristSpot } from "@/types" // モックデータ const mockWeatherData: WeatherData[] = [ { date: "2025-01-04", temperature: { high: 22, low: 15 }, condition: "sunny", humidity: 45, windSpeed: 8 }, { date: "2025-01-05", temperature: { high: 18, low: 12 }, condition: "cloudy", humidity: 60, windSpeed: 12 }, { date: "2025-01-06", temperature: { high: 16, low: 10 }, condition: "rainy", humidity: 85, windSpeed: 15 }, { date: "2025-01-07", temperature: { high: 20, low: 14 }, condition: "sunny", humidity: 50, windSpeed: 10 }, { date: "2025-01-08", temperature: { high: 24, low: 17 }, condition: "sunny", humidity: 40, windSpeed: 6 }, { date: "2025-01-09", temperature: { high: 19, low: 13 }, condition: "cloudy", humidity: 65, windSpeed: 11 }, { date: "2025-01-10", temperature: { high: 17, low: 11 }, condition: "rainy", humidity: 80, windSpeed: 14 }, ] const mockTouristSpots: TouristSpot[] = [ { id: "1", name: "東京スカイツリー", category: "outdoor", photos: ["/placeholder.svg?height=200&width=300"], weatherAdvice: { sunny: "絶景を楽しむのに最高の日です！朝早めの時間帯がおすすめです。", cloudy: "雲の合間から美しい景色が見えます。写真撮影にも良い条件です。", rainy: "屋内展望台もあります。雨の日は水族館もおすすめです。", }, coordinates: { lat: 35.7101, lng: 139.8107 }, rating: 4.5, hours: "8:00 - 22:00", price: "¥2,100", duration: "2-3時間", }, { id: "2", name: "東京国立博物館", category: "indoor", photos: ["/placeholder.svg?height=200&width=300"], weatherAdvice: { sunny: "暑さを避けて涼しい館内でゆっくり鑑賞できます。", cloudy: "博物館見学に最適な天気です。じっくりと展示を楽しめます。", rainy: "雨の日の定番スポット！日本の文化と歴史を学べます。", }, coordinates: { lat: 35.7188, lng: 139.7767 }, rating: 4.3, hours: "9:30 - 17:00", price: "¥1,000", duration: "2-4時間", }, { id: "3", name: "浅草寺", category: "outdoor", photos: ["/placeholder.svg?height=200&width=300"], weatherAdvice: { sunny: "美しい境内を散策できます。日焼け対策をお忘れなく。", cloudy: "情緒ある雰囲気の写真が撮れます。参拝にも良い天気です。", rainy: "屋根のある参道もあります。雨に濡れた境内も風情があります。", }, coordinates: { lat: 35.7148, lng: 139.7967 }, rating: 4.4, hours: "6:00 - 17:00", price: "無料", duration: "1-2時間", }, { id: "4", name: "チームラボボーダレス", category: "indoor", photos: ["/placeholder.svg?height=200&width=300"], weatherAdvice: { sunny: "暑い日の涼しい屋内スポット。デジタルアートの世界に没入できます。", cloudy: "天気を気にせず楽しめる最高のスポットです。事前予約必須！", rainy: "雨の日の究極の選択肢。デジタルの世界で何時間でも過ごせます。", }, coordinates: { lat: 35.6252, lng: 139.7756 }, rating: 4.7, hours: "10:00 - 19:00", price: "¥3,200", duration: "3-5時間", }, { id: "5", name: "明治神宮", category: "outdoor", photos: ["/placeholder.svg?height=200&width=300"], weatherAdvice: { sunny: "緑豊かな境内で森林浴を楽しめます。水分補給をお忘れなく。", cloudy: "散策に最適な天気です。静寂な雰囲気を味わえます。", rainy: "雨の森は神秘的な美しさがあります。滑りやすいのでご注意を。", }, coordinates: { lat: 35.6762, lng: 139.6993 }, rating: 4.2, hours: "5:00 - 18:00", price: "無料", duration: "1-2時間", }, { id: "6", name: "上野動物園", category: "outdoor", photos: ["/placeholder.svg?height=200&width=300"], weatherAdvice: { sunny: "動物たちが活発に動く姿が見られます。日陰での休憩も大切です。", cloudy: "動物観察に最適な天気。パンダも元気に動き回ります。", rainy: "屋内展示もあります。雨の日は動物たちの違った一面が見られるかも。", }, coordinates: { lat: 35.7167, lng: 139.7711 }, rating: 4.1, hours: "9:30 - 17:00", price: "¥600", duration: "3-4時間", }, ] export default function App() { const [currentScreen, setCurrentScreen] = useState<"main" | "detail" | "settings" | "map">("main") const [selectedDate, setSelectedDate] = useState("2025-01-04") const [selectedSpot, setSelectedSpot] = useState(null) const [currentCity, setCurrentCity] = useState("東京都") const [filter, setFilter] = useState<"all" | "indoor" | "outdoor">("all") const [weatherData] = useState(mockWeatherData) const [touristSpots] = useState(mockTouristSpots) const [userLocation, setUserLocation] = useState<{ lat: number; lng: number } | null>(null) const filteredSpots = touristSpots.filter((spot) => { if (filter === "all") return true return spot.category === filter }) const handleSpotSelect = (spot: TouristSpot) => { setSelectedSpot(spot) setCurrentScreen("detail") } const handleBackToMain = () => { setCurrentScreen("main") setSelectedSpot(null) } const handleOpenSettings = () => { setCurrentScreen("settings") } const handleCityChange = (city: string) => { setCurrentCity(city) setCurrentScreen("main") } const handleOpenMap = (spot: TouristSpot) => { setSelectedSpot(spot) setCurrentScreen("map") } return (

{currentScreen === "main" && ( )} {currentScreen === "detail" && selectedSpot && ( w.date === selectedDate)!} onBack={handleBackToMain} onOpenMap={() => handleOpenMap(selectedSpot)} /> )} {currentScreen === "settings" && ( )} {currentScreen === "map" && selectedSpot && ( )}

) } [V0_FILE]typescriptreact:file="components/detail-screen.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Checkbox } from "@/components/ui/checkbox" import type { TouristSpot, WeatherData } from "@/types" import { ArrowLeft, MapPin, Clock, JapaneseYenIcon as Yen, Star, Navigation, Backpack, Sun, Cloud, CloudRain, RefreshCw, } from "lucide-react" interface DetailScreenProps { spot: TouristSpot weather: WeatherData onBack: () => void onOpenMap: () => void } const getPackingList = (condition: string, category: string) => { const baseItems = [ { id: "phone", name: "スマートフォン", icon: "📱", checked: false }, { id: "camera", name: "カメラ", icon: "📷", checked: false }, { id: "wallet", name: "財布", icon: "💳", checked: false }, { id: "tissue", name: "ティッシュ", icon: "🧻", checked: false }, ] const weatherItems = { sunny: [ { id: "sunscreen", name: "日焼け止め", icon: "🧴", checked: false }, { id: "hat", name: "帽子", icon: "👒", checked: false }, { id: "sunglasses", name: "サングラス", icon: "🕶️", checked: false }, { id: "water", name: "水筒", icon: "💧", checked: false }, { id: "fan", name: "扇子・うちわ", icon: "🪭", checked: false }, ], cloudy: [ { id: "jacket", name: "薄手のジャケット", icon: "🧥", checked: false }, { id: "water", name: "水筒", icon: "💧", checked: false }, ], rainy: [ { id: "umbrella", name: "傘", icon: "☂️", checked: false }, { id: "raincoat", name: "レインコート", icon: "🧥", checked: false }, { id: "towel", name: "タオル", icon: "🏃", checked: false }, { id: "plastic", name: "ビニール袋", icon: "🛍️", checked: false }, { id: "shoes", name: "滑りにくい靴", icon: "👟", checked: false }, ], } const categoryItems = { outdoor: [ { id: "comfortable-shoes", name: "歩きやすい靴", icon: "👟", checked: false }, { id: "backpack", name: "リュックサック", icon: "🎒", checked: false }, ], indoor: [ { id: "jacket", name: "薄手の上着（冷房対策）", icon: "🧥", checked: false }, { id: "slippers", name: "スリッパ", icon: "🥿", checked: false }, ], } return [ ...baseItems, ...(weatherItems[condition as keyof typeof weatherItems] || []), ...(categoryItems[category as keyof typeof categoryItems] || []), ] } const alternativeSpots = [ { name: "東京国立博物館", category: "indoor", rating: 4.3 }, { name: "森美術館", category: "indoor", rating: 4.2 }, { name: "東京駅ギャラリー", category: "indoor", rating: 4.1 }, ] export function DetailScreen({ spot, weather, onBack, onOpenMap }: DetailScreenProps) { const [packingList, setPackingList] = useState(getPackingList(weather.condition, spot.category)) const [showAlternatives, setShowAlternatives] = useState(false) const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0) const togglePackingItem = (id: string) => { setPackingList((prev) => prev.map((item) => (item.id === id ? { ...item, checked: !item.checked } : item))) } const getWeatherIcon = (condition: string) => { switch (condition) { case "sunny": return case "cloudy": return case "rainy": return default: return } } const getWeatherText = (condition: string) => { switch (condition) { case "sunny": return "晴れ" case "cloudy": return "曇り" case "rainy": return "雨" default: return "晴れ" } } const checkedCount = packingList.filter((item) => item.checked).length return (

{/* ヘッダー */}

{spot.name}

{/* 写真ギャラリー */}

{spot.category === "indoor" ? "屋内" : "屋外"} {/* 天気オーバーレイ */}

{getWeatherIcon(weather.condition)} {getWeatherText(weather.condition)} {weather.temperature.high}°C

{/* 基本情報 */}

{spot.name}

{spot.rating} 評価

所要時間 {spot.duration}

料金 {spot.price}

営業時間 {spot.hours}

{/* 天気別アドバイス */} {getWeatherIcon(weather.condition)} 天気別アドバイス

{spot.weatherAdvice[weather.condition]}

{/* 持ち物リスト */} 持ち物チェックリスト {checkedCount}/{packingList.length}

{packingList.map((item) => (

togglePackingItem(item.id)} /> {item.icon} {item.name}

))}

{/* 代替プラン */} {weather.condition === "rainy" && spot.category === "outdoor" && ( 雨の日の代替案 {showAlternatives && (

{alternativeSpots.map((alt, index) => (

{alt.name}

{alt.category === "indoor" ? "屋内" : "屋外"}

{alt.rating}

))}

)} )} {/* アクションボタン */}

) } [V0_FILE]typescriptreact:file="components/main-screen.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import type { WeatherData, TouristSpot } from "@/types" import { Sun, Cloud, CloudRain, MapPin, Settings, Filter, Star, Clock, JapaneseYenIcon as Yen, Bell, Navigation, } from "lucide-react" interface MainScreenProps { weatherData: WeatherData[] touristSpots: TouristSpot[] selectedDate: string currentCity: string filter: "all" | "indoor" | "outdoor" userLocation: { lat: number; lng: number } | null onDateSelect: (date: string) => void onSpotSelect: (spot: TouristSpot) => void onFilterChange: (filter: "all" | "indoor" | "outdoor") => void onOpenSettings: () => void onOpenMap: (spot: TouristSpot) => void onLocationUpdate: (location: { lat: number; lng: number }) => void } // 距離計算関数（Haversine formula） const calculateDistance = (lat1: number, lng1: number, lat2: number, lng2: number): number => { const R = 6371 // 地球の半径（km） const dLat = (lat2 - lat1) * (Math.PI / 180) const dLng = (lng2 - lng1) * (Math.PI / 180) const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * (Math.PI / 180)) * Math.cos(lat2 * (Math.PI / 180)) * Math.sin(dLng / 2) * Math.sin(dLng / 2) const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)) return R * c } // 移動時間計算関数 const calculateTravelTime = (distance: number, mode: "walk" | "car" | "train" = "train"): string => { if (distance === 0) return "0分" let timeInMinutes: number switch (mode) { case "walk": // 徒歩: 時速4km timeInMinutes = (distance / 4) * 60 break case "car": // 車: 時速30km（都市部の平均） timeInMinutes = (distance / 30) * 60 break case "train": // 電車: 時速25km（乗り換え時間含む） timeInMinutes = (distance / 25) * 60 + 5 // 乗り換え時間5分追加 break default: timeInMinutes = (distance / 25) * 60 + 5 } if (timeInMinutes < 1) return "1分未満" if (timeInMinutes < 60) return `${Math.round(timeInMinutes)}分` const hours = Math.floor(timeInMinutes / 60) const minutes = Math.round(timeInMinutes % 60) return minutes > 0 ? `${hours}時間${minutes}分` : `${hours}時間` } export function MainScreen({ weatherData, touristSpots, selectedDate, currentCity, filter, userLocation, onDateSelect, onSpotSelect, onFilterChange, onOpenSettings, onOpenMap, onLocationUpdate, }: MainScreenProps) { const [showWeatherAlert, setShowWeatherAlert] = useState(true) const selectedWeather = weatherData.find((w) => w.date === selectedDate) useEffect(() => { // 現在地を取得 if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => { const location = { lat: position.coords.latitude, lng: position.coords.longitude, } onLocationUpdate(location) }, (error) => { console.error("位置情報の取得に失敗しました:", error) // デフォルトの位置（東京駅）を設定 onLocationUpdate({ lat: 35.6812, lng: 139.7671 }) }, ) } else { // デフォルトの位置（東京駅）を設定 onLocationUpdate({ lat: 35.6812, lng: 139.7671 }) } }, [onLocationUpdate]) const getRecommendedSpots = () => { if (!selectedWeather) return touristSpots let sortedSpots = [...touristSpots] // 現在地からの距離でソート if (userLocation) { sortedSpots = sortedSpots .map((spot) => { const distance = calculateDistance( userLocation.lat, userLocation.lng, spot.coordinates.lat, spot.coordinates.lng, ) return { ...spot, distance, travelTime: calculateTravelTime(distance, "train"), // 電車での移動時間を計算 } }) .sort((a, b) => { // 雨の日は屋内施設を優先 if (selectedWeather.condition === "rainy") { if (a.category === "indoor" && b.category === "outdoor") return -1 if (a.category === "outdoor" && b.category === "indoor") return 1 } // 距離順でソート return (a.distance || 0) - (b.distance || 0) }) } else { // 現在地が取得できない場合は評価順 sortedSpots = sortedSpots.sort((a, b) => { if (selectedWeather.condition === "rainy") { if (a.category === "indoor" && b.category === "outdoor") return -1 if (a.category === "outdoor" && b.category === "indoor") return 1 } return b.rating - a.rating }) } return sortedSpots } const formatDate = (dateStr: string) => { const date = new Date(dateStr) const weekdays = ["日", "月", "火", "水", "木", "金", "土"] return { day: weekdays[date.getDay()], date: date.getDate(), } } const getWeatherIcon = (condition: string) => { switch (condition) { case "sunny": return case "cloudy": return case "rainy": return default: return } } const getWeatherGradient = (condition: string) => { switch (condition) { case "sunny": return "from-yellow-400 to-orange-500" case "cloudy": return "from-gray-400 to-gray-600" case "rainy": return "from-blue-400 to-blue-600" default: return "from-yellow-400 to-orange-500" } } const getWeatherText = (condition: string) => { switch (condition) { case "sunny": return "晴れ" case "cloudy": return "曇り" case "rainy": return "雨" default: return "晴れ" } } return (

{/* ヘッダー */}

{currentCity}

{/* 天気アラート */} {showWeatherAlert && (

明日の天気が変わります - 代替プランをチェック！

)}

{/* 天気カレンダー */}

7日間の天気予報

{weatherData.map((weather) => { const { day, date } = formatDate(weather.date) const isSelected = weather.date === selectedDate return ( onDateSelect(weather.date)} >

{day}

{date}

{getWeatherIcon(weather.condition)}

{weather.temperature.high}°

{weather.temperature.low}°

) })}

{/* 現在の天気詳細 */} {selectedWeather && (

{selectedWeather.temperature.high}°C

{getWeatherText(selectedWeather.condition)}

湿度: {selectedWeather.humidity}%

風速: {selectedWeather.windSpeed} km/h

)} {/* フィルターボタン */}

おすすめスポット

{/* 観光スポット */}

{getRecommendedSpots().map((spot) => (

onSpotSelect(spot)}> {spot.name}

{spot.category === "indoor" ? "屋内" : "屋外"} {selectedWeather?.condition === "rainy" && spot.category === "indoor" && ( おすすめ )} {userLocation && spot.distance && ( {spot.distance.toFixed(1)}km )}

onSpotSelect(spot)}>

{spot.name}

{spot.rating}

onSpotSelect(spot)} >

{spot.duration}

{spot.price}

{spot.distance && (

{spot.distance.toFixed(1)}km

)} {spot.travelTime && (

{spot.travelTime}

)}

{selectedWeather && (

onSpotSelect(spot)}>

今日のアドバイス: {spot.weatherAdvice[selectedWeather.condition]}

)} {/* マップボタン */}

))}

) } [V0_FILE]typescriptreact:file="types/index.ts" isEdit="true" isQuickEdit="true" export interface WeatherData { date: string temperature: { high: number low: number } condition: "sunny" | "cloudy" | "rainy" | "snowy" humidity: number windSpeed: number } export interface TouristSpot { id: string name: string category: "indoor" | "outdoor" photos: string[] weatherAdvice: { sunny: string cloudy: string rainy: string } coordinates: { lat: number lng: number } rating: number hours: string price: string duration: string distance?: number // 現在地からの距離（km） travelTime?: string // 移動時間を追加 } export interface PackingItem { id: string name: string icon: string checked: boolean } [V0_FILE]typescriptreact:file="components/map-screen.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import type { TouristSpot } from "@/types" import { ArrowLeft, MapPin, Navigation, Locate, Car, Train, Clock, JapaneseYenIcon as Yen, Star, Phone, Globe, Share, } from "lucide-react" interface MapScreenProps { spot: TouristSpot userLocation: { lat: number; lng: number } | null onBack: () => void } // 距離計算関数（Haversine formula） const calculateDistance = (lat1: number, lng1: number, lat2: number, lng2: number): number => { const R = 6371 // 地球の半径（km） const dLat = (lat2 - lat1) * (Math.PI / 180) const dLng = (lng2 - lng1) * (Math.PI / 180) const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * (Math.PI / 180)) * Math.cos(lat2 * (Math.PI / 180)) * Math.sin(dLng / 2) * Math.sin(dLng / 2) const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)) return R * c } // calculateDistance関数の後に移動時間計算関数を追加: const calculateTravelTime = (distance: number, mode: "walk" | "car" | "train"): string => { if (distance === 0) return "0分" let timeInMinutes: number switch (mode) { case "walk": timeInMinutes = (distance / 4) * 60 break case "car": timeInMinutes = (distance / 30) * 60 break case "train": timeInMinutes = (distance / 25) * 60 + 5 break default: timeInMinutes = (distance / 25) * 60 + 5 } if (timeInMinutes < 1) return "1分未満" if (timeInMinutes < 60) return `${Math.round(timeInMinutes)}分` const hours = Math.floor(timeInMinutes / 60) const minutes = Math.round(timeInMinutes % 60) return minutes > 0 ? `${hours}時間${minutes}分` : `${hours}時間` } // routeOptionsの定義を動的に変更: const getRouteOptions = (distance: number) => [ { id: "car", name: "車", icon: Car, time: calculateTravelTime(distance, "car"), distance: `${distance.toFixed(1)}km`, cost: "¥200", }, { id: "train", name: "電車", icon: Train, time: calculateTravelTime(distance, "train"), distance: "乗換1回", cost: "¥160", }, { id: "walk", name: "徒歩", icon: Navigation, time: calculateTravelTime(distance, "walk"), distance: `${distance.toFixed(1)}km`, cost: "無料", }, ] const routeOptions = [ { id: "car", name: "車", icon: Car, time: "15分", distance: "3.2km", cost: "¥200" }, { id: "train", name: "電車", icon: Train, time: "22分", distance: "乗換1回", cost: "¥160" }, { id: "walk", name: "徒歩", icon: Navigation, time: "45分", distance: "3.2km", cost: "無料" }, ] export function MapScreen({ spot, userLocation, onBack }: MapScreenProps) { const [selectedRoute, setSelectedRoute] = useState("train") const [isLoading, setIsLoading] = useState(true) const [distance, setDistance] = useState(null) useEffect(() => { // マップ読み込みのシミュレーション const timer = setTimeout(() => { setIsLoading(false) }, 1500) // 距離計算 if (userLocation) { const dist = calculateDistance(userLocation.lat, userLocation.lng, spot.coordinates.lat, spot.coordinates.lng) setDistance(dist) } return () => clearTimeout(timer) }, [userLocation, spot.coordinates]) // MapScreen関数内で、routeOptionsの使用を変更: const routeOptions = distance ? getRouteOptions(distance) : [ { id: "car", name: "車", icon: Car, time: "計算中", distance: "計算中", cost: "¥200" }, { id: "train", name: "電車", icon: Train, time: "計算中", distance: "計算中", cost: "¥160" }, { id: "walk", name: "徒歩", icon: Navigation, time: "計算中", distance: "計算中", cost: "無料" }, ] return (

{/* ヘッダー */}

{spot.name}

{/* マップエリア（モック） */}

{isLoading ? (

マップを読み込み中...

) : ( <> {/* マップのモック表示 */}

{/* 道路のモック */}

{/* 現在地マーカー */} {userLocation && (

現在地

)} {/* 目的地マーカー */}

{spot.name}

{/* ルート線 */}

{/* 距離表示 */} {distance && (

{distance.toFixed(1)}km

)} {/* ズームコントロール */}

)}

{/* スポット情報 */}

{spot.name}

{spot.rating} 評価

{spot.category === "indoor" ? "屋内" : "屋外"}

所要時間 {spot.duration}

料金 {spot.price}

営業時間 {spot.hours}

{/* ルート選択 */} ルート選択

{routeOptions.map((route) => { const IconComponent = route.icon return (

setSelectedRoute(route.id)} >

{route.name}

{route.distance}

{route.time}

{route.cost}

) })}

{/* アクションボタン */}

{/* 住所情報 */}

住所

東京都墨田区押上1-1-2
東京スカイツリータウン

) }