Skip to main content

Frequently Asked Questions

Svelteは初めてです。どこから始めればいいですか?

最初に行う最善の方法は、対話型の チュートリアル を試すことです。各ステップは、主に1つの特定の側面に焦点を当てており、容易に実行できます。ブラウザで実際のSvelteコンポーネントを編集して実行します。

5～10分あれば、すぐに始められます。1時間半でチュートリアル全体を完了できます。

サポートはどこで受けられますか？

特定の構文に関する質問がある場合は、 APIページ が参考になると思います。

コードレベルの質問やエラーで詰まった際に利用されているStack Overflowという人気のフォーラムがあります。 Svelte とタグづけられた既存の質問を読んでみてください。または 自分で質問 してみください！

ベストプラクティスやアプリケーションアーキテクチャについて議論したり、他のSvelteユーザーと交流する場所としてオンラインやチャットの場があります。例えば 私達のDiscord または Redditのチャンネル などです。コードレベルの質問がある場合は、Stack Overflowの方が適切です。

日本語翻訳版 追記：上記のDiscordはSvelte本体のもので、英語でコミュニケーションが行われています。もし日本語で質問したり交流したいのであれば、Svelte日本のDiscordにどうぞ！

Svelte v2はまだ入手可能ですか？

新しい機能は追加されていませんし、バグはおそらく、非常に悪質な場合や、何らかのセキュリティ脆弱性がある場合にのみ修正されるでしょう。

ドキュメントはまだ こちら から入手できます。

ホットモジュールリロードをするにはどうすればよいですか？

SvelteKit の利用をお勧めします。SvelteKit は、すぐに利用可能な HMR をサポートし、Vite と svelte-hmr をもとに構築されています。rollup や webpack のためのコミュニティプラグインもあります。

.svelte ファイルを自動的にフォーマットするツールはありますか?

prettier-plugin-svelte プラグインで prettier を使用できます。

コンポーネントのドキュメントを作成する方法はありますか？

Svelte Language Serverを使用するエディターでは、特別にフォーマットされたコメントを使用して、コンポーネント、関数、およびエクスポートを文書化することができます。

<script>
	/** What should we call the user? */
	export let name = 'world';
</script>

<!--
@component
Here's some documentation for this component.
It will show up on hover.

- You can use markdown here.
- You can also use code blocks here.
- Usage:
  ```tsx
  <main name="Arethra">
  ```
-->
<main>
	<h1>
		Hello, {name}
	</h1>
</main>

Note:コンポーネントを記述するHTMLコメントには@componentが必要です。

TypeScriptのサポートはどうですか?

svelte-preprocess などのプリプロセッサをインストールする必要があります。svelte-check を使用すると、コマンドラインからタイプチェックを実行できます。

Svelteテンプレートでリアクティブ変数の型を宣言するには、次の構文を使用します。

let x: number;
$: x = count + 1;

タイプまたはインタフェースをインポートするには、TypeScriptのtype修飾子を使用します:

import type { SomeInterface } from './SomeFile';

svelte-preprocess はインポートが型であるか値であるかを認識しないため、 type 修飾子を使用する必要があります。 svelte-preprocess は他のファイルを認識することなく一度に1つのファイルのみをトランスパイルするため、この修飾子が存在しない型のみを含むインポートを安全に消去することはできません。

Svelteはスケールしますか?

いずれブログに書く予定ですが、それまではこちらのIssueをご確認ください。

UIコンポーネントライブラリはありますか？

単独のコンポーネントだけではなく、いくつかの UI コンポーネントライブラリがあります。Svelte Society Web サイトの components section で探してみてください。

Svelteアプリケーションをテストするにはどうすればよいですか？

How your application is structured and where logic is defined will determine the best way to ensure it is properly tested. It is important to note that not all logic belongs within a component - this includes concerns such as data transformation, cross-component state management, and logging, among others. Remember that the Svelte library has its own test suite, so you do not need to write tests to validate implementation details provided by Svelte.

A Svelte application will typically have three different types of tests: Unit, Component, and End-to-End (E2E).

Unit Tests: Focus on testing business logic in isolation. Often this is validating individual functions and edge cases. By minimizing the surface area of these tests they can be kept lean and fast, and by extracting as much logic as possible from your Svelte components more of your application can be covered using them. When creating a new SvelteKit project, you will be asked whether you would like to setup Vitest for unit testing. There are a number of other test runners that could be used as well.

Component Tests: Validating that a Svelte component mounts and interacts as expected throughout its lifecycle requires a tool that provides a Document Object Model (DOM). Components can be compiled (since Svelte is a compiler and not a normal library) and mounted to allow asserting against element structure, listeners, state, and all the other capabilities provided by a Svelte component. Tools for component testing range from an in-memory implementation like jsdom paired with a test runner like Vitest to solutions that leverage an actual browser to provide a visual testing capability such as Playwright or Cypress.

End-to-End Tests: To ensure your users are able to interact with your application it is necessary to test it as a whole in a manner as close to production as possible. This is done by writing end-to-end (E2E) tests which load and interact with a deployed version of your application in order to simulate how the user will interact with your application. When creating a new SvelteKit project, you will be asked whether you would like to setup Playwright for end-to-end testing. There are many other E2E test libraries available for use as well.

Some resources for getting started with testing:

ルーターはありますか？

公式のルーティングライブラリはSvelteKitです。SvelteKitは、ファイルシステムルーター、サーバーサイドレンダリング(SSR)、ホットモジュールリローディング(HMR)を1つの使いやすいパッケージで提供します。ReactにとってのNext.jsに相当するものです。

しかしながら、任意のルーターライブラリを使用することもできます。多くの人が page.js を使っています。navaid、というよく似たものもあります。universal-router は子ルートもアイソモーフィックに扱えますが、ヒストリーのサポートは組み込まれていません。

宣言型のHTMLによるアプローチを好むなら、 アイソモーフィックな svelte-routing というライブラリと、そのフォークでいくつかの機能が追加されている svelte-navigator があります。

クライアント側でハッシュ・ベースのルーティングが必要な場合は、svelte-spa-router、またはabstract-state-routerを確認してみてください。

Routify はSvelteKitのルーターによく似たファイルシステムベースのルーターです。Version 3はSvelteのネイティブなSSRをサポートしています。