はじめに

本サイトをSveltekitに移行した。以前はLivewireだった。

Sveltekitに移行して使用したライブラリや、個人的に良かったこと、良くなかったことをまとめる。

移行に関して

移行期間は4ヶ月くらい。 

週に平均して20時間くらい。(ガッツリ作業する期間と全く弄らない期間にバラツキがあるので本当か微妙)

node.jsやVue, React, Typescriptはそこそこ出来る状態でスタート。

当プロジェクトはコントローラ数6くらい、画面15くらい。管理画面あり。

使用したライブラリ、技術など

自分がこのサイトを運営する理由は、使用したことのないライブラリや技術を試すため。今回も色々と取り入れてみた。

JWT(Json Web Token) - 認証トークン

okta: https://www.okta.com/jp/identity-101/what-is-token-based-authentication/

セッション情報にあたるもの。公開鍵暗号方式とだいたい同じ。

cookieにjwt token(公開鍵)を取り出し、それをサーバ側でjwt key(秘密鍵)で検証し、jwtからユーザ情報(idなど)を取り出す。

cookie → jwt → userテーブル → jwt → cookie

利点は、tokenが小さいこと、クライアント側でも検証できることなど。

逆に欠点としては暗号学的に複雑でちゃんと設定などを理解していないと危険なこと。またkeyが漏れたらメチャクチャ危険なこと。gitで.envをプッシュしてしまう人などたまにいるので注意。

zod、superForms - バリデーション

zod: https://zod.dev/

superForms: https://superforms.rocks/

zod...バリデーションのスキーマを定義できるライブラリ。

superForms...フォームのバリデーションやエラー文を制御するライブラリ。zodとセットで使う。

使い心地はいい感じだが、superFormsはところどころ発展途上だったりした。

Objection.js - ORM

HP: https://vincit.github.io/objection.js/

以前から記事にしているnodejsで動作するORM。

Laravel Eloquentと同じような書き心地でそこそこ良い。

欠点はMySQLよりPostgreSの方が対応が多いことか。

milkdown - markdownエディタ

HP: https://milkdown.dev/

1カラム方式のmarkdownエディタ。

書いたそばからマークアップされるのでプレビューと見比べたりせず表示される見た目のまま編集できる。unifiedで構築される。

欠点はunifiedということもあり結構複雑で構築に時間がかかること、codeblockのファイル名表示など対応していないこと。

気が向いたら紹介記事を書くかも。

satori - OGPの自動生成

github: https://github.com/vercel/satori#readme

htmlやjsx、tsxから画像を作成できるライブラリ。

これをURLにアクセスした際にサーバ側から画像を生成して返すようにした。

URLの/posts直後に/ogpと拡張子.pngを書き加えてアクセスすると表示できる。

OGP: https://variant3a.com/posts/ogp/yv6z4q6v7-p5n.png

移行してよかったこと

画面遷移が圧倒的に早くなった。

Livewireは大本がPHPでEasyに組めるものの、裏ではDOM差分検出やレンダリングを結構頑張っているらしく、プリレンダリングされていても時間がかかる場合があった。

それが、Sveltekitにしてほぼ完全にSSRしたことですぐにレンダリング、表示されるようになった。

また、型のあるTypescriptによって例外を検出しやすくなった。

PHPだと文字列型の"1"と数値型の1を渡した場合の挙動など、細かな部分で意図しない挙動になる場合があったが、型安全なものはそれなりにメリットがある。

移行してよくなかったこと

やはり開発速度や開発における感動はPHP(またはLivewire)に劣るということ。

PHPの型推論型の柔軟さにはそれなりのメリットがあるし、LivewireはLaravelということで、10年以上前から培ってきたコミュニティ(=ナレッジ)とエコシステムがある。(Jetstream, Octaneなど含め)

またLivewireが裏側で複雑なことをしている = 簡単に組んでもLivewireがよしなにやってくれるということなので、規模はそこそこで開発スピード優先の現場では、だいぶLivewireに分があると思う。

またLaravelはオールインワンのパッケージということもあって何をするにしてもビルトインだったりエコシステムが存在するが、Sveltekitは基本的な機能以外はnpmなどで探してくる必要があるが、有志で作られたライブラリなどはTypescript対応かどうかも問題になるし、有志(Opensource)には限界があるので、開発速度が遅く便利な機能がなかなか搭載されないなどデメリットが多くある。実際、認証(Auth)ライブラリやORMの選定にメチャクチャ苦労した。

またTypescriptによる型安全によるメリットの一方、ライブラリと組み合わせることによるデメリットもあった。

例えば、型がanyになりやすいデータベースのjson型を扱うときなどである。

これをうまく扱えないがために、無駄に型エラーメッセージを外すだけの関数を作成したり、型を合わせるために小一時間試行錯誤したり....

これは型に厳密なJavaやその他の言語にも共通することかもしれないが、この問題を修正するために時間を取られるのは純粋に開発におけるオーバヘッドだと感じた。この点は慣れやコミュニティの成熟にもよると思う。

また、Sveltekit自体の未成熟さも多少あった。ドキュメントが少し見づらい・検索しづらいことであったり、nodejsまわりの挙動に暗黙の仕様があったりした。まあSvelteも結構破壊的変更がまだあるので、リリースからの月日を考えると仕方ないと思う。

総評

それでも、技術スタックやライブラリの選定を乗り越えた今としては開発速度もそれほど落ちないだろうし、ユーザビリティも上がったので個人的には移行してみて良かったと思う。

今後は、javascript得意の非同期通信やリッチなUIをこさえた有用なツールを作成してみて、もっとSveltekitやnodejsについて学んでみようと思う。