概要
A列車で行こう はじまる観光計画(steam)用にダイヤグラムを作成するwebアプリを作ってみました。
ご利用はこちらからどうぞ❗
ソースコードはgithubで。
主要Techは下記の通り。
スクショは以下。バージョンうｐ前なので、ちょっと見た目が違うのはご容赦。
モチベ
TLDR: はじまるA列車専用のダイヤ作成ソフトが欲しい。
A列車で行こう、楽しいよね❗
このゲーム最大の特徴は、ダイヤを細かく設定できることだと思ってます(他の都市開発ゲーではできないものが多い)。
そこで、ダイヤグラム作成ソフトがあると便利。
既存のダイヤグラム作成ソフトについてはカメロング氏のウェブサイトが詳しいです。
なかでも一番有名なのはOuDia(ないしはOuDiaSecond)でしょう。
OuDiaは素晴らしいソフトですが、個人的に以下が気に入らないです。
- 繰り返し回数設定がない
- 多機能すぎてどこをいじれば良いか分かりづらい
- (古い、古すぎる...)
- いや2017年にも更新されてるからそこまででもないんだけど。
1番の繰り返し設定とは、おそらくはじまるA列車特有の概念です。
はじまるA列車では、上りと下りの1周分の時刻設定をしたあと、それを何回繰り返すのかを指定できます。
(逆に言うと、2周目以降を違う経路にしたりはできない。)
で、OuDiaにはこの概念がないので、繰り返し設定する場合は手動で時刻設定をコピペする必要があります。
これが忘れるのなんの...😭
忘れた状態で別のダイヤを数時間いじくり回して、いざゲーム側で設定すると...列車が衝突😇
そうなると修正にまた数時間かかるわけです。やってられん❗
ということで、手動コピペの必要がないダイヤ設定アプリが欲しかったわけですね。
技術
Q: 「Viteどう❓」
早い。ヤバイ。
Q: 「Reactどう❓」
強い。ヤバイ。
本アプリみたいに、入力欄だらけでそれがリアルタイムで反映されるようなアプリには最適。
生のJSだけでやってたら絶対完成しなかったと思う。
ただ、難しさも当然ある。
最初はLifting State Upも知らずに作ったので、同一要素を複数の状態で管理して、バグだらけだった...。
修正する際はほぼフル書き直し。
状態設計は最初にきちんとやらないとマズイ。
他にもColocationとかいうのも学ぶ必要があるらしい。
これはまだ理解してない。だれか教えて。
Q: 「Chart.jsどう❓」
楽しい。柔軟性が高い。
本アプリみたいに、x軸が時刻で、y軸が駅名、みたいなグラフを作れるのは強い。
ただ、ちょっとパフォーマンスが心配かな。
繰り返しを10ぐらいにするとちょっとガクついた。
本格的にダイヤを組む人には辛いかも。要改善。
Q: 「Tailwind CSSどう❓」
う〜ん❓
便利っぽいんだけど、結局生のCSS書いてるのと変わらん部分もあった。
Flowbiteくんは便利だけどさ。
余談
- ❌: 「ダイアグラム」
- ⭕: 「ダイヤグラム」
らしい。鉄道的には。
あとがき
ご意見ご要望、歓迎です。
近くにA列車プレーヤがいたら宣伝してくれると幸いです。