こんにちは！
デジタルイノベーション部の細川です。
普段は React を使って開発しているのですが、他のフレームワークにも触ってみたくなったので、Svelte を使ってアプリケーションを作っていきます！
目標
「Svelte を使う」という手段は既に決まっているので、次に「どんなアプリを作るか」を決めていきます。
（普通は逆です。）
というわけで、日程調整アプリを作っていきます。
Svelte の勉強
あらかじめ最低限の Svelte の文法を勉強しておきます。
自分はSvelte の公式チュートリアルを使って勉強しました。最後まで全部こなしたわけではないですが、丁寧に教えてくれるのでおすすめです。
注意点として、記事執筆時点では日本語版の Svelte 公式チュートリアルは情報が古いです。
最近、Svelte は 4 から 5 へメジャーアップデートしたのですが、英語版チュートリアルは Svelte 5 の内容になっているのに対し、日本語版は Svelte 4 の内容になっています。
環境構築
まずは環境構築をしていきます。
フロントは SvelteKit、バックエンドの代わりに Mock Service Worker（MSW）を使っていきます。
ちなみに、モックに MSW を使用したのは先輩にオススメされたからです。
バックエンドは、そのうち EC2 あたりに真面目に実装していきたいところですね。
フロントエンド環境構築
まず github でレポジトリを作成、README を添えておきます。
git cloneできたら、まずは node の設定をします。
自分は nodenv で node のバージョン管理をしているので、以下のコマンドでバージョンを指定します。
nodenv local 22.12.0
まず動作確認を行いたいので、適当なブランチを作成し、Svelte 公式が用意しているデモを構築していきます。
git checkout -b <SvelteKitのデモを構築するブランチの名前>
次に、Svelte 公式サイトに従い、npx sv create <任意の名前>を実行していきます。
この際、<任意の名前>の部分を.にしておくと、今いるディレクトリにファイルを配置してくれます。
（ここで<任意の名前>の部分をmy-app等にすると、今いるディレクトリの下にmy-appというフォルダができて、その下にファイルが配置されます。）
以下が実行結果です。テンプレートにはSvelteKit demoを選択、その他の選択肢は適当に設定しています。
そうしたら早速、npm run devで始動します。
無事、動きました。
デモが自分の環境でちゃんと動くことはわかったので、次はデモ用のコードが入っていないテンプレートを使ってnpx sv createをやり直します。
git checkoutで開発用のブランチに移動したら、再びnpx sv create .を実行します。
今度はテンプレートとしてSvelteKit minimalを選択。最低限のファイルだけが生成されるようです。
うまくいったのでnpm run devで再び動かしてみます。
シンプルを極めた画面が登場しました。
バックエンド（モック）環境構築
MSW 公式サイトのGetting startedページに、各クレームワークでの使用例が入った github へのリンクがあります。
その中に Svelte の使用例もあったので、こちらを参考に設定していきます。
まずGetting startedにあるように、以下を実行します。
npm install msw@latest --save-dev
次に Svelte の使用例のREADMEに書いてあるように、npx msw init ./staticを実行し、以下のファイルを github からコピーしてきます。
- src/hooks.client.ts
- src/hooks.server.ts
- src/mocks/browser.ts
- src/mocks/handlers.ts
- src/mocks/node.ts
これでモックが使えます。
ちょっとコードを変えてみる
そのままだとつまらないので、Svelte と MSW の練習も兼ねてコードを書き換えていきます。
テキストの入力に応じてフェッチを行い、入力がpingの時だけpong!という文字列が返ってくる機能を作ってみます。
メインのページとなる+page.svelteはこんな感じ。
<script lang="ts">
let input = $state<string>('');
let checkPing = $state<string>('waiting...');
$effect(() => {
if(input==="") return;
fetch(`https://api.example.com/ping/${input}`)
.then((value) => value.text())
.then((value) => {checkPing = value});
});
</script>
<input bind:value={input} />
<p>{checkPing}</p>そしてhandlers.tsに以下のハンドラを追加します。
http.get('https://api.example.com/ping/:text', ({ params }) => {
const { text } = params;
return HttpResponse.text(text === 'ping' ? 'pong!' : 'What?');
}),これで完成！
次回予告
実はどう進めていくか決めていないのですが、次回はデザインか、いきなり実装を初めていきたいと思っています。
