この記事は「個人開発サービスに用いられている技術 Advent Calendar 2018」8日目の記事です。昨日はHirozさんの「Koretteのオモテとウラ」という記事でした。
今回は個人で開発している野球リーグスコア管理システムの現行の技術と開発中システムの技術について触れようと思います。

野球リーグスコア管理システム(旧)について

※旧システムは2018年12月で新システムへと移行しました。

日本カラーボール野球連盟に選手成績の速報を提供しているCMSです。
2015年6月から開発・運用・新機能追加などを行っています。

機能紹介

シーズン成績ページ(2015/07/02～)

野球リーグの公式ページからフレームの中で呼び出されるページです。
チーム順位以外は上位10位までを表示する仕様です。

• チーム順位
• 個人打撃部門
  • 打率
  • 安打数
  • HR
  • 打点
• 個人投手部門
  • 防御率
  • 勝利数
  • セーブ
  • 奪三振数
• 個人ノンタイトル部門
  • 出塁率
  • 最多二塁打
  • 長打率
  • 最多四球
  • OPS

選手個人ページ(2015/07/22～)

- 選手紹介(所属チーム、獲得タイトル概要など)
- 打撃成績(期毎、対球団別)
- 投球成績(期毎、対球団別)
- 上記をグラフにしたもの
グラフはhighchartsを使って実装しています。

チームページ(2018/10/08～)

- シーズンごとの通算成績
- 直近の勝敗結果
- チームメンバー通算打撃成績
- チームメンバー通算投球成績

統計ページ

シーズンごと、チーム別の参加者推移グラフをhighchartsを使って実装しています。

全期間通算成績ページ

リーグ自体は2004年から開催されており、成績データは2010年～2018年まで入力されています。レイアウトはシーズン成績ページと同じです。

継続参加者成績ページ

直近2年間に参加している参加者の成績一覧を表示します。
レイアウトはシーズン成績ページと同じです。

slack/pushbullet(push通知)連携

slackとpushbulletというアプリベースのpush通知機能があります。
- 長期天気予報取得
- 日程調整

野球リーグスコア管理システムで用いている技術

バックエンド(旧)

• 言語:Java 8
• FW: SAStruts(運用続けている間にEOLになりましたorz)
• DB: MySQL 5.7
• APサーバ：Tomcat
• WEBサーバ: Nginx

フロントエンド(旧)

基本ベースは未だにJSPとなっていますが、
バックエンドのAPI化とクライアントレンダリングを進めており、ajax+datatablesで動的に生成しています。
jQuery/materialize/datatables
フォントはNoto Sans Japaneseをメインに、数字部分を Robotoフォントにしています。

ここまでが現行のシステムとなります。実際に試合後にデータを入力すると成績に反映される仕組みになっています。
ただ、SAStrutsはEOLな技術になっているため、現在モダンな開発環境でリニューアル中です。
ここからは開発中のシステムについての話になります。

野球リーグスコア管理システム(現行)について

バックエンド(現行)

• TypeScript/NodeJS/Express
• DB: MySQL 5.7

フロントエンド(現行)

デザインは引き続きmaterializeをベースに、コンポーネントは使い勝手のよいreact-bootstrapを使用しています。
- ReactJS
使用しているコンポーネント・ライブラリ
- react-bootstrap
- react-bootstrap-table-next
- chart.js
- materialize
- Netlify

現行にしかない機能

旧システムにはないこれらの機能を実装しています。
新機能は思いついたところから実装していっています。

打率分布グラフ

リーグも長く運営されており、きれいな正規分布とはいかないまでもそれなりのデータが蓄積されています。

各選手能力チャート

標準偏差を求める処理が若干重いのが難点ですが、選手の特徴を文章よりも雄弁に語ってくれます。

課題

APIのレスポンスが遅い

低スペックのサーバを使っているため、APIの応答が約1秒かかっています。これはサーバの載せ替えを考えています。

デザインセンスがない

業務システムの経験が長かったのでUIのセンスが壊滅的です。
UIは未だに試行錯誤中です。

テストコードを書いていなかった

基本人力テストです(笑)
最近ようやくJest使い始めたのでテストコード書こう...。

ページが多い

前述のUIの話になるのですが、ページ数が多いのでどういうメニューにして導線をどうするか…という点です。要検討。

まとめ

この記事をレビューしていただいたnabettuさんに感謝を。
現行システムがEOLの技術を使っているので、なるべく早く移行したいとは思っていますが、ロジックが多い＆最適化できていない上にソースの量が多くてなかなか開発が進まない状況です。
ついつい現行システムに新しい機能を追加して移行のための開発を後回しにしてしまったり...。（エンジニアあるある？)
野球リーグの広報も兼任していて試合の動画作ったりもしているので、ただでさえ土日しか開発できないのに時間が足りなくて辛い。

おわりに

明日は839さんの記事です！お楽しみに。