Svelte入門：リファレンス CLI -mdsvex-

今日は、SvelteKitのリファレンスについて解説して います。

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

CLIツール（sv）

コマンドラインインターフェース（CLI）であるsvは、Svelteアプリケーションの作成と保守のためのツールキットです。

ELMDSvexとは

MDSvexは、Svelteコンポーネント用のマークダウンプリプロセッサです。基本的にはSvelteのためのMDXと言えます。マークダウン内でSvelteコンポーネントを使用したり、Svelteコンポーネント内でマークダウンを使用したりすることができます。

使用方法

npx sv add mdsvex

導入するもの

• MDSvexのインストールとsvelte.config.jsでの設定

解説

MDSvexを追加すると、以下のような機能が利用可能になります：

1. .svxまたは.svelte.md拡張子を持つファイルを作成し、その中でマークダウンとSvelteコンポーネントを混在させることができます
2. 通常のSvelteファイル内でマークダウン記法を使用できます
3. マークダウンファイル内でSvelteコンポーネントをインポートして使用できます

MDSvexを導入することで、ブログ記事やドキュメントなどのコンテンツ主体のページを、Svelteの強力な機能と組み合わせながら簡単に作成できるようになります。

GitHub上でこのページを編集することもできます。

使用例

基本的なセットアップ

# プロジェクトディレクトリ内で実行
cd my-sveltekit-project
npx sv add mdsvex

このコマンドを実行すると、MDSvexがインストールされ、svelte.config.jsに必要な設定が追加されます。

例1: 基本的なマークダウンファイル (blog-post.svx)

---
title: Svelteを使った開発の始め方
date: '2025-05-01'
---

<script>
  import Counter from '$lib/components/Counter.svelte';
</script>

# {title}

これはSvelteとマークダウンを組み合わせたブログ記事です。

## インタラクティブなカウンター

以下はSvelteコンポーネントをマークダウン内に埋め込んだ例です：

<Counter initial={5} />

## コードのシンタックスハイライト

```js
// MDSvexは自動的にコードブロックにシンタックスハイライトを適用します
function hello() {
  console.log('Hello, MDSvex!');
}

例2: レイアウトとフロントマター

### 例2: レイアウトとフロントマター

```js
// mdsvex.config.js
import { defineMDSveXConfig as defineConfig } from 'mdsvex';

const config = defineConfig({
  extensions: ['.svx', '.md'],
  layout: {
    blog: './src/lib/layouts/BlogLayout.svelte',
    _: './src/lib/layouts/DefaultLayout.svelte'
  },
  smartypants: {
    dashes: 'oldschool'
  },
  remarkPlugins: [],
  rehypePlugins: []
});

export default config;

<!-- src/lib/layouts/BlogLayout.svelte -->
<script>
  export let title;
  export let date;
</script>

<article>
  <header>
    <h1>{title}</h1>
    <time datetime={date}>{new Date(date).toLocaleDateString('ja-JP')}</time>
  </header>
  
  <div class="content">
    <slot />
  </div>
  
  <footer>
    <p>この記事が気に入りましたか？他の記事もチェックしてみてください。</p>
  </footer>
</article>

例3: ブログページでの使用

<!-- src/routes/blog/+page.svelte -->
<script>
  export let data;
</script>

<h1>ブログ記事一覧</h1>

<ul>
  {#each data.posts as post}
    <li>
      <a href="/blog/{post.slug}">
        {post.title} - {new Date(post.date).toLocaleDateString('ja-JP')}
      </a>
    </li>
  {/each}
</ul>

// src/routes/blog/+page.server.js
export async function load() {
  const modules = import.meta.glob('../blog/*.svx');
  
  const posts = await Promise.all(
    Object.entries(modules).map(async ([path, resolver]) => {
      const resolved = await resolver();
      const slug = path.split('/').pop().replace('.svx', '');
      
      return {
        slug,
        title: resolved.metadata.title,
        date: resolved.metadata.date
      };
    })
  );
  
  return {
    posts: posts.sort((a, b) => new Date(b.date) - new Date(a.date))
  };
}

例4: Svelteコンポーネント内でのマークダウン使用

<!-- src/lib/components/MarkdownContent.svelte -->
<script>
  import { marked } from 'marked';
  export let content = '';
  
  $: html = marked(content);
</script>

<div class="markdown-content">
  {@html html}
</div>

プラグインの活用例

// mdsvex.config.js
import { defineMDSveXConfig as defineConfig } from 'mdsvex';
import remarkGithub from 'remark-github';
import remarkToc from 'remark-toc';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';

const config = defineConfig({
  extensions: ['.svx', '.md'],
  remarkPlugins: [
    [remarkGithub, { repository: 'https://github.com/user/repo' }],
    [remarkToc, { tight: true }]
  ],
  rehypePlugins: [
    rehypeSlug,
    [rehypeAutolinkHeadings, { behavior: 'wrap' }]
  ]
});

export default config;

MDSvexを使うことで、技術ブログ、ドキュメントサイト、マーケティングページなど、コンテンツ重視のウェブサイトを、Svelteのリアクティブ機能と組み合わせて簡単に作成できます。コンテンツ作成者はマークダウンの簡潔な構文でコンテンツを書きながら、必要に応じてインタラクティブなSvelteコンポーネントを埋め込むことができるため、非常に柔軟性の高い開発体験が得られます。

おわりに 

今日は、 SvelteKitのリファレンスについて解説しました。