Tennis Chart(仮)というサイトを作成しました
このブログには最低月一回は更新するという隠れ努力目標があるのですが、ここ最近は記事をアップできていません。一応記事を作成している努力はしていて、例えばRustのイテレーターについての記事を書いているのですが、アップできるような精度ではないのでまだ下書きの状態です。
今回は苦し紛れの近況報告的な記事です。
Tennis Chart(仮)というサイトを作成しました。
男子プロテニス界にはBIG4と呼ばれる、歴史的に見て史上最強クラスの4人組がいる（いた）のですが、彼らがいかに突出した存在だったのかというのをチャートで表そうというサイトです。
「(仮)」とついている通りまだ完成度は30%くらいなのですが、完成までの道筋は見えていて、後はひたすら作業していくという所まで来たので晒します。
目的
大きな目的としては２つあり、Reactのチャートライブラリの学習をすること、そしてRustでバックエンドサーバー（Web APIサーバー）を構築すること、です。
一つ目のチャートライブラリに関してはRechartsを利用しています。
今は主にSimpleBarChartを利用していますが、特に躓くことなくかっこいいチャートが作成できるので感動しています。仕事でチャートを利用したサイト作成がありそうなので、その予行演習になればいいと思っています。
2つ目のRustでのバックエンドサーバーの構築ですが、目的としてはこちらが大きいです。チャートの元になるデータ（誰が何年にどの大会で優勝したか、など）をJSONで返す、いわゆるREST APIサーバーを構築しました。WebフレームワークはActix Webを利用しています。
Rust自体は昨年からちょくちょく書いていました。ずっとAtCoderの問題を解いたりしていたのですが、もっと形になるものが作りたいなーと思っていたのと、いい加減バックエンドも勉強しないといけないと思っていたのでRustを採用しました。
Rustの言語仕様を理解するにはまだまだ時間がかかりそうですが、フレームワークを利用したサーバー構築ならそこまで難しくないと感じています（今のところ）。
現状の技術スタック
完成度はまだまだ低いですが、現時点での技術スタックは以下の通りです。
フロントエンド
フロントエンドはNext.jsです。そしてデータフェッチにはTanStack Queryを使用しています。
REST APIからのデータフェッチはもちろん、ローディングの状態管理、エラーハンドリングまでこなしてくれます。データフェッチに関してはイマイチ王道的な手法がなかったと思うのですが（useEffectでデータフェッチをするのに疑問を投げかける記事があったり）、Tanstack Queryが次の主力になりそうな予感なので早めに慣れておく方がよさそうです。
バックエンド
肝心のバックエンドですが、今はRenderというウェブホスティングのサービスにてサーバーを立てています。
最初はAWS Lambdaに乗せようと思ったのですが、1時間やって上手くいかなかったのでRenderに切り替えました（諦めの良さと切り替えの速さが長所😳）。GitHubのリポジトリと連携させるだけで、本当に何もせず簡単にAPIサーバーが公開できてしまいました。でもやっぱりAWSに乗せたいので、サイトが完成してから移行するかもしれません。
なお、開発中ということもあり、Renderのインスタンスは無料プランを利用しています。無料インスタンスは15分アクセスがないとアイドル状態になってしまいます。例えばここにアクセスすると最初は「データ取得中」というメッセージが表示されると思います。
インスタンス起動まで1~2分ほどかかりますので、すみませんがそのままお待ちください。データが取得できれば自動でチャートが表示されます。ちなみに、「データ取得中」という表示や、データを取得できた時の再レンダリングはTanstack Queryが上手いことやってくれています。図らずもその有用性が分かる形になっていますね。
データベース
チャートの元になるデータは当然何らかのデータベースに置くわけですが、まだテーブル設計も何も出来ていないので、現状はActix Web上でデータをVec型のデータで置いていてそれをJSONで返しています（このように、夜なべしてデータを一つ一つ用意しました）。
ただ、ローカルではDockerでPostgreSQLを用意し、そこからデータ取得できることは確認しています。データベースとの連携も簡単で、私はsqlxというライブラリを利用しました。データベースが用意できれば、そのURLを渡すだけでデータ取得できるところまでは用意できています。
実はRenderはPostgreSQLのサービスも提供しているようで、$7でデータベースを一つ利用できます。お手軽なのでこれを利用しようかと考えています。
PostgreSQL | Render · Cloud Hosting for Developers
というわけで現在の完成度は30%くらいな訳です。特にデータベースに関してはまだまだこれからですね。これからの開発ロードマップとしては、
- どのようなチャートを用意するかを決定する
- テーブル設計
- DBサーバーを構築する(AWS? Render?)
- AWSにActix Webを移行する
という感じで見積もっています。今までデータベース設計からは逃げてきたので、ここが一番苦労しそうです。
感想
Rustでのバックエンド開発、データベースとの連携、Webへのデプロイなど、Rustに関する全てが初めてだったので不安でしたが、ひとまず骨組みは出来たので安心しました。Rustでバックエンド開発ができそうで嬉しいです。
ちなみにYewというRustのフレームワークでフロントエンド開発もしています。Tennis ChartのフロントエンドもYewにしようかと考えましたが、まだ自分には重そうなのでやめておきました。まずベタだけどTodoアプリとかからですね。
参考
更新履歴
- 2023年6月21日 : 誤字脱字を修正。