Jリーグが毎年発表しているクラブ経営情報を横断的・縦断的に閲覧できる「Jクラブ経営情報ポータル」というサイトを制作していますが、このたび全面的に再構築しました。コンテンツそのものは大きく変化していませんが、裏側は大きく変わっています。

再構築した理由は2つあります。

1つ目は、旧サイトで使用していた Gatsby というフレームワークが、2023年以降、実質的に開発が停止していること。2つ目は未解決の問題ではありますが、シーズン移行後の決算発表に備えることです。

Gatsby is DEAD

旧サイトで使用していた Gatsby は、React ベースの SSG（Static Site Generator）フレームワークです。

Gatsby が開発チームごと Netlify に買収された2023年2月以降、それまで活発だった開発は途端にストップしました。RSC（React Server Components）に対応する Partial Hydration の機能がベータ版のまま3年以上経過するなど、もはや将来性のあるフレームワークとは言い難い状況です。

Gatsby は今でも普通に使われていますが（ちなみにバイエルン・ミュンヘンの Web サイトは Gatsby 製です）、持続可能性の観点から、遅かれ早かれ再構築する必要性は感じていました。

シーズン移行にどう備える？

こうしたフレームワークの問題に加えて、今年2026年に行われる Jリーグのシーズン移行への対応もあります。

シーズン移行に伴い、各クラブの決算期も移行することがほぼ確実です。全クラブが25年度、26年度（半年）、26/27年度と足並みを揃えていればまだ楽なのですが、昨年25年度を半年に設定した岡山や、25年度と26年前半を一事業年度とした札幌など、決算期の移行はクラブによってバラバラです。正直なところ、今後1〜2年の発表形式がどのような形になるのか、全く想像できません。

この件に関しては未解決の問題ですが、これまで以上にデータを扱いやすくする必要性はありました。

開発について

では、具体的にどのように再構築したのか、ざっくりと説明します。

1点目は、プロジェクト構造の再編です。旧サイトでは Gatsby 単体のプロジェクトとして制作していましたが、今回は Monorepo で構成しています。データ部分をパッケージとして扱い、ビルドしたパッケージを App 内でインポートする仕組みにしました。詳細は別記事で説明する予定です。

2点目は、使用しているフレームワークなどの変更です。Gatsby から Next.js に変更し、UI にはヘッドレス UI ライブラリの Ark UI を使用、スタイリングはデジタル庁デザインシステムをベースに Panda CSS で行っています。

デジタル庁デザインシステムを Panda CSS で実装した例がちょうど存在した ので、使ってみることにしました。

今後導入したい機能

記事を自動生成したい

サイト内で掲載している記事は ChatGPT で校正を行っています。決算の記事などは自動で生成できると理想的ですが、試しに生成してみても、自分の感覚とは異なる内容になってしまうため、今のところは校正のみに留めています。

REST API を作成

現在、経営情報のデータを CSV や JSON 形式でダウンロードできるページを用意していますが、REST API でデータを取得できる機能も、いずれ搭載する予定です。

現時点では、サイトをサーバレスな環境（GitHub Pages）に置いているため、サーバの存在を前提とする API を提供することはできません。ただ、Next.js と Vercel の組み合わせで API を作成できるようなので、別途 API 用のサイトも作成するつもりです。

Jクラブ経営情報のデータは、NPM 経由でダウンロードできるようにしました（ただし、ドキュメントの整備はまだです）。
データは単にサイト内で表示するだけではなく、利用したい人が簡単に活用できる仕組みを提供できればいいなと思っています。

テレビパン / olo監督作品 (2014)

あなたもロボットになれる feat. かもめ児童合唱団 / 坂本慎太郎 (2014)

ルサンチマンのテーマ / ゆうやけしはす (2022)