VTuberの歌枠などまとめサイト(あるいはWebアプリ)のデザインを一新した話。
経緯とか
井の中の蛙大海を知る。
ちょっと公開サイト見てみましたがどう見てもuisetlistの上位互換です。本当にありがとうございました。 https://t.co/ZJvbIltclj
— rutilicus (@rutilicus927) 2022年2月17日
旧デザインのものは2020年1月公開のものから多少の機能増加はあれどほぼ変わっていませんでした。当時からこのようなアプリが存在したかどうかは私のリサーチ不足もあり寡聞にして存じ上げておらず、ひとまず公開を優先する都合もありデザイン無視で公開しておりました。(私がこのようなデザインセンスが皆無というのもありましたが……)
月日は流れ。今ではそれなりの数の類似アプリもあるようで、今回こういった記事がTwitterのTLに流れてきたことからいよいよこれはヤバいぞ、ということで重い腰が上がりました。
ぶっちゃけ似たようなものを先行して作っていたこともあって色々悔しかったのもある。
やったこと
HTMLとCSSのお勉強
rutilicus.hatenablog.com
ちょうど電子書籍版が半額で購入できる時期だったため真っ先に飛びつきました。
関連コードの書き直し
1月にTypeScriptを勉強していたこともあり、旧コードのロジックで使える部分は使いつつTypeScriptでの全面的な書き直しに至りました。コード補完ができる。つよい。
当初はBabelを継続使用してTypeScriptをJavaScriptに変換していたのですが、これだとReactのimportが(参照できないのでコンパイルエラーとなるため)できず、TypeScriptの恩恵フルでを受けられないため途中で基盤をwebpackに変更しました。
改めて関連技術の列挙
フロントエンド
- TypeScript
- React
- webpack
- HTMLとCSS
