実践Svelte入門で作ったECサイト

少しカスタマイズされた、実践Svelte入門のハンズオンです

カスタマイズしたこと

• トップページを作成
• カートページ作成
• TypeScriptで記述
• デザイン調整

デモ

npm run dev

npm run dev -- --open

本番環境

依存してるサービスは本文ママです

• デプロイ先（Vercel）
• パスワードレス認証（Auth0）
• DB（mongoDB Atlas）

https://svelte-book-kit-tutorial-beta.vercel.app/

感想

SvelteKitを使ってはじめてのWebsite構築。ここ1年間くらい仕事でネイティブアプリを触っているので、久しぶりにhtmlとかCSSを書くのが楽しかった。Svelteはhtml, CSS, JSの書きっぷりが静的ページに似ているので、JSフレームワーク初心者にもとっつきやすいような印象だった。ただ、CSSゴリゴリ書いてると1ファイルが長くなりがち。

フォームアクション

今までろくにフォームを書いてこなかったので、フォームデータの扱い方が難しかった。こういうのって昨今は全部JSで制御してそうな気がするけどどうなんだろう。

JSが動かない環境に対する配慮が素晴らしいのだけどそれってどれくらい意味があるのだろうと思った。

TypeScript

Svelte本体はJavaScriptで書かれているらしいことを知ってかなり不安になった。TypeScriptなしじゃかけないぜって気持ちになってたから、ちょっと衝撃。JSDOCTypeで書けば、プリプロセッサも必要なくなるけど、TypeScriptを書くことに対するデメリットもない気がしたので使い続けたい。

SvelteKitは型を自動生成してくれるのがとてもいい感じ。参考：Zero-effort type safety

TypeScriptが淘汰される日もいずれ訪れるのだろう。

SaaS?

外部サービスとして、mongoDBAtlasとAuth0を使用することができた。個人的にDBや認証に携わったことがなくて、自分の弱い部分でもあった部分を補強するきっかけが得られた経験は大きい。

このDBはNoSQLなので、本格的なSQL文は書いていないのでいずれ書けるようになりたい。そのためにGOいじったりもしてたのだ。いい加減やらないと。。。

認証は個人で開発するようなものじゃないとは思ってたけど、一度触って仕組みくらいは知っておかないとダメだと思っていた。セッション管理やCookieでの情報保存は今まで触ったことがなかったのでかなり学びになった。

まとめ

実践Svelte入門とても読みやすくてよかった。知りたいことが知れる感じ。多分教えるのうまいんだろうなって人が書いてる。

Svelteは内部でこういう処理をしますってのが開発者的には一番知りたいことだから、Svelteのメンテナの方がレビューしているのも心強い。

ポートフォリオサイトもSvelteで描き直したい。