JSONから共通コンポーネントを作る

先日作ったxlsx2jsonを使って、まずは試しに都道府県の一覧をExcelのワークシートからJSONに変換してみました。

[
  {
    "code": "01",
    "name": "北海道"
  },
  {
    "code": "02",
    "name": "青森県"
  },
]

これをどうやってSvelteKitで使うかというと、まずはFetchしてからコンポーネントに渡す必要があります。以下のように書きます。

データを配置する

まず、src/data/shared/pref.jsonに上記のJSONを配置します。

データを読み込む

型定義して、データを読み込むためのコードを書きます。以下のようにsrc/lib/shared/pref.tsを作成します。

import rawJson from "@data/shared/pref.json";

export type Pref = {
 code: string;
 name: string;
};

export const prefs = rawJson as Pref[];

コンポーネントで使う

都道府県選択のドロップダウンを表示するコンポーネントを作成します。 以下のようにsrc/components/shared/PrefSelect.svelteを作成します。

ちなみにclassに定義されているのは、BeerCSSのスタイルを適用するためのものです。

<script lang="ts">
  import { prefs } from "@lib/shared/pref";
</script>

<div class="field label suffix border">
  <select id="select-warrior">
    {#each prefs as pref}
      <option value={pref.code}>{pref.name}</option>
    {/each}
  </select>
  <label for="select-warrior">Pref</label>
  <i>arrow_drop_down</i>
</div>

ページで使う

最後に、ページでこのコンポーネントを使います。以下のようにsrc/routes/+page.svelteを作成します。

<script lang="ts">
  import PrefSelect from "@components/shared/PrefSelect.svelte";
</script>

<h1>Welcome to SvelteKit</h1>
<p>
  Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the
  documentation
</p>

<PrefSelect />

ブラウザで見るとこんな感じに表示されます。

画面表示イメージ

共通コンポーネントはこんな感じでJSONとセットで使うと便利ですね。