動的パスサンプル

spa-example/src/data/Prefecture.ts

@@ -0,0 +1,54 @@
+export interface Prefecture {
+    code: string;
+    name: string;
+}
+
+export const prefectures: Prefecture[] = [
+    { code: "01", name: "北海道" },
+    { code: "02", name: "青森県" },
+    { code: "03", name: "岩手県" },
+    { code: "04", name: "宮城県" },
+    { code: "05", name: "秋田県" },
+    { code: "06", name: "山形県" },
+    { code: "07", name: "福島県" },
+    { code: "08", name: "茨城県" },
+    { code: "09", name: "栃木県" },
+    { code: "10", name: "群馬県" },
+    { code: "11", name: "埼玉県" },
+    { code: "12", name: "千葉県" },
+    { code: "13", name: "東京都" },
+    { code: "14", name: "神奈川県" },
+    { code: "15", name: "新潟県" },
+    { code: "16", name: "富山県" },
+    { code: "17", name: "石川県" },
+    { code: "18", name: "福井県" },
+    { code: "19", name: "山梨県" },
+    { code: "20", name: "長野県" },
+    { code: "21", name: "岐阜県" },
+    { code: "22", name: "静岡県" },
+    { code: "23", name: "愛知県" },
+    { code: "24", name: "三重県" },
+    { code: "25", name: "滋賀県" },
+    { code: "26", name: "京都府" },
+    { code: "27", name: "大阪府" },
+    { code: "28", name: "兵庫県" },
+    { code: "29", name: "奈良県" },
+    { code: "30", name: "和歌山県" },
+    { code: "31", name: "鳥取県" },
+    { code: "32", name: "島根県" },
+    { code: "33", name: "岡山県" },
+    { code: "34", name: "広島県" },
+    { code: "35", name: "山口県" },
+    { code: "36", name: "徳島県" },
+    { code: "37", name: "香川県" },
+    { code: "38", name: "愛媛県" },
+    { code: "39", name: "高知県" },
+    { code: "40", name: "福岡県" },
+    { code: "41", name: "佐賀県" },
+    { code: "42", name: "長崎県" },
+    { code: "43", name: "熊本県" },
+    { code: "44", name: "大分県" },
+    { code: "45", name: "宮崎県" },
+    { code: "46", name: "鹿児島県" },
+    { code: "47", name: "沖縄県" }
+];

spa-example/src/data/PrefectureWeatherForecast.ts

@@ -0,0 +1,25 @@
+/**
+ * 都道府県天気予報
+ */
+export interface PrefectureWeatherForecast {
+    /**
+     * 発表気象台
+     */
+    publishingOffice:string;
+    /**
+     * 発表日時
+     */
+    reportDatetime: string;
+    /**
+     * 対象エリア
+     */
+    targetArea: string;
+    /**
+     * ヘッドライン
+     */
+    headlineText: string;
+    /**
+     * 本文
+     */
+    text: string;
+}

spa-example/src/lib/i18n/en.json

