Svelte は React や Vue に比べてシンプルで軽量、さらにコンパイル時に最適化されるため、初心者にも扱いやすい魅力的なフレームワークです。本記事では、macOS 環境で yarn と TypeScript を使い、Svelte プロジェクトを最短で立ち上げる手順をご紹介します。

ESLint や Prettier といったコード品質を保つツールまで、一気通貫でセットアップできるので、この記事を読み終えたらすぐに開発を始められますよ。

背景

Svelte の特徴と選ばれる理由

Svelte は従来の仮想 DOM を使わず、コンパイル時に最適化されたバニラ JavaScript を生成する革新的なフレームワークです。このアプローチにより、ランタイムのオーバーヘッドが削減され、高速なアプリケーションを構築できます。

また、リアクティブな変数宣言が簡潔で、学習コストが低い点も大きな魅力ですね。TypeScript との組み合わせにより、型安全性を保ちながら開発できるため、保守性の高いコードが書けます。

macOS ＋ yarn を選ぶメリット

macOS は Node.js エコシステムとの親和性が高く、Homebrew などのパッケージマネージャーを使えば環境構築がスムーズです。yarn は npm に比べて依存関係の解決が高速で、ロックファイル（yarn.lock）により再現性の高い環境を構築できますね。

以下の図は、Svelte アプリケーション開発における主要な技術スタックの関係性を示しています。

mermaidCopy codeflowchart TB
  dev["開発者"] -->|コード作成| svelte["Svelte<br/>プロジェクト"]
  svelte -->|型チェック| ts["TypeScript"]
  svelte -->|リント| eslint["ESLint"]
  svelte -->|整形| prettier["Prettier"]
  ts -->|コンパイル| js["JavaScript"]
  eslint -->|品質保証| output["成果物"]
  prettier -->|統一| output
  js -->|最適化| output

この図から分かるように、TypeScript による型安全性、ESLint によるコード品質、Prettier によるフォーマット統一が、最終的な成果物の品質を支えています。

課題

初期セットアップの複雑さ

Svelte プロジェクトを一から構築する際、公式テンプレートはあるものの、TypeScript や ESLint、Prettier を組み合わせる設定は手間がかかります。特に設定ファイルの記述や依存パッケージの選定で迷うことが多いでしょう。

また、各ツールのバージョン互換性や設定の書き方が更新されることもあり、最新情報を追いかけるのも大変ですね。

ツール連携の調整

ESLint と Prettier を併用する際、ルールの競合が発生しやすく、適切な設定をしないとエラーが出たり、自動整形が期待通りに動かなかったりします。TypeScript のパス解決や Svelte ファイル（.svelte）の解析も、プラグインの導入と設定が必要です。

以下の図は、ツール連携時によく起こる課題の流れを示しています。

mermaidCopy codeflowchart LR
  start["セットアップ開始"] -->|依存追加| deps["パッケージ<br/>インストール"]
  deps -->|設定ファイル| config["各種設定"]
  config -->|競合発生?| conflict{"ルール<br/>競合"}
  conflict -->|Yes| fix["設定調整"]
  conflict -->|No| done["完了"]
  fix -->|再確認| config

この図のように、設定ファイルの作成後にルール競合が発生すると、再度調整が必要になり、手戻りが発生してしまいます。

解決策

公式テンプレートと yarn の活用

Svelte 公式が提供する create-svelte を使えば、TypeScript 対応のプロジェクトを簡単に生成できます。yarn を利用することで、依存関係の管理も高速かつ安定します。

さらに、ESLint と Prettier の設定を標準化し、競合を回避する構成を採用すれば、セットアップ後すぐに開発に集中できますよ。

設定ファイルの統一と自動化

ESLint の設定では eslint-config-prettier を使い、Prettier と競合するルールを無効化します。また、VS Code などのエディタ設定と連携させることで、保存時の自動整形が可能になりますね。

以下の図は、解決策として提案する開発フローを示しています。

mermaidCopy codeflowchart TB
  init["yarn create svelte"] -->|選択肢| template["TypeScript<br/>テンプレート"]
  template -->|依存追加| install["yarn install"]
  install -->|設定| eslint_conf["ESLint 設定"]
  eslint_conf -->|設定| prettier_conf["Prettier 設定"]
  prettier_conf -->|統合| vscode["VS Code<br/>連携"]
  vscode -->|自動化| dev["開発開始"]

