← Back

ぱずかるをリアーキテクチャした話

/

この度ぱずかるをリアーキテクチャしました。

ぱずかるは、私が高校 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 式と日本語式で切り替えられるような機能をつけたのですが、ここでもレイアウトシフトがないようにあらかじめ高さを確保する工夫を施しています。

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 が低かったサイトが

以前のサイトのLighthouse

ここまで劇的な改善をしました。

パズドラ経験値計算機「ぱずかる」｜2120対応パズドラ経験値計算機「ぱずかる」｜2120対応pazcal.net

トップページのLighthouse

ランク上げ周回計算機 - パズドラ経験値計算機「ぱずかる」｜2120対応ランク上げ周回計算機 - パズドラ経験値計算機「ぱずかる」｜2120対応pazcal.net

周回計算機ページのLighthouse

保守性の話

今回から@testing-library/reactを利用したコンポーネントテストを行っております。

また、デザインシステムを効率よく、かつ保守的に組むために自分がめちゃくちゃ推してるvanilla-extractをつかって型安全な Zero Runtime CSS in JS の恩恵を存分に受けています。

今とても気になっている Panda CSS でも良かったなと少し後悔しています

あとがき

ぱずかるにデータを提供してくださっているトップランカーのじゃぶおじさん様が史上初のランク 2000 に到達したそうです、本当におめでとうございます。

すごすぎますよね…自分がランク上げをやってた 5 年前、ランク 1000 になっただけで大喜びしてたのが懐かしいです。

Copy URL
Source
Share X
← 2022年を振り返って
ISUCON13に参加してきました →
Home Works Timeline Blogs