バクログ

SvelteKitで爆速ブログを構築してみた話

6 min read

こんにちは。エンジニアは21世紀のアーティストだ。そう思ってるこの頃。

折角エンジニアとしてものづくりができるのだから、自分のWebサイトで作ったもの公開していきたいなーと思いこのブログを立ち上げるに至りました。

とはいえ普段フロントエンドの開発なんか全くしない私なので、今流行ってるフロントエンドのフレームワークの調査から入りました。

JavaScriptの流行調査

色々調べているうちにState of JSなるものがあるらしいと。このサイトにはフロントエンドエンジニアたちが好んでいる2022年のJavaScriptフレームワークなどの調査結果がまとめられています。

このサイトを見ればReact+Reduxで数年前に挫折したフロントエンド浦島太郎状態の私でも最新の流行を知ることができるというものです。

特に閲覧したのはこのページ。フロントエンドフレームワークの比較ページです。

利用率(Usage)を見るとやはりReactの強さは相変わらずですが、Retentionや興味において最も高い評価を出しているのがSvelteです。どの指標もこの数年で確実に伸びてきています。

調査の途中でこちらの記事も拝見して、Svelteが推されていたのでSvelteが次に来るんや!と理解しました。

実はNext.jsもある程度試していたのですが、上記の記事や、書きやすさ、パフォーマンスなどを総合的に考えてSvelteに決めました。

SvelteKit + Cloudflare Pagesが速い!

この記事をシークレットモードとかChromeの開発者タブにあるLighthouseを使って測定してみてほしいのですが、だいぶ読み込み速度が速いと思います。

そう、Svelteくんはめちゃくちゃ速いんです。(Svelte=スベルトって読むらしいです)

速いサイトはシンプルに閲覧していて気持ち良く、SEOで有利に働きます。

このページによるとNextJSと比較してもSvelte Kitは速いようです。Hello Worldページが7.7倍くらいSvelte Kitの方がサイズが小さい。

画像や動画などサイズの大きなファイルを読み込むなどとなるとこの差は小さくなりそうですが、いずれにせよ速いことは正義です。NextJSも画像の最適化とかしてくれますが、それと比べてもなお速いというわけです。

さらにこのサイトを爆速にしてくれているのがCloudflare Pagesです。

このブログ記事のような静的ファイルをエッジに配信して、どこからでも爆速で記事を閲覧できるようになっています。

SvelteKit側でもCloudflare Pagesにデプロイするためのadapterも用意してくれており、設定も本当に簡単にGitHubにpushするだけで勝手にデプロイしてくれています。

最近のWeb開発の流行に取り残されていた私にとっては本当に素晴らしい体験(DX)です。これを無料プランでできてしまうのがまた嬉しいところです。

技術的に深いところまでは触れませんでしたが、今後は自分の得意な領域についてはそれなりに深く記事を書いていこうと思います。

読んでいただきありがとうございました。

参考

このブログはsveltekit-blog-templateを利用しています。

getting-startedのページに詳しい使い方は記載されています。

ブログとしての最低限の機能は一通り揃っており、構築が簡単です。

もしSvelteKitでブログを作りたいと考えている方はおすすめです。

できればカテゴリ機能もあったら嬉しかったのですが、余力があれば自分で実装します。。


バクログ

お金稼ぎ大好きな東京在住20代後半限界独身男性。某大企業でITエンジニアをやってます。副業:Webアプリ開発/仮想通貨の自動売買bot/米国株投資/パチンコ。趣味:お笑い(オードリー,さらば青春の光)/アイドル(坂道)/麻雀(Mリーグ観戦も)/Amazon のアソシエイトとして、バクログは適格販売により収入を得ています。