Frequently asked questions

Edit this page on GitHub

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

始めるにあたって、ベストな方法はインタラクティブなチュートリアル を一通りやってみることです。個々のステップでは1つの特定の側面にフォーカスしており、学習しやすくなっています。ブラウザで本物の Svelte コンポーネントを編集して実行することができます。

5分から10分あれば、すぐに始められます。1時間半でチュートリアル全体をこなせるでしょう。

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

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

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

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

サードパーティのリソースはありますか？permalink

Svelte Society が 本やビデオのリスト を管理しています。

VS Code で .svelte ファイルにシンタックスハイライトをあてるにはどうすればよいですか?permalink

公式の VS Code extension for Svelte があります。

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

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

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

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 が必要です。

Svelte はスケールしますか？permalink

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

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

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

Svelte アプリをテストするにはどうすればよいですか？permalink

アプリケーションの構造がどうなっているか、ロジックがどこに定義されているかによって、適切にテストするための最適な方法が決まります。データ変換、コンポーネント間の状態管理、ロギングなど、すべてのロジックがコンポーネント内にあるわけではないことに注意することが重要です。Svelte ライブラリは独自のテストスイートを持っているので、Svelte が提供する実装の詳細を検証するためにテストを書く必要はないことを忘れないでください。

Svelte アプリケーションには、通常3種類のテストがあります： ユニット(Unit)、コンポーネント(Component)、End-to-End(E2E) です。

ユニットテスト(Unit Tests)： ビジネスロジックを単独でテストすることに重点を置いています。多くの場合、これは個々の機能やエッジケースを検証するものです。また、Svelte コンポーネントから可能な限り多くのロジックを抽出することで、よりアプリケーションの多くの部分をこれらのテストでカバーすることができます。新しい SvelteKit プロジェクトを作成する際、ユニットテストのために Vitest をセットアップするかどうか尋ねられます。その他にも、使用可能なテストランナーが多数あります。

コンポーネントテスト(Component Tests): Svelteコンポーネントがマウントされ、そのライフサイクルを通じて期待通りに動作することを検証するには、ドキュメントオブジェクトモデル（DOM）を提供するツールが必要です。コンポーネントはコンパイルされ (Svelteはコンパイラであり、通常のライブラリではないため)、マウントし、要素の構造、リスナー、ステート、および Svelte コンポーネントが提供する他のすべての機能に対してアサートすることができます。コンポーネントテストのためのツールは、jsdom のようなインメモリ実装と Vitest のようなテストランナーの組み合わせから、Playwright、Cypress など、実際のブラウザを活用して視覚的なテスト機能を提供するソリューションまで、さまざまです。

End-to-End Tests: ユーザーがアプリケーションを操作できることを確認するために、可能な限り本番に近い方法で全体としてテストすることが必要です。これは、ユーザーがアプリケーションをどのように操作するかをシミュレートするために、アプリケーションのデプロイされたバージョンをロードして操作する End-to-End (E2E) テストを書くことによって行われます。新しい SvelteKit プロジェクトを作成する際、End-to-End テスト用に Playwright をセットアップするかどうか尋ねられます。他にも多くの E2E テストライブラリがありますので、ご利用ください。

テストを始めるためのリソースをいくつか紹介します：

• Svelte Testing Library
• Svelte Component Testing in Cypress
• Example using vitest
• Example using uvu test runner with JSDOM
• Test Svelte components using Vitest & Playwright
• Component testing with WebdriverIO

ルーターはありますか？permalink

公式のルーティングライブラリは 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 をサポートしています。

コミュニティがメンテナンスしているルーターのリストが sveltesociety.dev にありますので、ご覧ください。

未使用のスタイルを削除しないようにすることはできますか？permalink

いいえ。Svelte はコンポーネントから未使用のスタイルを削除しますし、未使用のスタイルがある場合は警告します。こうしないと発生してしまう問題を防ぐためです。

Svelte のコンポーネントスタイルのスコープは、そのコンポーネントに固有の class を生成し、それを Svelte の制御化にあるコンポーネント内の関連する要素に追加し、コンポーネントのスタイルにある各セレクタにもそれを追加することで機能しています。コンパイラが、スタイルセレクタがどの要素に適用されるかわからない場合に、そのスタイルを保持しておくと、2つの問題を引き起こす可能性があります:

• そういったセレクタを保持したままスコープ用の class を追加した場合、当然そのセレクタはコンポーネント内の要素にマッチしない可能性が高く、もちろん子コンポーネントや {@html ...} で生成された要素にもマッチしません。
• もしスコープ用の class を追加せずにそういったセレクタを保持した場合、そのスタイルはグローバルスタイルとなり、ページ全体に影響します。

Svelte がコンパイル時に特定できないスタイルを指定する必要がある場合は、:global(...) を使用して明示的にグローバルスタイルを選択する必要があります。しかし、セレクタの一部だけを :global(...) で囲むことができることを覚えておいてください。.foo :global(.bar) { ... } は、コンポーネントの .foo 要素の中に存在する .bar 要素にスタイルをあてます。コンポーネントに親要素がある限りにおいて、このように部分的にグローバルセレクタを使用することで、ほとんどの場合、ご希望のスタイルを実現することができます。

Svelte v2 はまだ使えますか？permalink

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

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

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

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