JavaScriptの勉強

[2023/07/06]

このブログのほかに更新しているサイトがあり、そこにINFINITASのMAUを集計したデータを掲載しています。

beatmaniaIIDX INFINITAS Monthly Active Users

「beatmaniaIIDX INFINITAS Monthly Active Users」は、集計したデータをJSON形式で保存してDataTablesというjQueryのプラグインを使い表示し、検索ができるようにしています。

グラフ表示はChart.jsというライブラリを使っています。

要するに表示は既存のものを使って、それ用にデータを作っているだけです。

ブラウザ上で動くものなので当たり前ですが、これらはJavaScriptを使って動いています。

JavaScript

自分は、JavaScriptの知識はあまりなくコードを見てもよくわからない。コピペしてそれっぽく修正して動いたら御の字という感じでした。

表のデータも無駄な記載が多くサイズの肥大化が気になっていました。

例えばハイパーリンクも、JSONのデータに全部書いていたので同じ記述が何度もあり無駄があった。

「["<a href=\"https://p.eagate.573.jp/game/infinitas/2/djdata/?target_infinitas_id=C000000000000\" target=\"_blank\">PLAYER NAME</a>",…]」こういうのがプレイヤーの数分（5000くらい）繰り返していた。

「C000000000000」と「PLAYER NAME」以外は全員共通なのでかなり無駄。

これを「["C000000000000","PLAYER NAME"…,]」として、表示するときにJavaScriptでリンクとして表示すればすっきりする訳です。

データ1件当たり100byteくらいの削減ができ、微々たるものと思いきやこれでもトータルで見ると500kbくらい小さくなります。

「じゃあなんでやってなかったか？」というとJavaScriptの知識が浅くできなかったんですｗ

それを今回勉強して修正しています（現在進行形）。具体的にどうやってるのかを解説するほどではないので、やってることは省略。

今のJavaScript

いろいろ調べてて思ったことは、「JavaScriptも進化してるな」です。

JavaScriptにもバージョンがあり最新だとES2022(ES13)らしい。

でも普段使っていてJavaScriptのバージョンアップ作業なんてしません。じゃあどうやって新しいバージョンが使えるようになるかというと、「ブラウザが対応する」と使えるようになるんです。

多くのブラウザは最新のバージョンにすることで、だいたいのものは動くようになるようですが"IE11"はサポートしていないものも多く「IE11だと動かない」問題があったようですね。今はIE11のサポートも終了してるのでうちみたいな個人サイトは対応しませんで終わる話ですが。

さいごに

IE11のサポートも切れて、今後のサイトはJavaScriptの新しいバージョンでできるようになったことを使ったサイトも増えてくるかもしれないですね。

そういうサイトをパク…参考にしていこう。