TOKYO IDOL FESTIVAL のタイムテーブル画像化ツール 2018

TypeScript

2年前に作り始めたのがきっかけで、今年もTIFのタイムテーブルが公開されたので作ってみた。

memo.sugyan.com

2016年は画像を生成するだけであとはそれを自分で保存して勝手に使ってくれ、くらいの感じだったけど、

2017年では生成した画像と生成後のURLをTwitterでシェアできる機能を追加し、わりと多くの方々に使っていただけた。 出演者さんがブログで紹介してくれたりしたのも良い思い出。

今年も自分はTIF行かないし 作るモチベーションもあまり無かったけど、多少は需要ありそうだし一応作るか… と

データの取得とUIの細かい部分だけ変更すれば昨年の使い回しでも良かったのだけど、折角だから色々アップデートしておくか、とほぼイチから作り直してみた。

  • Rails 5.1 → 5.2
  • Webpack 3.2 → 4.16
  • Bootstrap 3.3 → 4.1
  • JS → TypeScript化

バックエンドはほぼ変更なしで問題なかったけど、フロントエンドをTS化するのは思った以上に大変だった。 元々の.jsxを.tsxにリネームして : any とかつけていけば何とかなるやろ〜 と気軽に始めてみたら全然うまく動かなかったり やっぱりちゃんと型を書かないと気が済まなくなったりして、 結局8割くらい書き直した感じになった気がする。3日ほどかかってしまった。 でもおかげで幾らか？見通しも良くなったし、スッキリした、と思う。

フロントエンドは相変わらず色々と変化はあるけど以前より使いやすくなって整理されてきているとは思うし TypeScriptも大変だけど「ちゃんとcompile通るように書けばちゃんと動く」という感覚はあって嫌いじゃない。 Bootstarp 4もほぼ始めて触ったけど割と融通ききやすくなっていて悪くない印象だった。