@@ -14,7 +14,8 @@
 
     "nav": {
         "home": "Home",
-        "contact": "Contact"
+        "contact": "Contact",
+        "pref_forecast": "Forecast"
     },
     "home": {
         "title": "Home"

spa-example/src/lib/i18n/ja.json

@@ -13,7 +13,8 @@
     },
     "nav": {
         "home": "ホーム",
-        "contact": "問い合わせ"
+        "contact": "問い合わせ",
+        "pref_forecast": "天気予報"
     },
     "home": {
         "title": "ホーム"

spa-example/src/routes/+layout.svelte

@@ -57,6 +57,9 @@
 				<li>
 					<a href="{base}/contact" class="hover:text-white">{$str('nav.contact', '問い合わせ')}</a>
 				</li>
+				<li>
+					<a href="{base}/weather/01" class="hover:text-white">{$str('nav.pref_forecast', '天気予報')}</a>
+				</li>
 			</ul>
 		</div>
 		<div class="navbar-end">
@@ -84,7 +87,7 @@
 		</div>
 	</div>
 
-	<main>
+	<main class="min-h-[75vh]">
 		<slot />
 	</main>
 

spa-example/src/routes/+page.svelte

@@ -23,7 +23,7 @@ import { str } from '$lib/i18n/i18n';
 
 <style lang="postcss">
 	.bg-main {
-		height: 70vh;
+		height: 75vh;
 		@apply bg-primary;
 	}
 </style>

spa-example/src/routes/layout.ts

@@ -1,3 +1,3 @@
 // 最上位のlayout.tsでサーバーサイドレンダリングをOFFにする
 export const ssr = false;
-export const prerender = false;
+export const prerender = true;

spa-example/src/routes/weather/+layout.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { prefectures, type Prefecture } from '../../data/Prefecture';
+
+    /**
+     * 選択中都道府県コード
+     */
+    let selectedPrefectureCode: string = $page.params.slug;
+
+    /**
+     * 都道府県コードをを変更します。
+     * 
+     * @param event
+     */
+	function changePrefecture(event: Event & { currentTarget: EventTarget & HTMLSelectElement; }) {
+		goto(`./${prefectures.filter(pref => pref.code === selectedPrefectureCode)[0].code}`);
+	}
+</script>
+
+<div class="p-4">
+    <a href="https://www.jma.go.jp/bosai/forecast/">※気象庁のデータを参照しています。</a>
+	<div class="p-4">
+        <!-- 都道府県ddl -->
+		<select class="select select-bordered" bind:value={selectedPrefectureCode} on:change={changePrefecture}>
+			{#each prefectures as pref}
+				<option value={pref.code} selected={selectedPrefectureCode === pref.code}>{pref.name}</option>
+			{/each}
+		</select>
+	</div>
+	<div class="p-4">
+		<slot />
+	</div>
+</div>

spa-example/src/routes/weather/[prefCode]/+page.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { PrefectureWeatherForecast } from '../../../data/PrefectureWeatherForecast';
+	import type { PageData } from './$types';
+
+	/**
+	 * ページデータ
+	 */
+	export let data: PageData;
+
+	let forecast: PrefectureWeatherForecast | null = null;
+
+	$: {
+		// ページデータ内の予報がanyになっちゃう　なんでだ
+		forecast = data.prefectureWeatherForecast;
+	}
+</script>
+
+<div>
+	{#if forecast}
+		<div>{forecast?.publishingOffice}</div>
+		<div>{forecast?.reportDatetime}</div>
+		<div>{forecast?.targetArea}</div>
+
+		<div class="pt-4">
+			<div>{forecast?.headlineText}</div>
+			<div>{@html forecast?.text.replace('\n', '<br>')}</div>
+		</div>
+	{:else}
+		<div>天気予報を取得できませんでした。</div>
+	{/if}
+</div>

spa-example/src/routes/weather/[prefCode]/+page.ts

@@ -0,0 +1,44 @@
+import type { PrefectureWeatherForecast } from "../../../data/PrefectureWeatherForecast";
+import type { PageLoad } from "./$types";
+
+
+const regex = /^\d{2}$/;
+
+type Data = { prefectureWeatherForecast: PrefectureWeatherForecast | null }
+
+export const load: PageLoad<Data> = async ({ params }) => {
+
+    if (!regex.test(params.prefCode)) {
+        throw new Error(`Invalid path`);
+    }
+
+    try {
+        // 気象庁のjsonファイルを参照します。
+        // https://www.jma.go.jp/jma/kishou/info/coment.html
+        const response = await fetch(`https://www.jma.go.jp/bosai/forecast/data/overview_forecast/${params.prefCode}0000.json`);
+
+        if (!response.ok) {
+            if (response.status == 404) {
+                return {
+                    prefectureWeatherForecast: null
+                }
+            }
+
+            throw new Error(`レスポンスステータス: ${response.status}`);
+        }
+
+        let json = await response.json();
+
+        return {
+            prefectureWeatherForecast: json
+        };
+    } catch (e) {
+        // TODO　エラーハンドリング
+        console.error(e);
+
+        return {
+            prefectureWeatherForecast: null
+        }
+    }
+
+}

spa-example/src/routes/weather/layout.ts

@@ -0,0 +1,3 @@
+// 動的にパスを変える場合、prerenderはfalseにする
+export const ssr = false;
+export const prerender = false;

spa-example/svelte.config.js

@@ -24,7 +24,7 @@ const config = {
 			directives: {
 				'default-src': ['none'],
 				'script-src': ['self'],
-				'connect-src' : ['self'],
+				'connect-src' : ['self', 'https://www.jma.go.jp'],
 				'style-src' : ['self', 'unsafe-inline'],
 				'img-src': ['self']
 			}

spa-example/tsconfig.json

@@ -1,6 +1,9 @@
 {
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
+		"paths": {
+			"$src/*": ["./src"]
+		},
 		"allowJs": true,
 		"checkJs": true,
 		"esModuleInterop": true,