今回はJavaScriptフレームワーク「SvelteKit」をご紹介します。
目次
はじめに
近年のWebアプリケーション開発では、JavaScriptフレームワークが多く採用されています。JavaScriptは多くのWebエンジニアが習得しているため、フロントエンドとバックエンドで同じ言語を扱えるJavaScriptフレームワークは採用しやすく人気が高いです。
代表的なものとしてはNext.jsやNuxt.js、Angularなどが使われていますが、技術の採用においてはそれらの特長を把握した上で、個々のプロジェクトに合わせて適切に選ばなければなりません。
今回は、高パフォーマンスなWebアプリケーションに向いているJavaScriptフレームワーク「SvelteKit」をご紹介します。注目度の高いJavaScriptフレームワークでもありますので、技術選定の参考にしてみてください。
SvelteKitとは
SvelteKitは、Svelte（スヴェルト）というフレームワークをベースとしたWebアプリケーションフレームワークです。
Svelteは、ページコンテンツを部品に見立てて効率良く組み上げていく仕組みで、HTMLやCSS、JavaScriptをひとまとめにしたSvelteコンポーネントの作成をサポートする機能を提供します。別途、Svelteを解説した記事もありますのでご参考ください。
SvelteKitは、そのSvelteコンポーネントを前提とした仕組みで、Webアプリケーションに必要なリクエスト処理（ルーティング）、サーバーサイドのレンダリングなどの基本機能を提供します。
また、読み込み速度を上げるために事前にレンダリングしたり、動的な処理はクライアントに任せたりと、最低限の通信量に絞ってサイト全体のパフォーマンスを最大化させるための仕掛けが備わっています。
なお、SvelteはReactやVue.jsと比べて後発の技術ですが、2023年には興味のあるフロントエンドフレームワークで1位に挙がるなど、徐々に関心度が高まっています。相対的に見れば他のフレームワークよりも発展途上にありますが、今後の拡張が期待される技術です。
SvelteKitの特長
コンポーネントベースのWebフレームワーク
SvelteKitのベースとなっているSvelteは、ページコンテンツをコンポーネントとして扱うためのフレームワークです。Svelteでは、ページコンテンツに関わるHTML、CSS、JavaScript（またはTypeScript）をまとめたコンポーネントファイルを定義します。
<script>
let name = 'Svelte';
</script>
<h1>Hello {name.toUpperCase()}!</h1>
<style>
h1 { color: red; }
</style>Svelte独自の記述が比較的少ないため、他のフレームワークよりも学習コストや導入ハードルが低めです。
また、Svelteはコンポーネントファイルを純粋なJavaScriptコードとCSSファイルに事前にコンパイルすることで、クライアント側での余分な処理が減り、パフォーマンスの向上を図っています。
高速なレスポンスが可能
SvelteKitは高いサイトパフォーマンスが要求されるWebアプリケーションに向いています。例えば、サイトの表示速度に影響するコンテンツの読み込み速度を上げたり、実行時のレンダリング処理を減らしたりするために、下記のような仕組みを備えています。
- 事前のコンパイルによるコードのスリム化
- 静的コンテンツに変換するプリレンダリング
- リンク先の読み込みタイミングを早めるプリロード
特に、頻繁なデータのやり取りを伴うWebアプリケーションにおいてユーザーに快適な体験を提供するには、操作に対する高速なレスポンスが求められます。これを解決するには、サーバーあるいはクライアントのどちらか一方だけでは不充分で、ユーザとのやり取りにおいて両側からアプローチする制御が不可欠です。
SvelteKitでは、サーバーからコンテンツを送信してからクライアントで操作する一連のやり取りにかかる無駄を削ぎ落すことで、サイト全体のパフォーマンスを最大化します。
Webアプリケーションの特性に合わせたページ展開が可能
SvelteKitは、Webアプリケーションの特性に応じて様々な形態で実装が可能です。Webアプリケーションを構成するWebページには、例えば下記のようなパターンが挙げられます。
- SSR：サーバー側でHTMLが出力されるWebページ
- CSR：ユーザーの操作によってクライアント側でHTMLを書き換えられるWebページ
- SPA：スマホアプリのようにスムーズに遷移できるWebページ
これらのWebページはそれぞれにメリットやデメリットがあるため、全体の構成に合わせて柔軟な対応が可能です。
使ってみよう！SvelteKitクイックスタート
それでは、早速SvelteKitをセットアップしてみましょう。
SvelteKitをインストールするためには、npm（パッケージ管理ツール）を使用します。npmはNode.jsというJavaScript環境で動作するため、まずはNode.jsのインストールを行います。
Node.jsのインストール
Node.jsの公式サイトにアクセスします。
表示されている緑色のボタン［Download Node.js（LTS）］を押下して、インストーラのダウンロードを行います。
2024年7月時点の推奨版は「v20.15.1 LTS」となっていますが、その時点のバージョンをダウンロード頂ければ問題ありません。尚、最新版は最新機能が使用できる反面、動作が安定しないことがありますので、特別な理由がない限りは推奨版を使用するようにしてください。
インストーラのダウンロードが終わったらダブルクリックで起動し、指示の通りインストールを行ってください。
インストール後、コマンドを実行できるアプリを起動し、Node.jsおよびnpmが使用できるようになっていることを確認します。
- macOSの場合は、「ターミナル」アプリ
- Windowsの場合は「PowerShell」または「コマンドプロンプト」
以下のコマンドを実行し、結果を確認します。
node -v
npm -v実行結果に自分のインストールしたバージョンが表示されれば、使用する準備ができてきます。コマンドが実行できない場合はOSを再起動して再度試すようにしてください。
SvelteKitのインストール
それでは、SvelteKitを準備していきましょう。
まずは、プロジェクトを作成する任意のディレクトリに移動し、下記のコマンドを実行するとSvelteKitプロジェクトが作成されます。
npm create svelte@latest svelte-tutorial
>Ok to proceed? y
>Which Svelte app template? Skelton project
>Add type checking with TypeScript? Yes, using TypeScript syntax続いて、作成されたSvelteKitプロジェクトに移動し、必要なパッケージをインストールしましょう。
cd svelte-tutorial
npm installインストールが完了したら以下のコマンドでローカル環境でサンプルWebアプリケーションを起動してみましょう。
npm run dev起動が完了すると下記のようなURLを含む出力が表示されるので、「http://localhost:5173/」にブラウザからアクセスします。
下記のようなページが表示されれば成功です。
SvelteKitを動かしてみよう
作成したプロジェクトに、SvelteKitで動くWebページを作っていきましょう。
まずは、ページを追加するために「/src/routes」にcounterディレクトリを作成し、配下に+page.svelteというファイルを作成し、次のコードを記述します。
<script>
let count = 0;
</script>
<input type="number" bind:value={count} />
<button on:click={() => (count += 1)}>count</button>変更できたら、ローカル環境でWebアプリケーションを起動しましょう。
npm run devブラウザで「http://localhost:5173/counter」にアクセスして、ボタンを押してみましょう。下記のようにテキストボックス内の数字がカウントアップされるのがわかります。
なお、本番環境にデプロイするときは、下記のコマンドでビルドを行いましょう。
npm run buildSvelteKitの公式サイトには、様々なチュートリアルがあるので試してみてください。
さいごに
今回は、WebアプリケーションフレームワークのSvelteKitの特長と使い方を解説しました。SvelteKitは、パフォーマンスの最適化に着目したJavaScriptフレームワークで、ページやコンポーネントごとに柔軟に対応できますので、モダンなWebアプリケーション開発をご検討されている方は是非チェックしてみてください。
メシウスでは様々なWebアプリケーションフレームワークと一緒に使えるJavaScriptライブラリを提供しています。
無償のトライアル版や、ブラウザ上で手軽に試せるデモアプリケーションも公開しているので、こちらも是非ご覧ください。