Svelte を触ってみた

  • 投稿日
  • 更新日
  • 著者 アルム＝バンド
  • カテゴリー JavaScirpt

経緯

1ページで十数行程度の JavaScript を動作させるページをサクッと作りたいと考えました。

しかし、 Next.js 等ではオーバースペック過ぎますし、時間もかけたくなかったので「そういえば」と思い出して Svelte を触ってみることにしました。

理由としては以下の2点で判断しました。

  • 習熟が容易であると言われていること
  • ビルド時にプレーンな JavaScript へ変換してくれるとのこと
    • オーバーヘッドになりそうな余計なコードがなるべく入らないで済むのではないか

手順

基本的に公式のドキュメントの手順でインストールします。

> npm i -D svelte@latest

グローバルインストールはしたくないので、プロジェクトのルートディレクトリでローカルインストールします (公式ドキュメントが npm だったので、一応 yarn ではなくあえて npm で実施)。

> npm create svelte smart-halcyon       
Need to install the following packages:
create-svelte@6.0.10
Ok to proceed? (y) y

create-svelte version 6.0.10

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using JavaScript with JSDoc comments
│
◇  Select additional options (use arrow keys/space bar)
│  Add ESLint for code linting, Add Prettier for code formatting
│
└  Your project is ready!

✔ Type-checked JavaScript
  https://www.typescriptlang.org/tsconfig#checkJs

✔ ESLint
  
https://github.com/sveltejs/eslint-plugin-svelte


✔ Prettier
  
https://prettier.io/docs/en/options.html

  
https://github.com/sveltejs/prettier-plugin-svelte#options


Install community-maintained integrations:
  
https://github.com/svelte-add/svelte-add


Next steps:
  1: cd smart-halcyon
  2: npm install
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat

npm create svelte {アプリ名} でプロジェクトを生成。

その後、対話式 CLI でいくつかの質問に答えて生成されるところもイマドキのフレームワークの流れですよね。

プロジェクトのディレクトリに移動後、手動でもう一度 npm i -D が必要だったり、 git init したり、というところはやや簡素である印象を受けます。

> cd smart-halcyon
> git init
> npm i -D

指示通りに実行して環境を整えます。

> npm run dev -- --open

> smart-halcyon@0.0.1 dev
> vite dev --open

Forced re-optimization of dependencies

  VITE v5.2.7  ready in 2726 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

開発時のプレビューはポート番号 5173 で開くようです。

これで最低限の環境は整いました。

> npm install @sveltestrap/sveltestrap
> npm i -D @sveltejs/adapter-static

今回は手間を省きたかったのでデザインはお馴染みの Bootstrap の Svelte 版ということで sveltestrap を入れたり、最終的に静的サイトとして生成したいので @sveltejs/adapter-static を追加で入れたりしました。

svelte.config.js

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter({
            pages: 'build',
            assets: 'build',
            fallback: 'index.html',
            precompress: false,
            strict: true
        }),
        paths: {
            base: '/test-myapp-smart-halcyon'
        },
    }
};

export default config;

静的サイト生成用、かつサブディレクトリへのデプロイ用に svelte.config.js を編集します。

> npm run build        

> smart-halcyon@0.0.1 build
> vite build

## 略

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-auto
  Could not detect a supported production environment. See https://kit.svelte.dev/docs/adapters to learn how to configure your app to run on the platform of your choosing
  ✔ done

ビルドもできて、ひとまず最低限やりたいことはできたので本当に序盤の部分だけですが触ることはできたのかな、と思います。

参考

Svelte

sveltestrap

static site

サブディレクトリへのデプロイ

metaタグ

イベント

純粋な HTMLタグ ではなく、cssフレームワーク等で提供されるコンポーネントにイベント修飾子は once しか使えないとのこと。

今回は preventDefault したかったのですが、 sveltestrap の Button コンポーネントに対して、を想定したため利用できず、

Event modifiers other than ‘once’ can only be used on DOM elements

と怒られてしまいました。

結局今回はページ遷移がない(のに submit でページトップへ移動する挙動を抑制したかった)ので、そもそもとして type="submit" ではなく type="button" にして回避することで解決しました。

eventDispatcher

上述の件に付随して eventDispatcher 周りを少し参照するなど。最終的に不採用でしたが。

Bootstrap Svelte

この記事を書いた人

アルム＝バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

記事一覧