【IT】SvelteでのJSONデータの表示（JSONPlaceholder）

T A

2023年5月9日 22:07

皆さま
こんにちは

今日は、SvelteでJSONデータを表示します。
データは、「JSONPlaceholder」を使用します。

前回のReactでのコードの移植版となります。

今回の内容

１．プロジェクト準備（下準備含む）
２．プログラム実装
３．動作確認

１．プロジェクト準備（下準備含む）

「npm init vite@latest」を実行してsvelteの開発環境を導入します。

$ npm init vite@latest
✔ Project name: … my-test004-svelte
✔ Select a framework: › Svelte
✔ Select a variant: › JavaScript

Scaffolding project in /Users/test001/my-test004-svelte...

Done. Now run:

  cd my-test004-svelte
  npm install
  npm run dev

$ cd my-test004-svelte

$ npm install

added 19 packages, and audited 20 packages in 11s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

「npm run dev」で一度サービスを起動します。

起動が確認できたらサービスを停止して不要ファイルを削除します。

「src/App.svelte」
「src/app.css」
の中身を一旦削除します。

「index.html」の中身を変更します。

・変更前

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Svelte</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

・変更後

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    
    <link rel="icon" href="/public/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSONテスト</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

以下のファイルを削除します。
「public/vite.svg」
「assets/svelte.svg」
「lib/Counter.svelte」

「public」ディレクトリーに任意の「favicon.ico」を配置します。

２．プログラムを実装します。

今回は、onMount、fetchを用いて実装します。

「App.svelte」

<script>
  import { onMount } from "svelte";

  const initialURL = "https://jsonplaceholder.typicode.com/users";
  let users = [];
  let loading = true;

  function sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

  async function doSleeping() {
    console.log("Waiting...");
    await sleep(3000);
    console.log("Done!");
    loading = false;
  }

  onMount(async () => {
    const res = await fetch(initialURL);
    users = await res.json();

    doSleeping();

    console.log(users);
    //loading = false;
  });
</script>

<main>
  <div>
    {#if loading}
      <h1>ロード中ーーーー</h1>
    {:else}
      <h1>JSON-APIテスト</h1>
      <hr />
      {#each users as userdata (userdata.id)}
        <div>
          <h2>user-id:{userdata.id}</h2>
          <h3>name:{userdata.name}</h3>
          <h4>mail:{userdata.email}</h4>
          <hr />
        </div>
      {/each}
    {/if}
  </div>
</main>

３．動作確認

ファイルの編集が終わったら「npm start」にて起動するか確認します。
３秒待ってから

テストユーザが表示されます。

では