SvelteKitでブログを作成してみる_1

2024-11-12

SvelteKitでブログを作成してみる

勤務している会社でSvelteKitを利用しているので、練習がてら人生初めてのブログを作成してみようと思いました。
備忘録として技術スタックとかをつらつら書いていきます。

使用技術

インフラ

時代はサーバーレスでマネージドらしいのでそんな感じでやっていきます。
ドメインは会社の人にお勧めされたCloudflareで取得しています。

  • AWS Amplify
  • Cloudflare

開発環境

Dockerを利用して開発しています。
以下はpackage.jsonの抜粋です

"devDependencies": {
  "@sveltejs/adapter-auto": "^3.0.0",
  "@sveltejs/kit": "^2.0.0",
  "@sveltejs/vite-plugin-svelte": "^4.0.0",
  "@tailwindcss/typography": "^0.5.15",
  "@types/eslint": "^9.6.0",
  "autoprefixer": "^10.4.20",
  "eslint": "^9.7.0",
  "eslint-config-prettier": "^9.1.0",
  "eslint-plugin-svelte": "^2.36.0",
  "globals": "^15.0.0",
  "mdsvex": "^0.11.2",
  "postcss": "^8.4.48",
  "prettier": "^3.3.2",
  "prettier-plugin-svelte": "^3.2.6",
  "svelte": "^5.0.0",
  "svelte-check": "^4.0.0",
  "tailwindcss": "^3.4.14",
  "typescript": "^5.0.0",
  "typescript-eslint": "^8.0.0",
  "vite": "^5.0.3",
  "vitest": "^2.0.4"
},
"dependencies": {
  "amplify-adapter": "^0.2.0"
}
  • SvelteKit
    転職してから使い始めました。
    個人的にはかなり方言が強いと感じました。ですが、結局慣れの問題みたいなところがあるので、そこは我慢な気がします。
    書きやすさに関してはまあまだ未知数なところがあるので評価しにくいところはありますが、書きやすい方なんじゃないでしょうか。

  • Tailwind CSS
    転職して初めて使っているんですがいいですねーこれ。
    今までは純粋なCSSで開発していたんですが、クラス名を考える手間が本当に手間だったのでこれを使ってからは開発スピードが上がったように思います。
    凝ったものを書こうとすると結構大変そうな気はする。よく負債になるとか言われているけど、よくわかっていない。

  • MDsveX
    マークダウンを解釈していい感じにSvelteコンポーネントにしてくれるやつ。
    人間はツリー構造から逃げられない。

  • tailwindcss-typography
    上述のライブラリと合わせるとかなりいい感じに表現できる。個人レベルならこれで十分ではないでしょうか。

  • amplify-adapter
    AmplifyにSSRでデプロイすることができるアダプター。

感想とか

めちゃくちゃ便利でした!
でも大体3日くらいかかりました。
DNSの設定とかは初めてやったのでいい勉強になりました。
反面、マネージドの先に本当に技術の成長はあるのだろうかとも思いました。ベンダーロックインが加速していくだけなんじゃないでしょうか。
でもやっぱり便利!
参考にした文献は後日まとめようかなあ。