このフローに従えば、迷うことなく最短でセットアップが完了し、すぐにコーディングを始められます。

具体例

ここからは、実際にコマンドを実行しながら Svelte プロジェクトを構築していきます。各ステップごとにコードブロックを分けて説明しますので、順番に進めてください。

前提条件の確認

まず、Node.js と yarn がインストールされているか確認しましょう。

bashCopy code# Node.js バージョン確認
node -v

bashCopy code# yarn バージョン確認
yarn -v

Node.js は v16 以上、yarn は v1.22 以上が推奨です。インストールされていない場合は、Homebrew を使ってインストールできます。

bashCopy code# Homebrew で Node.js をインストール
brew install node

bashCopy code# npm 経由で yarn をインストール
npm install -g yarn

プロジェクトの作成

次に、Svelte プロジェクトを作成します。create-svelte を使うことで、対話形式でテンプレートを選択できます。

bashCopy code# プロジェクトを作成
yarn create svelte my-svelte-app

実行すると、以下のような選択肢が表示されます。

#	質問	選択内容
1	Which Svelte app template?	Skeleton project
2	Add type checking with TypeScript?	Yes, using TypeScript syntax
3	Select additional options	Add ESLint for code linting, Add Prettier for code formatting

ここで TypeScript と ESLint、Prettier を選択することがポイントです。これにより、後から個別に設定する手間が省けますね。

プロジェクトディレクトリへ移動

作成したプロジェクトディレクトリに移動しましょう。

bashCopy code# プロジェクトディレクトリへ移動
cd my-svelte-app

依存パッケージのインストール

yarn を使って依存パッケージをインストールします。

bashCopy code# パッケージをインストール
yarn install

これで、プロジェクトに必要なすべてのパッケージがインストールされました。node_modules ディレクトリと yarn.lock ファイルが生成されます。

プロジェクト構造の確認

プロジェクトのディレクトリ構造を確認してみましょう。

bashCopy code# ディレクトリ構造を表示
tree -L 2 -I node_modules

主要なファイルとディレクトリは以下の通りです。

#	ファイル/ディレクトリ	説明
1	src/	アプリケーションのソースコード
2	static/	静的ファイル（画像、フォントなど）
3	svelte.config.js	Svelte の設定ファイル
4	vite.config.ts	Vite の設定ファイル
5	tsconfig.json	TypeScript の設定ファイル
6	.eslintrc.cjs	ESLint の設定ファイル
7	.prettierrc	Prettier の設定ファイル

これらのファイルが自動生成されているので、基本的な設定はすでに完了しています。

ESLint 設定の確認と調整

生成された .eslintrc.cjs を確認してみましょう。

javascriptCopy code// .eslintrc.cjs
module.exports = {
  root: true,
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:svelte/recommended',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020,
    extraFileExtensions: ['.svelte']
  },

上記の設定では、TypeScript と Svelte のプラグインが有効化されており、prettier が extends の最後に配置されています。

javascriptCopy code  env: {
    browser: true,
    es2017: true,
    node: true
  },
  overrides: [
    {
      files: ['*.svelte'],
      parser: 'svelte-eslint-parser',
      parserOptions: {
        parser: '@typescript-eslint/parser'
      }
    }
  ]
};

overrides セクションにより、.svelte ファイルに対して専用のパーサーが適用されます。これにより、Svelte ファイル内の TypeScript コードも正しくリントされますよ。

Prettier 設定の確認

.prettierrc ファイルも確認しましょう。

jsonCopy code{
  "useTabs": true,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 100,
  "plugins": ["prettier-plugin-svelte"],
  "overrides": [
    {
      "files": "*.svelte",
      "options": {
        "parser": "svelte"
      }
    }
  ]
}

この設定では、Svelte ファイル用のプラグイン（prettier-plugin-svelte）が有効化されており、自動整形が正しく動作します。好みに応じて singleQuote や printWidth を調整できますね。

VS Code 設定の追加（任意）

VS Code を使っている場合、保存時に自動整形されるよう設定すると便利です。プロジェクトルートに .vscode​/​settings.json を作成しましょう。

