SvelteKit の雰囲気見る

[Nao000]

インストール時のコマンドとか選択とか

PS D:\project\web\docker-ubuntu20.04\ubuntu> npm create svelte@latest mysveltekit
Need to install the following packages:
  create-svelte@4.2.0
Ok to proceed? (y) y

create-svelte version 4.2.0

┌  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-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 mysveltekit
  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
npm notice
npm notice New major version of npm available! 8.19.2 -> 9.6.7
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.7
npm notice Run npm install -g npm@9.6.7 to update!
npm notice
PS D:\project\web\docker-ubuntu20.04\ubuntu>

[Nao000]

SvelteKit のチュートリアルあった https://learn.svelte.jp/tutorial/introducing-sveltekit

[Nao000]

要素は、ページコンテンツがレンダリングされる場所です。 https://learn.svelte.jp/tutorial/layouts

[Nao000]

少なくとも1つの静的な文字で区切られていれば、1つの URL セグメント内に複数のルートパラメータを使用することができます。foo/[bar]x[baz] は有効なルートで、[bar] と [baz] は動的なパラメータです。

https://learn.svelte.jp/tutorial/params

[Nao000]

Nested.svelte には <p> 要素がありますが、App.svelte のスタイルが適用されていないことに注目してください。

https://learn.svelte.jp/tutorial/nested-components

[Nao000]

大まかなまとめ: 更新される変数の名前は、代入の左側に置かなければならない。

https://learn.svelte.jp/tutorial/updating-arrays-and-objects

[Nao000]

次 https://learn.svelte.jp/tutorial/await-blocks

[Nao000]

<div on:pointermove={(e) => {
    m = {x: e.clientX, y: e.clientY}
}}>

上記のコードに対して、

一部のフレームワークでは、パフォーマンス上の理由から、特にループ処理内で、イベントハンドラをインラインで宣言しないように推奨されています。しかし、この推奨事項はSvelteには当てはまりません。あなたがどのように書いたとしても、常に適切にコンパイルします。

https://learn.svelte.jp/tutorial/inline-handlers

[Nao000]

https://learn.svelte.jp/tutorial/component-events

自分が event 自体をよくわかってない

[Nao000]

https://learn.svelte.jp/tutorial/onmount

requestAnimationFrame() という canvas API の存在を知った

Window.requestAnimationFrame() https://developer.mozilla.org/ja/docs/Web/API/window/requestAnimationFrame

[Nao000]

https://learn.svelte.jp/tutorial/tick

テキスト選択してタブを押すと大文字になるが、選択解除されてカーソルも最後に移動してしまう ↓↓ tick() を使うと 選択解除されずカーソルもそのまま

[Nao000]

次ここ https://learn.svelte.jp/tutorial/springs

[Nao000]

Part 2: Advanced Svelteは全体的に見た目がリッチなUIの説明っぽくて、 あまり共感できないのでスルーする

正解を見て、良さそうなアニメーションUIがあれば使う方針にする

[Nao000]

雰囲気は知れた気がするのでクローズ