野球リーグスコア管理システムの開発

2019-01-13に作成

image
野球リーグスコア管理システムに関する進捗です。

使っている技術など

  • NodeJS
  • ReactJS
  • netlify
  • MySQL
  • materializecss
  • react-bootstrap
  • react-bootstrap-table-next

旧システムについてはこちらの記事をご覧ください。

残りタスクリスト

trello

所有者限定モードのためこのボードには投稿できません ボードとは?

チーム成績登録API実装完了

チーム成績登録API実装完了

node-mysql2が数値を文字列として返してくる

おかげでtoFixed()とかコケます。parseFloat(文字列を小数にパースするメソッド)とか間に挟みました。

undef判定はちゃんと書きましょう

undefの判定に! valueって書いてたらvalue0で躓きましたw

テーブルの大文字小文字に注意しましょう

今回からdockerコンテナを使い始めたのですが、小文字のテーブルを大文字でSQL書くと認識しません。やっぱりlinuxですね。

エンドポイント調整

複数リーグ対応のためにUIからAPIに渡すパラメータなどを増やす必要があるので調整。

サンプルデータ投入しながらデバッグ

関東キャップリーグさんの試合データが公開されているので入力していきます。
1カード分探しても見つからなかったのですが。

シーズンスタッツ

image

日別試合結果一覧

image

試合結果詳細

image

2/27進捗

概要

image

昼休み開発

サーバサイドは夜に差し替え。
夜は運営者ギルドでのKoretteさんのレビュー会に参加。

選手ページの打撃成績に出塁率・長打率・OPSを表示するよう修正

  • スマホ版(375px未満)は非表示

選手一覧API

  • 名前を昇順にソートする(全件表示・検索結果)

2/14-15進捗

概要

image

  • 選手一覧(UI)
  • 選手一覧(API)

選手一覧

現在右上メニューバー内から遷移できます。

UI

チームの一覧と所属選手一覧を実装しました。materializeのchipsを使用しています。それから、チーム名・選手名検索ができるフォームの実装をしました。今回は所属チームごとの表示の振り分けをクライアント側で行うようにしました。チームの一覧を最近試合を行った順に並び替えできていないのが課題です。

API

フォームに何も入力されていないときは選手一覧を返すようにして、
入力された場合はAPIに検索結果を取りに行く方式にしています。
フォームがクリアされるとまた選手一覧を取得します。

1/27進捗

全期間通算成績

現在入力している全てのシーズンのデータから通算成績を取得する処理を実装しました。
image
react側は旧システムAPIであらかじめ作っていたのもあって、
これにはそんなに時間がかかりませんでした。

本日から新シーズン始動

本日、2019年度前期シーズン開幕戦でした。
現行のReact/NodeJS/Netlifyのシステムでは初めての本格運用が始まります。

スコア入力

スコアの速報を入力していたのですがサーバサイド側で打率が0のときに打撃十傑から除く処理が抜けていたことに気づいてスコア入力を中断してシステムの修正を行うなど。

昨日の進捗

ReactでOGP対応した

打率分布バブルチャート実装

1/13

打率分布バブルチャートを実装しました。

image

横軸を打席数(四球含む)、縦軸を打率として、
打席数―打率の相関グラフを描画するよう実装しました。
赤枠は規定打席以上ですが、chart.jsでは描画していません。

新APIへの移行作業

image
これまでバックエンドをJavaで書いていましたが、JavaからNodeJSへ移行中です。

  • 打率順位算出バグ修正
  • 空だったチーム順位算出ロジック実装
  • API変更で動作していなかった打撃成績・投球成績の合計行を動作するよう修正
  • 期毎打撃成績内訳実装