SvelteKitを含まないプロジェクトでSvelteとReactを比較しよう
それでは実際にSvelteのプロジェクトを生成して実行してみます。Svelteのプロジェクトは、SvelteKitを含むものと含まないものが利用できます。本連載では次回以降、SvelteKitを含むプロジェクトを利用して説明していきますが、SvelteとReactの各プロジェクトでビルドされたJavaScriptファイルを比較するため、今回はSvelteKitを含まないプロジェクトも利用します。
まずは、SvelteKitを含まないSvelteのプロジェクト（以下「Svelteプロジェクト」と記述）について説明します。Viteを利用して、リスト1のコマンドでプロジェクトを生成します。--template svelte-tsの指定は、TypeScriptを利用するSvelteのテンプレートをもとにプロジェクトを生成することを表します。プロジェクトを生成するコマンドについてはViteの公式ドキュメントも参考にしてください。
npm create vite@latest <プロジェクト名> -- --template svelte-ts
プロジェクト生成後、プロジェクトのフォルダーでnpm installコマンドでライブラリをインストールして、npm run devコマンドで実行できます。Webブラウザーでhttp://localhost:5173/にアクセスして、図3の通り表示できます。なおnpm run dev -- --openと実行すると、自動的にWebブラウザーを開いてWebページを表示できます。
このWebページでは「count is 0」のボタンをクリックすると、カウントが増えていきます。この処理はsrc/lib/Counter.svelteファイルに、リスト2の通り実装されています。
<script lang="ts"> // ...（1）
let count: number = 0 // ...（1a）
const increment = () => { // ...（1b）
count += 1
}
</script>
<button on:click={increment}> <!--（2）-->
count is {count} <!--（3）-->
</button>
ここで簡単にSvelteのコード（*.svelteファイル）の形式を説明します。まず処理の実装は（1）の<script>タグ内に行います。lang="ts"はTypeScriptを利用して実装することを表します。ここでは（1a）でcount変数を初期化し、（1b）のincrement関数でcountを1増やすようにしています。
画面表示は<script>部の外にHTMLベースの記述で行います。（2）の<button>要素では、on:click={increment}記述で、クリック時に（1b）のincrement関数を実行するようにします。また（3）の{count}記述により、count変数の値をボタンに表示します。このような記述方法については、次回以降改めて説明していきます。
一方、リスト3のコマンドを実行すると、リスト1のコマンドで生成したSvelteプロジェクトと類似の動作をするReactプロジェクトを生成できます。--template react-tsの指定は、TypeScriptを利用するReactのテンプレートをもとにプロジェクトを生成することを表します。
npm create vite@latest <プロジェクト名> -- --template react-ts
Svelteプロジェクト同様に、npm installコマンドでライブラリをインストール後、npm run devコマンドを実行すると、図4の通りWebページを表示できます。図3同様、ボタンクリックでカウントが増えていきます。
カウントに関する処理は、プロジェクト内のsrc/App.tsxに、リスト4の通り実装されています。
function App() {
const [count, setCount] = useState(0) // ...（1）
return (
（略）
<button onClick={() => setCount((count) => count + 1)}> {/*（2）*/}
count is {count} {/*（3）*/}
</button>
（略）
)
}
（1）のuseStateフックで、カウンターの値を格納するcount変数と、カウンターの値を設定するsetCount関数を取得します。これらを利用して（2）で、クリック時にカウンターの値を1増やすボタンを記述しています。（3）の{count}記述により、ボタン内にcount変数の値が表示されます。
ここでSvelteとReactの各プロジェクトをビルドして、生成されるJavaScriptファイルを比較します。npm run buildコマンドを実行するとビルドが行われ、成果物がdistフォルダーに出力されます。dist/assets配下に出力されるJavaScriptファイルを参照すると、Svelteプロジェクトでは図5の通りになっています。
一方でReactプロジェクトでは図6の通り、ビルドされたJavaScriptにReact自身のコードが含まれていることがわかります。
この差異により、SvelteプロジェクトではビルドされたJavaScriptが8KB程度、Reactプロジェクトでは140KB程度と、ファイルサイズに大きな差が生じます。ライブラリ自身のコードが含まれない分だけ、Svelteではファイルサイズを小さくできます。
