SvelteKitで汎用的なtemplateを作る

2 min read

リポジトリ

https://github.com/Gits-migii/svelte-static-template
※svelteKitのアップデートが続いているためconfigの書き方が追いつかない

要件は以下とします。

※よくありがちなウェブサイト要件を満たせるようなもの…

  • Dart-sassが使える
  • fetchが使える
  • アニメーションのライブラリが入ってる
  • Swiperが使える
  • コンポーネントがわかりやすい設計をされている
  • 適当なAPIから記事一覧と記事詳細をレンダリングできる一式が揃っている

アニメーションのライブラリが入ってる

これはすんなりクリアしました。使い慣れているanimejsを導入

yarn add animejs 

コードは一部抜粋でこんな感じ。
svelteにはonMountというライフサイクルがあるので、
それに合わせてanimejsが発火される、といったイメージです。vuemountedが一番近いと思っている。

<script>
  import successkid from "images/successkid.jpg";
  import { onMount } from "svelte";
  import anime from "animejs"

  onMount(()=> {
    anime({
      targets: '[data-animation="kids"]',
      scale: [1.4,1.0],
      opacity:1,
      easing: 'easeInOutExpo',
      duration: 3000
    });
   })
</script>

<figure>
  <img alt="Success Kid" src={successkid} width="400" height="266" data-animation="kids"/>
</figure>

DOM側にdata属性を指定してあげて、animejsのtargetsで拾ってきて、アニメーションが実行されるといった流れです。

Swiperが使える

これもすんなりクリアしました。

yarn add swiper 

https://swiperjs.com/svelte こちらにサンプルもあるのでとてもわかりやすい

Dart-Sassが使える

これもとても簡単でした、 node-sassのかわりにsassをインストールするだけ、楽ちんですね。

yarn add svelte-preprocess sass -D
// 一部抜粋
import sveltePreprocess from 'svelte-preprocess'

const preprocess = sveltePreprocess({
  scss: {
    includePaths: ['src'],
    renderSync:true,
  },
  postcss: true,
  renderSyncz:true
});

  client: {
    plugins: [
      svelte({
        preprocess,
      }),
   ]
  },
  server: {
    plugins: [
      svelte({
        preprocess,
      }),

svelte-preprocessをimport、preprocessという変数で定義してあげて、クライアント側、サーバー側両方に設定してあげる。
これだけでsassが使えるようになりました。

コンポーネントがわかりやすい設計をされている

todo

適当なAPIから記事一覧と記事詳細をレンダリングできる一式が揃っている

dev.toからsvelteタグの記事をとってきて表示、までを実装。

Discussion

ログインするとコメントできます