Svelte
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Svelte:https://svelte.jp/]]
-[[Svelte入門:https://zenn.dev/k_sato/books/b868c1705b833...
-[[Svelteとは:https://zenn.dev/toshitoma/articles/what-is...
-[[Svelteでいきましょう！:https://tech.uzabase.com/entry/...
-[[SvelteでWebサイトを作ってみて感じた魅力:https://qiita....
-[[高速で開発者体験も抜群！JavaScriptフレームワークの新星...
-[[作りながら学ぶ「Svelte」の構造とモダンなフロントエンド...
-[[Histoireを使ってSvelteコンポーネントを管理しよう:https...
-[[Svelteに入門した:https://future-architect.github.io/ar...
-[[【Svelte.js入門】ReactやVueに挫折した人でも大丈夫！Sve...
-[[SvelteとIonicで始めるモバイルアプリケーション開発入門 ...
*React, Vue との比較 [#i0ea90d5]
-[[SvelteとReactの基本を比較:https://www.twilio.com/blog/...
-[[Reactヘビーユーザーが思うSvelteの良いところ:https://qi...
-[[Svelteの紹介とVue.jsとの比較:https://www.fourier.jp/te...
-[[どのWebフロントエンドフレームワークから始めるべきか？...
-[[Svelteに入門してみた（React/Vueとの違い）:https://www....
-[[最近でてきてるSvelteはReactと比べてどうなのか - YouTub...
**処理速度 [#i429809a]
-[[React大好き侍が、「もうSolidJSでいいじゃん...//」って...
-[[React、Vue、Svelte、Solid のレンダリング性能:https://c...
*特徴 [#r360b120]
-仮装DOMを使用しない
-Svelte は Svelte ファイルを JavaScript にコンパイルし、 ...
*入門 [#uc4d2c68]
-[[Svelte をはじめる:https://developer.mozilla.org/ja/doc...
-[[svelte + TypeScript のはじめ方:https://pgmemo.tokyo/da...
-[[Svelte+TypeScriptの環境構築とGitHub Pagesへのデプロイ:...
**プロジェクト生成 [#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/sve...
-[[【SvelteKit 入門】はじめに:https://zenn.dev/wnr/articl...
-[[SvelteKit ＋ TypeScript ＋ tailwindcssを使って半日でプ...
-[[SvelteKit 1.0 発表:https://svelte.jp/blog/announcing-s...
-[[Webアプリケーションフレームワーク「SvelteKit 1.0」正式...
-[[Svelte上にWebアプリケーションを構築するためのフレーム...
-[[SvelteKit + Svelte を1年間くらい使ってみた知見など:htt...
-[[SvelteKitが正式リリースされたのでtRPCとPrismaを使ってW...
-[[SvelteKitを本番投入してみて:https://speakerdeck.com/ku...
-[[SvelteKit を Cloudflare Workers で動かしてみた:https:/...
-[[Svelte Code Samples: SPA Security in Action:https://de...
-[[Authenticating Svelte Applications:https://auth0.com/b...
**入門 [#o26660ee]
-[[SvelteKit ＋ TypeScript ＋ tailwindcssを使って半日でプ...
-[[SvelteKit を使った静的サイトへのデプロイ:https://qiita...
$ 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 fo...
│
└ 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#opt...
✔ 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 co...
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/yusuk...
-[[Sveltekit で GraphQL:https://qiita.com/yusukeoshiro/it...
-[[Guide: Svelte / Kit:https://the-guild.dev/graphql/code...
*[[Svelte Native:https://svelte-native.technology/]] [#ta...
-[[Svelte Nativeを触ってみた:https://qiita.com/blancshio/...
-[[クロスプラットフォーム開発の新しい技術、SvelteNativeと...
*tRPC [#zd39c595]
-[[SvelteKitが正式リリースされたのでtRPCとPrismaを使ってW...
-[[Vite + Svelte + tRPC Template:https://madewithsvelte.c...
*ライブラリ [#z0944da8]
**バリデーション [#n3bf0a7f]
-[[Svelte フォームライブラリ選手権:https://qiita.com/kiyo...
***[[Felte:https://felte.dev/]] [#b4ea704f]
*AWS [#l872bcfe]
-[[SvelteKitのSSRをAWS上にデプロイ:https://qiita.com/doya...
-[[SvelteのフロントエンドをAWSのバックエンドと繋げてみる:...
-[[Deploy Svelte app on AWS Amplify:https://curiousmind.h...
*導入事例 [#peb2862d]
-[[仕事でSvelteフレームワークを扱ってみた話:https://techb...
-[[SvelteKitを本番投入してみて:https://speakerdeck.com/ku...
-[[PlaywrightによるSvelteコンポーネントテスト:https://s...
-[[Svelte×Ionicでモバイルアプリのプロジェクトを作成したみ...
終了行:
[[Svelte:https://svelte.jp/]]
-[[Svelte入門:https://zenn.dev/k_sato/books/b868c1705b833...
-[[Svelteとは:https://zenn.dev/toshitoma/articles/what-is...
-[[Svelteでいきましょう！:https://tech.uzabase.com/entry/...
-[[SvelteでWebサイトを作ってみて感じた魅力:https://qiita....
-[[高速で開発者体験も抜群！JavaScriptフレームワークの新星...
-[[作りながら学ぶ「Svelte」の構造とモダンなフロントエンド...
-[[Histoireを使ってSvelteコンポーネントを管理しよう:https...
-[[Svelteに入門した:https://future-architect.github.io/ar...
-[[【Svelte.js入門】ReactやVueに挫折した人でも大丈夫！Sve...
-[[SvelteとIonicで始めるモバイルアプリケーション開発入門 ...
*React, Vue との比較 [#i0ea90d5]
-[[SvelteとReactの基本を比較:https://www.twilio.com/blog/...
-[[Reactヘビーユーザーが思うSvelteの良いところ:https://qi...
-[[Svelteの紹介とVue.jsとの比較:https://www.fourier.jp/te...
-[[どのWebフロントエンドフレームワークから始めるべきか？...
-[[Svelteに入門してみた（React/Vueとの違い）:https://www....
-[[最近でてきてるSvelteはReactと比べてどうなのか - YouTub...
**処理速度 [#i429809a]
-[[React大好き侍が、「もうSolidJSでいいじゃん...//」って...
-[[React、Vue、Svelte、Solid のレンダリング性能:https://c...
*特徴 [#r360b120]
-仮装DOMを使用しない
-Svelte は Svelte ファイルを JavaScript にコンパイルし、 ...
*入門 [#uc4d2c68]
-[[Svelte をはじめる:https://developer.mozilla.org/ja/doc...
-[[svelte + TypeScript のはじめ方:https://pgmemo.tokyo/da...
-[[Svelte+TypeScriptの環境構築とGitHub Pagesへのデプロイ:...
**プロジェクト生成 [#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/sve...
-[[【SvelteKit 入門】はじめに:https://zenn.dev/wnr/articl...
-[[SvelteKit ＋ TypeScript ＋ tailwindcssを使って半日でプ...
-[[SvelteKit 1.0 発表:https://svelte.jp/blog/announcing-s...
-[[Webアプリケーションフレームワーク「SvelteKit 1.0」正式...
-[[Svelte上にWebアプリケーションを構築するためのフレーム...
-[[SvelteKit + Svelte を1年間くらい使ってみた知見など:htt...
-[[SvelteKitが正式リリースされたのでtRPCとPrismaを使ってW...
-[[SvelteKitを本番投入してみて:https://speakerdeck.com/ku...
-[[SvelteKit を Cloudflare Workers で動かしてみた:https:/...
-[[Svelte Code Samples: SPA Security in Action:https://de...
-[[Authenticating Svelte Applications:https://auth0.com/b...
**入門 [#o26660ee]
-[[SvelteKit ＋ TypeScript ＋ tailwindcssを使って半日でプ...
-[[SvelteKit を使った静的サイトへのデプロイ:https://qiita...
$ 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 fo...
│
└ 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#opt...
✔ 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 co...
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/yusuk...
-[[Sveltekit で GraphQL:https://qiita.com/yusukeoshiro/it...
-[[Guide: Svelte / Kit:https://the-guild.dev/graphql/code...
*[[Svelte Native:https://svelte-native.technology/]] [#ta...
-[[Svelte Nativeを触ってみた:https://qiita.com/blancshio/...
-[[クロスプラットフォーム開発の新しい技術、SvelteNativeと...
*tRPC [#zd39c595]
-[[SvelteKitが正式リリースされたのでtRPCとPrismaを使ってW...
-[[Vite + Svelte + tRPC Template:https://madewithsvelte.c...
*ライブラリ [#z0944da8]
**バリデーション [#n3bf0a7f]
-[[Svelte フォームライブラリ選手権:https://qiita.com/kiyo...
***[[Felte:https://felte.dev/]] [#b4ea704f]
*AWS [#l872bcfe]
-[[SvelteKitのSSRをAWS上にデプロイ:https://qiita.com/doya...
-[[SvelteのフロントエンドをAWSのバックエンドと繋げてみる:...
-[[Deploy Svelte app on AWS Amplify:https://curiousmind.h...
*導入事例 [#peb2862d]
-[[仕事でSvelteフレームワークを扱ってみた話:https://techb...
-[[SvelteKitを本番投入してみて:https://speakerdeck.com/ku...
-[[PlaywrightによるSvelteコンポーネントテスト:https://s...
-[[Svelte×Ionicでモバイルアプリのプロジェクトを作成したみ...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
