SvelteKit ＋ TypeScript ＋ tailwindcssを使って半日でプロトタイプを作る

はじめに

新しいプロジェクトの提案作業をしていて、急遽こんな画面になるよって、見せれないか？という依頼を受けました。フロントエンジニアではない私は、この手の対応は得意ではないものの、最近興味を持っていたSvelteを試す絶好の機会だと、やってみることにしました。

フロント周りの知見が多いわけではない中、無事簡単なプロトができたので、その記録として残しておこうと思います。
ということで、間違っていることや変なところがあるかもしれませんので、自己責任でお願いします。

環境

Windows 10 Pro
WSL2
Docker（WSL2 上にインストール）※Docker Desktopでも可
VS Code

やってみる

前提

VS Code ⁺ Docker使って、コンテナ上に環境を作ります。
Node.JSが入っていればOKです。

インストール

以下のコマンドで、質問に答えならが空のプロジェクトを作成していきます。

npm init vite@latest

バージョンは最新を入れたいので、3.2.0 でOK。「y」を入力してエンター

Need to install the following packages:
  create-vite@3.2.0
Ok to proceed? (y) y

プロジェクト名は適当に設定してください。とりあえずデフォルトでもOK
フレームワークの選択を聞かれます。「Svelte」を選択して、エンター

✔ Project name: … vite-project
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
    React
    Preact
    Lit
❯   Svelte
    Others

次に「SvelteKit」を選択

? Select a variant: › - Use arrow-keys. Return to submit.
    JavaScript
   TypeScript
❯   SvelteKit

ここでは「y」を選択Skeleton project

Need to install the following packages:
  create-svelte@2.0.0-next.188
Ok to proceed? (y) y

空のプロジェクトを作りたいので、「Skeleton project」を選択し、エンター

? Which Svelte app template? › - Use arrow-keys. Return to submit.
    SvelteKit demo app
❯   Skeleton project
    Barebones scaffolding for your new SvelteKit app
    Library skeleton project

テンプレートに「TypeScript」を選択し、エンター

✔ Which Svelte app template? › Skeleton project
? Add type checking with TypeScript? › - Use arrow-keys. Return to submit.
    Yes, using JavaScript with JSDoc comments
❯   Yes, using TypeScript syntax
    No

最後にESLint、Prettierを聞かれるので、「y」を選択してエンター

✔ Which Svelte app template? › Skeleton project
✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Playwright for browser testing? › No / Yes

ここまでやれば、基本的な設定ができた状態でプロジェクトが作成される
その後、以下のコマンドで、アプリを起動すればOK

cd vite-project
npm install
npm run dev -- --open

ブラウザが起動してきて、

こんな画面が出てくればOK

tailwindcss を入れる

tailwindcssの公式サイトにのっとって、作業を進めます。

基本的に公式サイト通りなので、割愛しますが、以下の流れで作業しました。

• tailwindcssのインストール
• svelte.config.jsを修正（PostCSSの有効化）
• tailwind.config.cjsの修正（パスの設定）
• app.cssの作成
• +layout.svelteの作成

ここまでやったのち、起動してスタイルを修正すると無事tailwindcssのスタイルを利用できました。

ここまでで環境準備は完了です。

Svelteの基本

実際に画面を作る前に、少しSveltekitでのアプリの作り方を理解しておきます。

VSCode のツリーを見ると、こんな感じの状態になっています。

src/routes 配下にファイルを置くことで、シングルページのアプリを作ることができます。

+layaout.svelte

ナビゲーションやフッターのように共通的に表示されるべき要素を定義するためのファイルです。
の部分に、同じ階層にある⁺page.svelteが表示されます。

+page.svelte

アプリのページとなる部分を定義します。

階層を作る

src/routes 配下に階層を作成することで、ページを分けていくことがが可能です。
例えば

src/routes/price/+page.svelte

という階層とファイルを作れば、そのページにアクセスすることができます。

プロト画面を作る

ということで、ここまでの内容で、プロトを作っていきます。
tailwindcssにそこまで知見があるわけではないので、以下のサイトで公開されているライブラリ群を使っていきます。

ヘッダーを作る

ここからコードをコピーします。コピー先は

+layout.svelte

です。slot の上にコピーしてください。その後、不要なところ（!-- menu コメントで囲まれているところ）を削除してください。

うまくいくとこんな画面に。失敗すると、VSCodeにエラーが出るので適宜修正してください。

フッターを作る

同じようにフッターを作ります。
今度は slotタグの下にコピーしてください。

こんな感じで、フッターができます。

Topページを作る

今度は、+page.svelteにコードを入れてください。

まぁなんでもいいのですが、ヘッダーとフッターの間に、+page.svelteに記載したコンテンツが入ります。

Priceページを作る

新たなファイル src/routes/price/+page.svelte を作成します。

その後、src/routes/+layout.svelte を修正

<a href="/price" class="text-gray-600 hover:text-indigo-500 active:text-indigo-700 text-lg font-semibold transition duration-100">Pricing</a>

これでメニューのPriceを押すと、ヘッダーフッターを除き、Priceページに遷移しました。

最後に

作業を始めてから半日程度で、作りたい画面の大枠まで整理することができました。

プロト画面にするには文言の修正などもろもろ必要ですが、
画面のイメージを作って共有するのに十分な動きをしてくれて、非常に便利だなと思いました。

TypeScript全然使ってないことに気づいたので、
今後もう少し掘り下げてやってみようと思います。