Svelte の変更点

追加された行はこの色です。
削除された行はこの色です。
Svelte へ行く。
Svelte の差分を削除
#author("2023-03-15T02:25:33+00:00","default:admin","admin")
#author("2023-03-29T04:23:09+00:00","default:admin","admin")
[[Svelte:https://svelte.jp/]]

-[[Svelte入門:https://zenn.dev/k_sato/books/b868c1705b8337]]

-[[Svelteとは:https://zenn.dev/toshitoma/articles/what-is-svelte]]
-[[Svelteでいきましょう！:https://tech.uzabase.com/entry/2021/05/11/133632]]
-[[SvelteでWebサイトを作ってみて感じた魅力:https://qiita.com/nishinoshake/items/46a64591c6411af68af1]]
-[[高速で開発者体験も抜群！JavaScriptフレームワークの新星「Svelte」とは何か？:https://codezine.jp/article/detail/15394]]
-[[作りながら学ぶ「Svelte」の構造とモダンなフロントエンド開発の考え方:https://codezine.jp/article/detail/15572]]
-[[Histoireを使ってSvelteコンポーネントを管理しよう:https://speakerdeck.com/oekazuma/histoirewoshi-tutesveltekonponentowoguan-li-siyou]]
-[[Svelteに入門した:https://future-architect.github.io/articles/20210622a/]]

-[[【Svelte.js入門】ReactやVueに挫折した人でも大丈夫！Svelteとfirebaseでシンプルアプリ開発:https://www.udemy.com/course/sveltebasic/]]
-[[SvelteとIonicで始めるモバイルアプリケーション開発入門 Part2. アプリケーション開発編（レイアウト）:https://medium.com/nextbeat-engineering/svelte%E3%81%A8ionic%E3%81%A7%E5%A7%8B%E3%82%81%E3%82%8B%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E5%85%A5%E9%96%80-part2-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E7%B7%A8-%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88-505ffc247ffe]]

*React, Vue との比較 [#i0ea90d5]
-[[SvelteとReactの基本を比較:https://www.twilio.com/blog/react-svelte-comparing-basics-jp]]
-[[Reactヘビーユーザーが思うSvelteの良いところ:https://qiita.com/tonio0720/items/88e62e6beffa9adc1a7f]]
-[[Svelteの紹介とVue.jsとの比較:https://www.fourier.jp/techblog/articles/comparison-svelte-vuejs/]]
-[[どのWebフロントエンドフレームワークから始めるべきか？（考察編）:https://qiita.com/yasusun/items/a7a0f36e0b0df60d6308]]

-[[Svelteに入門してみた（React/Vueとの違い）:https://www.ey-office.com/blog_archive/2021/02/24/difference-from-react-that-i-tried-to-get-started-with-svelte/]]

-[[最近でてきてるSvelteはReactと比べてどうなのか - YouTube:https://www.youtube.com/watch?v=_Dq8hNVpfvo]]

**処理速度 [#i429809a]
-[[React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。:https://qiita.com/shadowTanaka/items/b6d00863a8d6bff37de6]]
-[[React、Vue、Svelte、Solid のレンダリング性能:https://cypher256.hatenablog.com/entry/2022/10/18/212109]]

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

*入門 [#uc4d2c68]
-[[Svelte をはじめる:https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started]]
-[[svelte + TypeScript のはじめ方:https://pgmemo.tokyo/data/archives/2193.html]]
-[[Svelte+TypeScriptの環境構築とGitHub Pagesへのデプロイ:https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started]]

**プロジェクト生成 [#u2b49b2f]
-スターターアプリのテンプレートを作成
 $ 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:https://kit.svelte.jp/]] [#jd45abeb]
-[[SvelteKitの記事一覧 - Zenn:https://zenn.dev/topics/sveltekit]]
-[[【SvelteKit 入門】はじめに:https://zenn.dev/wnr/articles/50cnoe5xvzmw]]
-[[SvelteKit ＋ TypeScript ＋ tailwindcssを使って半日でプロトタイプを作る:https://qiita.com/ryotaro76/items/38875593509e69c60d69]]

-[[SvelteKit 1.0 発表:https://svelte.jp/blog/announcing-sveltekit-1.0]]
-[[Webアプリケーションフレームワーク「SvelteKit 1.0」正式リリース。SSR/SSG/SPAなど対応:https://www.publickey1.jp/blog/22/websveltekit_10ssrssgspa.html]]
-[[Svelte上にWebアプリケーションを構築するためのフレームワーク「SvelteKit 1.0」がリリース:https://codezine.jp/article/detail/17044]]

-[[SvelteKit + Svelte を1年間くらい使ってみた知見など:https://blog.kinto-technologies.com/posts/2022_09_06_svelte_newpost/]]
-[[SvelteKitが正式リリースされたのでtRPCとPrismaを使ってWebアプリを開発してみた:https://zenn.dev/kosei28/articles/d965f221a656fd]]
-[[SvelteKitを本番投入してみて:https://speakerdeck.com/kubotak/sveltekitwoben-fan-tou-ru-sitemite]]
-[[SvelteKit を Cloudflare Workers で動かしてみた:https://dev.classmethod.jp/articles/sveltekit-cloudflare-workers/]]

-[[Svelte Code Samples: SPA Security in Action:https://developer.auth0.com/resources/code-samples/spa/svelte]]
-[[Authenticating Svelte Applications:https://auth0.com/blog/authenticating-svelte-apps/]]

**入門 [#o26660ee]
-[[SvelteKit ＋ TypeScript ＋ tailwindcssを使って半日でプロトタイプを作る:https://qiita.com/ryotaro76/items/38875593509e69c60d69]]
-[[SvelteKit を使った静的サイトへのデプロイ:https://qiita.com/ryotaro76/items/15c8f56b30eca0cd0ba0]]

 $ 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

**GraphQL [#ydf64f64]
-[[SvelteKit 環境で GraphQLを使う:https://qiita.com/yusukeoshiro/items/5c179d20512b8b879a67]]
-[[Sveltekit で GraphQL:https://qiita.com/yusukeoshiro/items/5c179d20512b8b879a67]]
-[[Guide: Svelte / Kit:https://the-guild.dev/graphql/codegen/docs/guides/svelte]]

*[[Svelte Native:https://svelte-native.technology/]] [#tade5dc2]
-[[Svelte Nativeを触ってみた:https://qiita.com/blancshio/items/f8bd7a43fd7d3e5fc712]]
-[[クロスプラットフォーム開発の新しい技術、SvelteNativeというのがあるらしい。:https://off.tokyo/blog/about-sveltenative/]]

*tRPC [#zd39c595]
-[[SvelteKitが正式リリースされたのでtRPCとPrismaを使ってWebアプリを開発してみた:https://zenn.dev/kosei28/articles/d965f221a656fd]]
-[[Vite + Svelte + tRPC Template:https://madewithsvelte.com/vite-svelte-trpc-template]]

*ライブラリ [#z0944da8]
**バリデーション [#n3bf0a7f]
-[[Svelte フォームライブラリ選手権:https://qiita.com/kiyoshiro/items/c42dbd8c4679651a98fe]] ... Felte が優勝

***[[Felte:https://felte.dev/]] [#b4ea704f]

*AWS [#l872bcfe]
-[[SvelteKitのSSRをAWS上にデプロイ:https://qiita.com/doyaseizin/items/87a9d3e2f156662083bc]]
-[[SvelteのフロントエンドをAWSのバックエンドと繋げてみる:https://zenn.dev/masaino/articles/a3b0eb46fd54f0]]
-[[Deploy Svelte app on AWS Amplify:https://curiousmind.hashnode.dev/deploy-svelte-app-on-aws-amplify]]

*導入事例 [#peb2862d]
-[[仕事でSvelteフレームワークを扱ってみた話:https://techblog.kayac.com/using-the-svelte-framework-at-work]]
-[[SvelteKitを本番投入してみて:https://speakerdeck.com/kubotak/sveltekitwoben-fan-tou-ru-sitemite]]
-[[PlaywrightによるSvelteコンポーネントテスト:https://speakerdeck.com/kubotak/playwrightniyorusveltekonhonentotesuto]]
-[[Svelte×Ionicでモバイルアプリのプロジェクトを作成したみた:https://medium.com/nextbeat-engineering/svelte-ionic%E3%81%A7%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%81%BF%E3%81%9F-c768120b7bf3]]