【Svelte + Typescript + SPA】Svelteでルーティングを試す

Svelteをセットアップする

Svelteにはセットアップ用のCLIはありません。
GitHubからテンプレートを直接ダウンロードします。

下記コマンドを使用すると、.gitフォルダ以外をレポジトリからダウンロードしてきてくれます。

npx degit sveltejs/template my-svelte-routing

もし、degitパッケージをインストールしていない場合は「インストールするか？」と尋ねられるので、yesと入力してインストールしておきましょう。

Typescriptを使用したい場合は、ダウンロードしてきたテンプレート内にあるscripts/setupTypeScript.jsを実行しておいてください。

cd my-svelte-routing
node scripts/setupTypeScript.js

ここまで準備ができたら、依存パッケージをインストールしましょう。

npm install

svelte-routingをセットアップする

svelte-spa-router のサンプルを多く見ますが、GitHubのスター数では svelte-routing の方が圧倒的に多いためこちらを採用しました。
ほかにも、svelte-spa-router はハッシュベース、svelte-routing は History API という違いもあります。

では、早速インストールします。

npm install svelte-routing

※ svelte-routingパッケージには、ビルトインでtypescriptの型定義ファイルが含まれています。

SvelteでSPAしてみる

src/App.svelteの内容を上書きしましょう。
svelte-routing は react-router のように宣言型のルーティングライブラリとなっています。

Routerコンポーネント内にRouteを書いていく形ですね。
LinkコンポーネントはSPA用の<a href="">のようなものです。

src/App.svelte

<script>
  import { Router, Link, Route } from "svelte-routing";
  import Home from "./pages/Home.svelte";
  import About from "./pages/About.svelte";
</script>

<Router>
  <nav>
    <Link to="">home</Link>
    <Link to="about">about</Link>
  </nav>
  <main>
    <Route path="" component={Home} />

    <!-- 子要素としてコンポーネントを渡す方法もある -->
    <Route path="about">
      <About />
    </Route>
  </main>
</Router>

ルーティングの設定を書いたので、次はHomeコンポーネントとAboutコンポーネントを作成しましょう。
src/pagesフォルダを作成して、その配下に作成していきます。

src/pages/Home.svelte

<h1>Home page.</h1>

src/pages/About.svelte

<h1>About page.</h1>

ここまでで、準備は完了です。
早速実行してみましょう。

下記コマンドで開発用サーバーを立ち上げて実行します。

npm run dev

http://localhost:5000/ にアクセスして下の画像のように表示されればOKです。
homeとaboutのリンクを押して、ルーティングが出来ていることを確認してみてください。

最後に

react-routerのように書けるsvelte-routingを紹介しました。
今回紹介したライブラリ以外にも、SapperというSvelte公式が出しているライブラリもあります。
こちらは、Next.jsやNuxt.jsに近いものになります。