Svelte 入門: JSON ファイルをインポートして使う

更新: 2023-09-19 / 作成: 2023-09-19

Svelte (SvelteKit) アプリ内の Svelte コンポーネントや JavaScript/TypeScript ライブラリでは、JSON ファイルを import 文で簡単に読み込めるようになっています（正確には Vite の Static Asset Handling の仕組みを利用しています）。

ここでは、サンプルデータとして下記のようなゲームソフト情報を含んだ JSON ファイルを用意します。この JSON ファイルはビルド時にインポートするので、static ディレクトリではなく src ディレクトリのどこかに配置します（ここでは、lib/assets というディレクトリに配置しています）。

src/lib/assets/games.json

[
	{
		"title": "シャドウラン",
		"date": "1996-02-23",
		"price": 7800
	},
	{
		"title": "トムキャットアレイ",
		"date": "1994-12-22",
		"price": 7800
	},
	{
		"title": "真・女神転生",
		"date": "1994-02-25"
	}
]

このファイルを Svelte コンポーネントから直接インポートしてもよいのですが、次のように明示的に TypeScript の型情報を付加するライブラリでラップしておくと便利かもしれません。

src/lib/games.ts

import rawJson from '$lib/assets/games.json';

/** ゲームソフトの情報 */
export type Game = {
	/** ゲームタイトル */
	title: string;
	/** 発売日 */
	date: string;
	/** 価格 */
	price?: number;
};

// 型情報を付けて games という名前で export する
export const games = rawJson as Game[];

実際には、明示的に型情報を付加しなくても、JSON ファイルの内容から自動的に型情報を推測してくれます。ただ、上記のように型情報を定義することで、ドキュメントテーションコメントを記述できたり、JSON ファイル内のデータが想定外の型で記述されているときに警告してくれるというメリットがあります。

あとは、このモジュールを任意の Svelte コンポーネントからインポートして使います。

src/routes/sample/+page.svelte

<script lang="ts">
	import { games } from '$lib/games';
</script>

<ul>
	{#each games as g}
		<li>{g.title} ({g.date}) {g.price ? `${g.price}円` : '価格不明'}</li>
	{/each}
</ul>

次のような感じの内容で出力されれば成功です。

<ul>
  <li>シャドウラン (1996-02-23) 7800円</li>
  <li>トムキャットアレイ (1994-12-22) 7800円</li>
  <li>真・女神転生 (1994-02-25) 価格不明</li>
</ul>

この JSON インポート処理はビルド時に実行されるので、Svelte アプリを SSG (Static Site Generation) ビルドするときにも使うことができます。 JSON ファイルの代わりに YAML ファイルをインポートしたいときは次の記事を参考にしてください。

参考: Svelte 応用: YAML ファイルをインポートして使う

JSON Svelte

Svelte 関連メモ
へ戻る

関連記事