Svelte のバックアップ(No.12)

React, Vue との比較 †

Svelteに入門してみた（React/Vueとの違い）

最近でてきてるSvelteはReactと比べてどうなのか - YouTube

↑

処理速度 †

↑

特徴 †

仮装DOMを使用しない　
Svelte は Svelte ファイルを JavaScript にコンパイルし、 Svelte 自身のコードは含まれない。そのため、 React や Vue.js のように最初に読み込まれる際に発生するオーバーヘッドは発生しないうえ、ライブラリのコードが含まれない分、アプリケーションコードのサイズを小さくすることができる。

↑

入門 †

↑

プロジェクト生成 †

スターターアプリのテンプレートを作成

$ npx degit sveltejs/template [プロジェクト名]

Need to install the following packages:
  degit@2.8.4
Ok to proceed? (y) y

$ cd  [プロジェクト名]
$ node scripts/setupTypeScript.js
$ npm install
$ npm run dev

http://localhost:8080/ にアクセス

↑

SvelteKit †

↑

入門 †

$ npm init vite@latest
✔ Project name: … sveltekit-test
✔ Select a framework: › Svelte
✔ Select a variant: › SvelteKit ↗
Need to install the following packages:
  create-svelte@3.1.1
Ok to proceed? (y) y

create-svelte version 3.1.1

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  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!

✔ Typescript
  Inside Svelte components, use <script lang="ts">

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

✔ 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 sveltekit-test
  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

$ cd sveltekit-test
$ npm install
$ git init && git add -A && git commit -m "Initial commit"
$ npm run dev -- --open

↑