Svelte入門：SvelteKitのよくある質問 -Vol.1-

今日は、SvelteKitでのFAQについて解説しています。

背景

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

SvelteKitで何が作れますか？

SvelteKitはほとんどの種類のアプリケーションを作成できます。SvelteKitは標準で以下のような多くの機能をサポートしています：

• loadファンクションとAPIルートを使用した動的ページコンテンツ
• サーバーサイドレンダリング（SSR）によるSEOフレンドリーな動的コンテンツ
• SSRとフォームアクションによるユーザーフレンドリーで段階的に機能強化されるインタラクティブページ
• プリレンダリングによる静的ページ

SvelteKitはアダプターを通じて、幅広いホスティングアーキテクチャにデプロイすることもできます。SSRを使用する場合（またはプリレンダリングなしでサーバーサイドロジックを追加する場合）、それらの機能はターゲットのバックエンドに適応されます。例えば：

• Node.jsバックエンドを使用した自己ホスト型の動的Webアプリケーション
• バックエンドローダーとAPIをリモート関数としてデプロイするサーバーレスWebアプリケーション。人気のデプロイメントオプションについてはzero-configデプロイメントをご覧ください
• CDNや静的ホストでホストされるブログやマルチページサイトなどの静的プリレンダリングサイト。静的生成サイトはバックエンドなしで提供されます
• API駆動の動的コンテンツ向けのクライアントサイドルーティングとレンダリングを備えたシングルページアプリケーション（SPA）。SPAはバックエンドなしで提供され、サーバーレンダリングされません。このオプションは、PHP、.Net、Java、C、Golang、Rustなどで書かれたアプリケーションとSvelteKitを組み合わせる際によく選択されます
• 上記の組み合わせ：一部のルートを静的にし、一部のルートでバックエンド関数を使用して動的情報を取得できます。これはSSRをオプトアウトするオプションを含むページオプションで設定できます

SSRをサポートするためには、Node.jsやDenoベースのサーバー、サーバーレス関数、エッジ関数などのJSバックエンドが必要です。

また、カスタムアダプターを作成したり、コミュニティアダプターを活用して、特殊なサーバー環境、ブラウザ拡張機能、ネイティブアプリケーションなどのより多くのプラットフォームにSvelteKitをデプロイすることも可能です。より多くの例と統合については、integrationsをご覧ください。

解説

重要なポイントを解説していきます：

1. 概要と基本機能

• SvelteKitは汎用的なWebアプリケーションフレームワークとして紹介されています
• 標準機能として4つの主要な機能を提供：
  • 動的コンテンツの生成
  • SEO対応
  • プログレッシブエンハンスメント
  • 静的ページ生成

1. デプロイメントの柔軟性

• アダプターを通じて様々なホスティング環境に対応
• 特にSSRを使用する場合の柔軟な対応が強調されています

1. アプリケーションの種類と特徴

• 自己ホスト型：Node.jsを使用した従来型のWebアプリケーション
• サーバーレス：クラウドファンクションを活用したモダンなアーキテクチャ
• 静的サイト：ブログやコーポレートサイトなどの静的コンテンツ
• SPA：他の言語で書かれたバックエンドと組み合わせる場合の選択肢
• ハイブリッド：静的ページと動的ページの混在が可能

1. 技術的要件

• SSRを実現するためにはJavaScriptベースのバックエンドが必要
• Node.js、Deno、サーバーレス関数、エッジ関数などが選択肢として挙げられています

1. 拡張性

• カスタムアダプターの作成が可能
• コミュニティによるアダプターも利用可能
• ブラウザ拡張やネイティブアプリケーションまで対応範囲が広い

SvelteKitの主な特徴として：

1. 柔軟性（様々な用途に対応）
2. 拡張性（カスタマイズや機能追加が容易）
3. モダンな開発手法への対応（SSR、サーバーレスなど）
   を強調しており、フルスタックフレームワークとしての完成度の高さを示しています。

おわりに

今日は、 SvelteKitでのFAQについて解説しました。