jsonCopy code{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

上記の設定により、ファイル保存時に Prettier でフォーマットされ、ESLint のエラーも自動修正されます。

jsonCopy code  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

ファイルタイプごとにフォーマッターを指定することで、Svelte ファイルと TypeScript ファイルが適切に整形されます。

サンプルコンポーネントの作成

実際に動作を確認するため、簡単なコンポーネントを作成してみましょう。src​/​lib​/​Counter.svelte を作成します。

svelteCopy code<script lang="ts">
  // カウンターの状態を管理する変数
  let count: number = 0;

  // カウントを増やす関数
  function increment(): void {
    count += 1;
  }
</script>

上記のコードでは、TypeScript の型注釈を使って変数と関数の型を明示しています。

svelteCopy code<button on:click={increment}>
  Count: {count}
</button>

ボタンをクリックすると、increment 関数が呼ばれてカウントが増えます。

svelteCopy code<style>
  button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    background-color: #ff3e00;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  button:hover {
    background-color: #ff5722;
  }
</style>

スタイルは Svelte のスコープ付き CSS として定義されるため、他のコンポーネントに影響しません。

ページでコンポーネントを使用

次に、作成した Counter コンポーネントをページで使用します。src​/​routes​/​+page.svelte を編集しましょう。

svelteCopy code<script lang="ts">
  // Counter コンポーネントをインポート
  import Counter from '$lib/Counter.svelte';
</script>

$lib は Svelte のエイリアスで、src​/​lib ディレクトリを指します。これにより、相対パスを使わずにインポートできますね。

svelteCopy code<h1>Welcome to Svelte</h1>
<p>TypeScript + ESLint + Prettier で快適な開発環境が整いました!</p>

<Counter />

ページにコンポーネントを配置することで、カウンターが表示されます。

開発サーバーの起動

開発サーバーを起動して、ブラウザで動作を確認しましょう。

bashCopy code# 開発サーバーを起動
yarn dev

実行すると、http:​/​​/​localhost:5173 でサーバーが起動します。ブラウザでアクセスすると、作成したページとカウンターが表示されますよ。

リントとフォーマットの実行

コードの品質を確認するため、ESLint と Prettier を実行してみましょう。

bashCopy code# ESLint でコードをチェック
yarn lint

エラーがあれば表示されます。自動修正可能なエラーは以下のコマンドで修正できます。

bashCopy code# ESLint で自動修正
yarn lint --fix

次に、Prettier でフォーマットを確認します。

bashCopy code# Prettier でフォーマットをチェック
yarn format

実際にフォーマットを適用する場合は、以下のコマンドを実行します。

bashCopy code# Prettier でフォーマットを適用
yarn format --write

これらのコマンドを定期的に実行することで、コードの品質と一貫性を保てます。

ビルドの実行

最後に、本番用のビルドを実行してみましょう。

bashCopy code# 本番用ビルド
yarn build

ビルドが成功すると、build ディレクトリに最適化されたファイルが生成されます。TypeScript のエラーがあればここで検出されるため、本番環境にデプロイする前に確認できますね。

以下の図は、開発から本番デプロイまでの一連の流れを示しています。

mermaidCopy codeflowchart LR
  code["コード作成"] -->|保存| auto["自動整形<br/>Prettier"]
  auto -->|確認| lint["ESLint<br/>チェック"]
  lint -->|問題なし| test["動作確認<br/>yarn dev"]
  test -->|完成| build["ビルド<br/>yarn build"]
  build -->|成功| deploy["デプロイ"]
  lint -->|エラー| fix["修正"]
  fix -->|再編集| code

この図から分かるように、自動整形とリントを組み込むことで、品質の高いコードを継続的に保てます。

まとめ

本記事では、macOS 環境で yarn と TypeScript を使い、Svelte プロジェクトを最短でセットアップする方法をご紹介しました。公式の create-svelte を活用することで、TypeScript、ESLint、Prettier の設定が自動で行われ、すぐに開発を始められます。

ESLint と Prettier の組み合わせにより、コードの品質とフォーマットの統一が実現し、チーム開発でも安心ですね。VS Code との連携設定を加えれば、保存時の自動整形も可能になり、開発効率がさらに向上します。

Svelte のシンプルさと TypeScript の型安全性を組み合わせることで、保守性の高いアプリケーションを構築できるでしょう。ぜひこの記事を参考に、快適な Svelte 開発を始めてみてください。

関連リンク

• Svelte 公式サイト
• SvelteKit 公式ドキュメント
• TypeScript 公式サイト
• ESLint 公式サイト
• Prettier 公式サイト
• yarn 公式サイト
• Vite 公式サイト