ねこものがたり

いちにちいっぽ

Next.js製の静的サイトをVercelでデプロイしてみました

作ったページ

pro-shogi-players.vercel.app

作ったサイトの画面。将棋の棋士の一覧になっている。
作ったサイトの画面。将棋の棋士の一覧になっている。

動機

Next.jsに親しみたかったのと、日本将棋連盟が公式で出している棋士系統図が数年前のもの、しかもPDFなのが不便に思っていて、タイムリーにアップデートでき且つ見やすいサイトを作りたかったからです。 最終ゴールは系統図を作ることだけど、こまめにデプロイしていきたくて、初手として簡単な棋士リストを作成したところでデプロイすることにしました。

アイテムをクリックするとその棋士日本将棋連盟棋士データベースの詳細ページへ飛ぶようにしてみました。

Vercelを初めて使った感想

Vercelというのはホスティングサービスです、という紹介が正しいのかわからないので、ドキュメントから引用してみます。

Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.

画面上からGitHub認証して、デプロイしたいディレクトリを指定し、必要な設定を画面上から入力してデプロイボタンを押すだけの超お手軽デプロイでめっちゃ簡単でした。

今の所のサイト制作の感想

Next.jsの感想としては、Next.js自体の仕組みも賢いし、やりたいことが大体何かしらのライブラリーで叶うので、開発体験が良いなと感じています。今回は使っていないけどダイナミックルーティングが好きです。

今後の展望

  1. 系統図を作りたい、つまり、棋士の情報に親子関係を持たせて、それをUIで表現したいと思っています。難しそう。先は長そうなので、今雑に全部のコンポーネントが左寄せになってるのを並べて表示できるようにする等から手をつけようと考えています。
  2. コードのの完成形が見えてきたら、練習としてコンポーネントのテストを書いていきたいです。あんまりテスト書き慣れていないので、自分の作る小さいコンポーネントでテスト書く練習をするのはいい気がしています。
  3. カスタムドメイン設定したいです。そのためにいい感じの名前を考えたいです。
  4. ページで表示している棋士情報は、Rubyで連盟のサイトをあれこれして生成したJSONをもとにしています。このJSONを、昇降段やタイトル保持者の変更などを反映できるよう、なるべくリアルタイムに自動更新できるようにしたいです。定期的(日次とか)にクローリングして、更新があれば勝手にPR作ってマージしてデプロイするような仕組みを入れて...みたいなことを考えています。やったことないけど軽くググったら似たようなことをやっている人は多そうなので多分できると思っています。