Contents
SaaSアプリ開発の基礎と本記事の導入
SaaS（Software as a Service）は現在のWeb業界においても成長を続けるビジネスモデルです。特にSvelteという軽量なフレームワークを活用することで、パフォーマンスと開発効率を両立させることが可能です。本記事ではSvelteKit導入型のプロジェクト構築ワークフローに焦点を当て、SaaSアプリの実装プロセスを体系的に解説します。
読者層はSvelte初心者～中級者で、Node.js基礎とTypeScriptの理解があることを前提としています。記事では具体的な手順やコード例を交えながら、SSR/SSE機能やStripe連携といった実務に直結する内容もカバーします。
Node.js環境構築（macOS/Windows両方対応）
Node.jsはSvelteプロジェクトの基盤となるため、正確なインストールが重要です。2023年時点での最新版Node.js v18.xを導入する手順とバージョン管理方法を解説します。
公式インストーラーによる最新版導入手順
macOSの場合:
- Node.js公式サイトから「LTSバージョン」を選択し、Downloadボタンをクリック。
- ダウンロードした
.pkgファイルを実行し、インストーラーに従ってインストール。 npm -vでNode.jsが正しく動作することを確認。
Windowsの場合:
- Node.js公式サイトから「LTSバージョン」を選択し、「Windows Installer」をダウンロード。
- 安装ファイルを実行し、インストール完了後、PowerShellで
node -vとnpm -vを確認。
nvmでバージョン管理のベストプラクティス
nvm（Node Version Manager）は複数のNode.jsバージョンを切り替えるために最適です。現在の最新版はv0.39.7ですが、安定性を重視する場合はv0.39.5などの過去バージョンが推奨される場合もあります。
macOS/Linuxでの導入手順:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bashでnvmをインストール。- ターミナル再起動後、
nvm ls-remoteで利用可能なバージョン一覧を確認。 nvm install 18でNode.js v18.xを導入。
Windowsでの代替案:
WSL（Windows Subsystem for Linux）を利用し、Linux環境でnvmを使用する方法が推奨されます。
SvelteKitプロジェクト初期設定
SvelteKitはSSR対応のプロジェクトテンプレートを提供しており、最新版ではcreate-svelteコマンドが簡略化されました。
npx create-svelte コマンドの最新実行方法
- Node.jsがインストールされていることを確認。
-
ターミナルで以下のコマンドを実行:
bash
npx create-svelte@latest my-saas-app -
プロジェクトタイプ選択時に「SSR（Server-Side Rendering）」を選択。これにより、動的ルーティングやリアルタイム通信が容易になります。
アプリケーションタイプ選択時の考慮事項
- SSR: SaaSアプリで必要となるセッション管理やデータの初期取得に適しています。
- Static: 静的なページ構成のみを扱うため、SaaSには不向きです。
- Adaptive: ユーザーのブラウザ環境に応じてSSRまたは静的レンダリングを選択可能。
TypeScript環境構築とVitest導入
TypeScriptは大規模プロジェクトにおいて必須であり、Vitestは高速なテストフレームワークとして注目されています。
tsconfig.jsonの最適な設定例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "compilerOptions": { "target": "ES2021", "module": "ESNext", "jsx": "preserve", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "outDir": "./dist" }, "include": ["src/**/*"] } |
テストファイル構成とアサーションライブラリ選定
npm install --save-dev vitestでVitestを導入。- テストファイルは
.spec.tsまたは.test.tsで命名し、以下のように記述:
ts
import { describe, it, expect } from 'vitest'
import MyComponent from '../src/components/MyComponent.svelte'
describe('MyComponent', () => {
it('should render with correct text', async () => {
const component = await MyComponent.render()
expect(component.text()).toContain('Hello, SaaS!')
})
})
- アサーションライブラリとしてVitest公式の
expect()関数を使用。
SvelteKitでのルーティング設計とSSR/SSE活用
SvelteKitはファイル構造ベースで動的ルーティングを実装可能。SSR/SSEによるリアルタイム機能も簡単です。
動的ルーティングのファイル構成ルール
- 静的なページ:
src/routes/about.svelte→/aboutへアクセス可能。 - 動的なルート:
src/routes/user/[id].svelte→/user/123のように動的にパスを生成。
Server LoadersとEvent Streamsの実装サンプル
Server Loader（SSR用）:
|
1 2 3 4 5 6 |
// src/routes/user/[id]/+page.server.ts export async function load({ params }) { const userId = params.id return { user: await fetchUserData(userId) } } |
SSE（Server-Sent Events）実装例:
|
1 2 3 4 5 6 7 8 9 10 |
// src/routes/notifications/+server.ts import type { ServerRequest } from '@sveltejs/kit' export async function GET({ request }) { const eventSource = new EventSource(request) setInterval(() => { eventSource.send('新しい通知がありました！') }, 5000) } |
GitHub ActionsによるCI/CD構成
GitHub Actionsで自動テストとデプロイを実現することで、開発効率が向上します。
型チェックとテスト自動化ワークフロー
.github/workflows/ci.ymlを作成し、以下のように記述:
yaml
name: CI
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js 20.x
uses: actions/setup-node@v3
with:
node-version: '20'
- run: npm install
- run: npm run build
- run: npm test
Dockerコンテナ化と本番環境デプロイ設定
-
Dockerfileを作成し、以下の内容を記述:
dockerfile
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "start"] -
GitHub ActionsにDockerイメージのプッシュ処理を追加。
yaml - name: Build and push Docker image
uses: docker/build-push-action@v5
with:
context: .
push: true
tags: my-registry/my-saas-app:${{ github.sha }}
username: ${{ secrets.DOCKER_USER }}
password: ${{ secrets.DOCKER_PASS }}
SaaS特有機能の実装（Stripe連携編）
SaaSには支払い処理が不可欠です。Stripe APIとの安全な連携とUI設計例を解説します。
支払い処理APIのセキュアな取り込み方法
npm install stripeでStripeライブラリをインストール。-
背景処理用に秘密鍵を環境変数に保存:
ts
import Stripe from 'stripe'
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY) -
フロントエンドでは
stripe.jsライブラリを使用し、クレジットカード入力フォームを作成。
サブスクリプションモデルのUI設計パターン
- サインアップページ: 金額やプランを選択するコンポーニング。
- 支払い完了画面: Stripeからの確認メッセージを表示。
- 管理者用顧客管理画面:
src/routes/admin/customers.svelteで顧客一覧とステータス管理を実装。
プロジェクト開始ガイドダウンロード
本記事で解説した設定手順をまとめたPDF形式のチェックリストと、SvelteKitテンプレートリポジトリへのリンクを掲載します。
- チェックリスト: 設定項目ごとに確認できるステップバイステップガイド（20ページ）
- テンプレートリポジトリ: https://github.com/sveltekit-saas-template
記事下部の「プロジェクト開始ガイド」をダウンロードして手順を再現してください。