Vue.jsで地力表を表示してみた
[2024/07/11]
昨日、Vue.jsって便利だなっていう記事を書きましたが、そこでは使わなかったv-forを使ってみたくて使えそうなものを考えてみた。
地力表 with Vue.js
IIDXでは公式で決められた難易度のほかに地力と呼ばれる「ユーザーが意見を出し合って決めた難易度」があります。
Googleスプレッドシートで見ることができるんですが、曲が増えてきたこともあり見づらくなってきている。
さらにwikiとかツールとかでまとめている人もいるんですが、自分も似たように一覧を表示するツールを作ってみました。
データ自体はスプシからウェブスクレイピングで引っこ抜きJSON形式に変換。
それをJavaScriptで読み込み、Vue.jsを使って一覧表示や、ソート切替、曲名での検索を実装しました。
Vue.jsって自動でやってくれる部分もありますが、ソートするための並び替えをしたり、曲名で検索したりという処理はJavaScriptで自分で書かないといけない。
（DataTablesのような特化したライブラリではなく、Vue.jsはフレームワークなので計算するような処理は自分で書かないといけない）
その辺りの処理を考えるのにChatGPTをあわせて使い作りました。
自分がVue.jsの初心者で書き方がわからない部分が多いので、ChatGPTにコードを書いてもらいそれを読むという方法で学習もあわせてできるという寸法。
v-forの繰り返しをすることで、曲リストなどを表示するのは簡単にできます。
でも表以外で表示するときは便利だけど、表にするのであればDataTablesなどを使った方が便利かなとも思った。
今回は曲名だけで、表形式にしない地力表を表示してみました。
レイアウト
レイアウトについても今までやってこなかった手法を使ってみた。
レスポンシブにするのに「display: grid」を使って横並びにしています。
横に並べる個数とか幅とかの設定が簡単にできて、これならBootstrapのようなものを使わなくてもいいくらい便利。
また、スクロールした時に上に張り付く「position: sticky」も使ってみた。縦に長くなった時に見やすくなるはず。
さいごに
ボタンを押したときに、値の取得や再計算、結果の表示というものを書かなくていいのはやっぱり便利。
Vue.jsを使わないと作れないということはないですが、使った方が楽だなとは思った。