Tech Blog

Svelte を試してみる

Cover Image for Svelte を試してみる

Svelte 5 Runes が発表されたので、現行の開発環境を構築してみる

今回の環境

TL;DR

1. プロジェクトの作成

npm create svelte@latest myapp

create-svelte version 5.1.0

┌  Welcome to SvelteKit!

(out)◇  Which Svelte app template?
│  ● SvelteKit demo app (A demo app showcasing some of the
│    features of SvelteKit - play a
word guessing game that works without JavaScript!)
│  ○ Skeleton project
│  ○ Library project

◇  Add type checking with TypeScript?
│  ● Yes, using JavaScript with JSDoc comments
│  ○ Yes, using TypeScript syntax
│  ○ No

◆  Select additional options (use arrow keys/space bar)
│  ◼ Add ESLint for code linting
│  ◼ Add Prettier for code formatting
│  ◼ Add Playwright for browser testing
│  ◼ Add Vitest for unit testing

└  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

✔ Playwright
  https://playwright.dev

✔ Vitest
  https://vitest.dev

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

Next steps:
  1: cd myapp
  2: npm install (or pnpm install, etc)
  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

2.Svelte のインストール

npm install

added 114 packages, and audited 115 packages in 23s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabi

3.Svelte の起動

npm run dev -- --open

> myapp@0.0.1 dev
> vite dev --open

Forced re-optimization of dependencies

  VITE v4.4.9  ready in 264 ms

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

4.ブラウザで確認

Home

参考にしたページ