読者です 読者をやめる 読者になる 読者になる

詩と創作・思索のひろば

ドキドキギュンギュンダイアリーです!!!

ポケモンのタイプ相性を確認できるウェブアプリケーションを作りました

JavaScript AngularJS

久しぶりにポケモンをプレイしてみたらタイプがだいぶ増えていた。相手のタイプはなんとなく分かるんだけど手元のポケモンから何を出したらいいか分からない……。何このフェアリーって? そんなオッサンのためのウェブアプリケーションを作りました。1 ページの HTML に JS で実装されてるだけですが。

ポケモンタイプ相性チェッカ(XY対応)

上部で相手ポケモンのタイプを選ぶと、こちらの攻撃にどんなタイプのわざを繰り出すと効果的かが確認できる。データはせっせと行列を書いたのでたぶん合ってると思うけど間違ってたら教えてください。スマホンでも見られるようにしているので、ブックマークしておくと便利。

勉強がてら AngularJS で書いてみた。最初はかなり素朴に書いていて、スコープの値をもとに相性を計算する function をスコープに持たせて、その呼び出しを expression として HTML に埋め込んでた……といっても分かりづらいので小さな再現例を挙げると(これは入力の数値にあわせて object を増減させる例):

https://gist.github.com/8884912

これであー動く簡単簡単って思ったけど、コンソールを開いてみたら "10 $digest() iterations reached. Aborting!" ってエラーが出ている。AngularJS: What are Scopes? に詳しいけれど、ユーザからの入力によりスコープに $digest の再計算が促され、それで計算結果(この例だと gen())が変化するので、また $digest がおこなわれ……と収束しない状態になってるみたいだった(ちなみに gen() の結果がオブジェクトでなくプリミティブな値だと収束する)。

よくわからなかったので同僚に聞いてみたところ、こういう場合は $watch を使ってやると:

https://gist.github.com/8884912

こうすると計算結果がスコープの $digest を引き起こさないので、思ったとおりに動くっぽい。AngularJS 的なセオリーはどうなのか、まだわかってないです。

ポケットモンスター X

ポケットモンスター X

ポケットモンスター Y

ポケットモンスター Y