Frequently Asked Questions

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

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

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

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

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

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

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

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

  ビデオのコースはありますか?

Svelteの作者であるRich Harris氏は、次のコースを教えています:

サードパーティのコースも多数あります:

最後に、Svelteについて教えているYouTubeチャンネルとプレイリストもあります:

日本語翻訳 追記 : 現時点では、これらのリソースはすべて英語で提供されています。

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

Svelteの公式VS Code拡張があります。

  .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アプリケーションをテストするにはどうすればよいですか?

ビューロジックとビジネスロジックを分離することをお勧めします。データ変換またはコンポーネント間の状態管理は、Svelteコンポーネントの外部に保管するのが最適です。このようにしてJavaScriptの機能をテストするのと同じように、これらの部分をテストすることができます。コンポーネントをテストする際には、コンポーネントのロジックはテストをして、Svelteが提供する実装の詳細はテストする必要はないことを覚えておくのがベストです(Svelteライブラリにはそれ自身のテストがあるため)。

テストを行うときにはいくつかの方法がありますが、一般的にはコンポーネントをコンパイルして何かにマウントし、テストを実行します。基本的には、テストするコンポーネントごとにバンドルを作成し(なぜなら、svelteはコンパイラであり、通常のライブラリではないからです)、それらをマウントする必要があります。JSDOMインスタンスにマウントできます。また、Playwright、Puppeteer、Cypressなどのライブラリを使用して本物のブラウザを使うこともできます。

単体テストを始めるためのリソース:

  ルーターはありますか?

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

  Svelte v2で作成したコンポーネントを更新するにはどうすればよいですか?

svelte-upgradeは v2→v3 ではまだ完全には動作しません、しかし、もう間もなくです

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

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

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

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

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