SvelteKit + Svelte を1年間くらい使ってみた知見など

<script>
  // coutを定義
	let count = 0;

  // onclickで使用する関数
	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

<script>
	let promise = getRandomNumber();

	async function getRandomNumber() {
    const URL = "xxx"
		const res = await fetch(URL);
		const text = await res.text();

		if (res.ok) {
			return text;
		} else {
			throw new Error(text);
		}
	}

	function handleClick() {
		promise = getRandomNumber();
	}
</script>

<button on:click={handleClick}>
	generate random number
</button>

{#await promise}
	<p>...waiting</p>
{:then data}
	<p>{data}</p>
{:catch error}
	<p style="color: red">{error.message}</p>
{/await}

npm init svelte static-site-sveltekit

npm create svelte@latest my-app

<script context="module">
  export async function load() {
    let articles
    try {
      articles = await fetch(`https://dev.to/api/articles?tag=svelte&per_page=5&page=1`);
      articles = await articles.json();
      console.log(articles)
    } catch (e) {
      console.log(e)
    }
    return {
      props: {
        articles
      }
    }
  }
</script>

<script>
  export let articles
  const PostArticles = articles
</script>

<svelte:head>
  <title>Blog</title>
</svelte:head>


<div>
  <h1>Svelte devto Articles</h1>
  {#each PostArticles as article}
    <div>
      <header>
        <h2>{article.title}</h2>
        <h4>Tags: {article.tags}</h4>
      </header>
      <p>
        {article.description}
      </p>
      <a href={`/blog/${article.id}`}>MORE</a>
    </div>
  {/each}
  {#if PostArticles.length === 0}
    <div>No Articles</div>
  {/if}
</div>

export async function load({ fetch }) {
  const pagesReq = await fetch(
    `https://dev.to/api/articles?tag=svelte&per_page=5&page=1`
  );
  let articles = await pagesReq.json();
  return {
    articles
  };
}

<script>
  export let data;
</script>


<svelte:head>
  <title>Blog</title>
</svelte:head>


<div>
  <h1>Svelte devto Articles</h1>
  {#each data as article}
    <div>
      <header>
        <h2>{article.title}</h2>
        <h4>Tags: {article.tags}</h4>
      </header>
      <p>
        {article.description}
      </p>
      <a href={`/blog/${article.id}`}>MORE</a>
    </div>
  {/each}
  {#if PostArticles.length === 0}
    <div>No Articles</div>
  {/if}
</div>

<script context="module">
  export async function load({ fetch, params }) {
    let article
      try {
          article = await fetch(`https://dev.to/api/articles/${params.slug}`);
          article = await article.json();
          console.log(article)
      } catch (e) {
          console.log(e)
      }
      return {
          props: {
            article
          }
      }
  }
</script>

<script>
  export let article
  const post = article
</script>


<svelte:head>
  <title>{article.title}</title>
</svelte:head>


<div>
  <div>
      <h1>{post.title}</h1>
      <section>
        {@html post.body_html}
      </section>
  </div>
</div>

export async function load({ fetch, params }) {
  const postReq = await fetch(
    `https://dev.to/api/articles/${params.slug}`
  );
  let article = await postReq.json();
  return {
    article
  };
}

<script>
  export let data
</script>


<svelte:head>
  <title>{data.title}</title>
</svelte:head>

<div>
  <div>
      <h1>{data.title}</h1>
      <section>
        {@html data.body_html}
      </section>
  </div>
</div>

yarn add @sveltejs/adapter-static

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    // prerenderを入れないとエラーになる
    prerender: {
      default: true
    },
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: null
    })
  }
}

export default config;