パズドラ練習アプリは2017/11月に作成した後ほったらかしにしていたのですが、パズドラで実施した大量の魔法石配布のおかげで奇跡的にゼラが当たり、2色陣の練習がしたいということで今回機能追加を行いました。
Onsen UIや勉強中のVue.jsを使って作り直してみたかったのですが、すでにjQueryを使いまくっていたこととWordPress上なので構成をシンプルにしたいということ、そしてできるだけ時間をかけたくなかったこととソースコードをみて眩暈がしたということで、今回はそのままjQueryとjQuery UIを使って作成しました。
jQueryはひさしぶりだったのですが、クラスセレクタや子孫セレクタ、FadeTo()などのアニメーション関連メソッドの便利さを実感しました。例えば、$( ‘#panel th’ ).removeClass( ‘selected’ ); や $(‘#panel th’).on(‘click’, function() {…}); といった短い記述で複数の要素を扱うことができます。JavaScriptだけで書くとdocument.querySelectorAll()の戻り値をforEach()のコールバックで処理する感じでしょうか。jQueryのシンプルな記述方法はいまだ魅力的に思います。
今回作成したパズドラ練習アプリは本記事の上部にあるリンク先、または倉庫 – パスドラ練習アプリにあります。