この度ぱずかるをリアーキテクチャしました。
ぱずかるは、私が高校3年でプログラミングを始めた時に作ったWebアプリケーションです。
もはやぱずかるを作りたいというモチベーションでプログラミングを始めたと言った方が正しいかもしれません...
今回は移行した経緯と技術選定、パフォーマンスの変化などについて書きたいと思います。
移行した経緯
いままでのぱずかるには
- デザインがダサい
- a11y、UXが悪い
- パフォーマンスが悪い（特にFCPとLCP）
- コードの保守性が悪すぎる
といった問題がありました。
と言ってもつい最近までずっと2つの企業でインターンを掛け持ちしていたので忙しすぎてなかなかリプレイスする暇がなく...
今回たまたま自由に開発できる時間ができたので今しかないと思い開発することにしました。
技術選定
今までのサイトの使用技術はこのような感じでした
| カテゴリ | 使用技術 |
|---|---|
| フロントエンド | HTML+CSS+JavaScript (静的、直書き) |
| バックエンド | Django (Python) (ランクデータを返すAPIがあるだけ) |
| インフラ | Xserver + Python Anywhere |
自分がプログラミング学びたての時に頑張って考えたアーキテクチャです...懐かしい...
今回作ったサイトの使用技術はこんな感じです。
| カテゴリ | 使用技術 |
|---|---|
| フロントエンド | React + vite-plugin-ssr |
| バックエンド | JavaScript |
| インフラ | Cloudflare Pages + (Function) |
自分の技術力の向上を感じます...
デザインの話
もちろん当時Web初学者だった私が数日かけて調べに調べて作ったサイトですのでデザインはとても絶望的でした。
- 要素の大きさが強調したい順になっていない
- ハンバーガーメニューの主張が異様に強い
- よくあるごちゃごちゃなデザイン詰め合わせのようになっている
私は去年Wizleap Inc.でフロントエンドのテックリードとして社内UIライブラリ（フロントエンドの共通化基盤）を構築していたので、その知見を活かして軽くデザインシステムを組みました。
const GRAYS = {
'50': '#eff3f8',
'100': '#d8e2ea',
'200': '#c1ceda',
'300': '#a8bac9',
'400': '#94a8bb',
'500': '#7f98ad',
'600': '#71889a',
'700': '#607382',
'800': '#505f6c',
'900': '#3e4953',
};
const BLUES = {
'50': '#e4f2ff',
'100': '#bdddff',
'200': '#93c8ff',
'300': '#68b2ff',
'400': '#4ba1ff',
'500': '#3991ff',
'600': '#3b83f6',
'700': '#3a70e2',
'800': '#395ecf',
'900': '#353eaf',
};
簡単ですがこのような形でColor Tokensを設けたり0.25rem unit(4px unit) でのレイアウトを心がけるようにしました。
結果一貫性のある綺麗なデザインを構築できたのではないかなと思っています。
シンプルが一番ですね
a11y、UXの話
今までのサイトでは、計算ボタンを押した時にガタつきがあったり、いちいちユーザーにスクロールを要求するような設計になっていました。
そこで今回はスクロールせずにFirst View内で計算できるやガタつきを産まないというコンセプトをモットーに構築しました。
さらに、値を入力するという行動も億劫だと感じため、よく計算に使われるキリ番（200ランクずつ）を予測候補としてボタンで提示することにしました。 結果的にアクセスしてからボタンを3回押すだけで計算できる状況を演出し、ページ離脱率を抑えることに成功しました。
今回、機能として計算結果の表示をUniversal式と日本語式で切り替えられるような機能をつけたのですが、ここでもレイアウトシフトがないようにあらかじめ高さを確保する工夫を施しています。
パフォーマンスの話
今までインフラはxserverというオンプレミスのレンタルサーバーを利用していましたが、http/1.1で通信していたり、ランクデータを提供しているAPiがめちゃくちゃ遅かったりでページリソースの収集に大体1.2秒くらいかかっていました
（設定がめんどくさかったのもあります）
今回から、インフラをcloudflare pagesというCDNサーバーに載せるました。 ssl化やbrotil圧縮を勝手にやってくれたり、mainブランチへのgithub push hookで自動的にデプロイしてくれたりして、とても素晴らしい使いやすさでした。
http/3で通信できていることや、apiサーバを使わずにssg時でランクデータを保持しているため、ページリソースの収集が大体0.18秒くらいになりました。（すごすぎないですか
）
最終的にこれまでFCPやLCPが低かったサイトが
ここまで劇的な改善をしました。
保守性の話
今回から@testing-library/reactを利用したコンポーネントテストを行っております。
また、デザインシステムを効率よく、かつ保守的に組むために自分がめちゃくちゃ推してるvanilla-extractをつかって型安全なZero Runtime CSS in JSの恩恵を存分に受けています。
今とても気になっている Panda CSS でも良かったなと少し後悔しています
あとがき
ぱずかるにデータを提供してくださっているトップランカーのじゃぶおじさん様が史上初のランク2000に到達したそうです、本当におめでとうございます。
すごすぎますよね...自分がランク上げをやってた5年前、ランク1000になっただけで大喜びしてたのが懐かしいです。