SvelteKit + microCMS でブログサイト作ってみた話

Posted on 2023/12/08

# Technology

個人的アウトプットのために自分のブログサイトが欲しくエンジニアとして折角なので自分で作ってみた。

技術選定

SvelteKit
microCMS

フロントエンドは以前から SvelteKitが気になってたので練習がてらに選定。
バックエンドはフリーの範囲でまた管理画面を作ったりするのがめんどくさかったので microCMSを採用。

SvelteKitについて

Svelteが個人的には理解しやすい。
SvelteKitもNextやNuxtを触ったことあれば似たような File System なのでハードルは低く学びやすいと思う。

Svelte 公式: https://svelte.dev/
SvelteKit 公式: https://kit.svelte.dev/

Svelte fileの中に Script, HTML, Style が記入できる

個人的に Svelte は 1つのファイルにロジック、HTML, Style を記入できるので、コンポネントでのスコープ管理が凄く楽に感じた。
特に style は global関数を使用しない限り、そのファイル内にスコープが閉じられる (正確には <header class="s-c1MG4BWNDc59">というようなIDがふられる) ので他のファイルのスタイルやCSSを気にしないでスタイルかけるのが良い。

<script lang="ts">
  export let title: string;
</script>

<header>
  {title}
</header>

<style>
　/* scope は Header.svelte に絞られるのでグローバルに反映されない */
  header {
    background: #CCCCCC;
  }
</style>

Domの中で "{prop}"でアクセスできる

地味に嬉しかったのが <div class="{propName}"> で props を参照できることだ。
Reactだと <div class={`${propName}`}> のように ${} で囲う必要があり地味にめんどくさかった。

storeが使いやすい

GlobalなContextは svelte/store があり、別のコンポネントとかからも共有して使用でき、記述も Reduxとか Recoilなどよりも簡単で使いやすい。

import { writable } from 'svelte/store';

const count = writable(0);

count.subscribe((value) => {
	console.log(value);
}); // logs '0'
count.set(1); // logs '1'
count.update((n) => n + 1); // logs '2'

const setCount = (value: number) => count.set(1);

// subscribeや関数をexportして使いまわすのが良さそう
export {
  count: count.subscribe,
  setCount
}