🌊

静的サイトジェネレーター(SSG)としてSvelteを使う

2022/09/15に公開

Svelte

tech

これはメモです。何度もアップデートしていく予定。余計な文章は書きません。

Svelteって？

ReactやVueより簡単なフロントエンドフレームワーク。簡単というのは語弊があり、HTMLやCSS、JavaScriptをプレーンなまま活かしてるので直感的で分かりやすい。

JavaScriptに興味を持つ世界中のIT技術者1万11761人にアンケートを取り、結果をまとめた「The State of JavaScript 2021」では2位にあり、イケてるフレームワークと思われてる。

少し触ってみた感想

ReactとVueを触ってるけどどちらかと言うとVueに似てる。Vueを使える人はすんなり行ける。というかまだまだライブラリが少ないので無理してVueからスイッチする必要はない。ただ分かりやすいのでReact、Vueわかんないよー、と諦めてた層が使えるようになりフロントエンド界が盛り上がるかも。

さっそくプロジェクトを作る

何をやるにもsvelte-kitを使うのが最初っぽい。

■ プロジェクト作成
npm create svelte@latest my-app
(色々質問されるがskeltonなんちゃらがstarter)
cd my-app
npm install
npm run dev

■ SASS対応
$ npm i sass
src に styles.scssとscssフォルダを入れる

📕 +page.stelve
<script>
	import {link, push} from 'svelte-spa-router'
	import '../styles.scss'; // 追加
</script>

■ tailwindcss対応
https://tailwindcss.com/docs/guides/sveltekit

❌ vscodeでtailwindcss.config.csjを編集するとコードフォーマッタが悪さしてエラーになる。
　テキストエディットなど使う。


■初期のページ

📕 src/routes/+layout.svelte
<script>
import Header from '$lib/Header.svelte';
import Footer from '$lib/Footer.svelte';
import '../styles.scss';
</script>

<Header />

<main>
	<slot />
</main>

<Footer />

<style lang="scss"></style>


📕 src/lib/Header.svelte,📕 src/lib/Footer.svelte
<script></script>
<style lang="scss"></style>

📕 src/routes/+page.svelte
<script></script>

<div></div>

<style lang="scss">
@import '../scss/variables';
@import '../scss/commons/functions';
@import '../scss/commons/mixins';
</style>

SSG(静的サイト)対応する場合

■ SSG(静的サイト)対応
// https://github.com/sveltejs/kit/tree/master/packages/adapter-static

npm i @sveltejs/adapter-static

📕 svelte.config.js

// import adapter from '@sveltejs/adapter-auto'; // コメントアウト
import adapter from '@sveltejs/adapter-static'; // 追加

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    // adapter: adapter() // コメントアウト
    trailingSlash: 'always', // 追加。後ほど解説
    adapter: adapter({ // 追加
      // default options are shown. On some platforms
      // these options are set automatically — see below
      pages: 'build',
      assets: 'build',
      fallback: null,
      precompress: false,
    }),
  },
};

export default config;

// 書き出し
npm run build
buildフォルダにhtml等が書き出される

なお、vercelや他のビルドシステムが備わってるサイト使えばこの作業はいらないらしい

trailingSlash: 'always'について

URL末尾が
'never' — redirect /x/ to /x
'always' — redirect /x to /x/
'ignore' — don't automatically add or remove trailing slashes. /x and /x/ will be treated equivalently
という設定。

/pathだと/path/path.htmlが有効。 /path/だと/path/index.htmlが有効になる。
特に問題ない限り/path/index.htmlを使用する。(index.htmlが書き出されるので)

基本的な機能

工事中

Svelteって？

少し触ってみた感想

さっそくプロジェクトを作る

[公式]Svelte • サイバネティクスで強化されたWebアプリ

[サンプル]Hello world • Svelte Examples

[フレームワーク]SvelteKit • Svelteアプリを最速で構築する方法

SSG(静的サイト)対応する場合

trailingSlash: 'always'について

基本的な機能

Discussion