ポケモン自己分析(Pokémon Self-analysis)とは、16個の質問に答えることでどのポケモンの要素を持つ人材になるか診断してくれると言う面白いコンテンツです。（まだ遊んでない方は遊んで見てください！！ちなみに僕はイーブイ(eevee)でした。）

自分も含め、周りの人の結果を見ていても「大体」当たっており、どういう分析を行なっているのか気になったので、ポケモン自己分析を分析してみました。

htmlの中身を見る。

まずはhtml(https://www.pokemon.co.jp/corporate/job/pokemoncenter/special/question/)の中身を開発者ツールで覗きます。

すると、質問の度にページ遷移することなく、JavaScript(https://www.pokemon.co.jp/corporate/job/pokemoncenter/assets/js/common.js) で要素の書き換えを行なっていることがわかりました。

また、質問を答えるボタンには以下の class が割り当てられており、これは問題番号に依存していませんでした。

<div class="answers">
  <button class="answer-yes" id="yes">はい</button>
  <button class="answer-no" id="no">いいえ</button>
  <button class="answer-neither-yes" id="neither-yes">どちらかといえばはい</button>
  <button class="answer-neither-no" id="neither-no">どちらかといえばいいえ</button>
</div>

jsの中身を見る。

問題文

先ほど特定した JavaScript の中身を見たところ、まず問題文が見つかりました。

{
  A: {quest: ["データや　すうじを　みることが　すき。", "じぜんの　じゅんびは　しっかりする。", "おおざっぱな　ひとを　みると　イライラする。", "ふかく　かんがえることが　すきだと　おもう。"]},
  B: {quest: ["かんがえる　より　さきに　こうどう　する。", "けつろん　から　はなす　ほうが　すき。", "つめたいと　いわれることが　よくある。", "ムダな　ことが　きらい。"]},
  C: {quest: ["じぶんは　うけみ　スタンスだ。", "ひとの　ためになる　ことであれば　なんでもできる。", "ひとから　やさしいと　いわれる　ことが　よくある。", "いつも　そのばの　くうきを　よんで　こうどうする。"]},
  D: {quest: ["しょたいめんでも　せっきょくてきに　はなしかける。", "いつのまにか　はなしの　ちゅうしんに　なっている。", "ひとから　あかるいね　と　いわれる。", "おもった　ことが　かおに　よくでる。"]}
}

どうやら、質問にはA~Dのグループが分けられており、それぞれ4種類の問題文があるようです。

解答ボタンに対する処理

続いて、ボタンに対する処理を見つけました。

必要な部分だけ取り出すために少しプログラムを書き換えていますが、内容は同じです。

if ((e.currentTarget).hasClass("answer-yes")) s[n[r]] += 3;
else if ((e.currentTarget).hasClass("answer-neither-yes")) s[n[r]] += 2;
else if ((e.currentTarget).hasClass("answer-neither-no")) s[n[r]] += 1;
else ((e.currentTarget).hasClass("answer-no")) s[n[r]] += 0;

「はい」に近いほど点数が高く「いいえ」に近いほど点数が低いようです。

この点数を、先ほどのグループごとに足し合わせているようです。（s[n[r]]は各グループの得点を意味。）つまり、同じグループの問題は（広義）同じことを聞いている問題であったと言うことです。

得点に対する処理

その後、得点を0~4に圧縮しています。以下の関数がこの役割を担います。

function u(e) {
  return e <= 3 ? 1 : e <= 7 ? 2 : e <= 10 ? 3 : e <= 12 ? 4 : void 0
}

ここまでで、グループAの圧縮された得点(1-4),..,グループDの圧縮された得点(1-4)が求められます。

得点をポケモンと結びつける

var e = f.default["A".concat(u(s.A), "B").concat(u(s.B), "C").concat(u(s.C), "D").concat(u(s.D))].name;
location.href = "../result/".concat(p.default[e], ".html");

ここでは、各種グループ記号（Aなど）と圧縮された得点（u(s.A)など）を連結して、文字列を作っています。（A1B1C1D1などができる。）

これを、ポケモンに対応させます。これは非常に単純で、コード内に対応関係が書いてありました。

js t.exports = { A1B1C1D1: { name: "コイキング" }, A1B1C1D2: { name: "コイキング" }, A1B1C1D3: { name: "カビゴン" }, A1B1C1D4: { name: "ラッキー" }, A1B1C2D1: { name: "コイキング" }, A1B1C2D2: { name: "コダック" }, A1B1C2D3: { name: "カイリュー" }, A1B1C2D4: { name: "ラッキー" }, A1B1C3D1: { name: "コダック" }, A1B1C3D2: { name: "コダック" }, A1B1C3D3: { name: "カイリュー" }, A1B1C3D4: { name: "ラッキー" }, A1B1C4D1: { name: "ラッキー" }, A1B1C4D2: { name: "ラプラス" }, A1B1C4D3: { name: "ラプラス" }, A1B1C4D4: { name: "ラッキー" }, A1B2C1D1: { name: "コイキング" }, A1B2C1D2: { name: "コイキング" }, A1B2C1D3: { name: "カイリュー" }, A1B2C1D4: { name: "カイリュー" }, A1B2C2D1: { name: "フーディン" }, A1B2C2D2: { name: "コイキング" }, A1B2C2D3: { name: "カイリュー" }, A1B2C2D4: { name: "ラッキー" }, A1B2C3D1: { name: "ディグダ" }, A1B2C3D2: { name: "コダック" }, A1B2C3D3: { name: "ディグダ" }, A1B2C3D4: { name: "ラッキー" }, A1B2C4D1: { name: "ポリゴン" }, A1B2C4D2: { name: "ディグダ" }, A1B2C4D3: { name: "ラプラス" }, A1B2C4D4: { name: "ポリゴン" }, A1B3C1D1: { name: "カイリキー" }, A1B3C1D2: { name: "カイリキー" }, A1B3C1D3: { name: "メタモン" }, A1B3C1D4: { name: "カビゴン" }, A1B3C2D1: { name: "カイリキー" }, A1B3C2D2: { name: "カイリキー" }, A1B3C2D3: { name: "コダック" }, A1B3C2D4: { name: "ラッキー" }, A1B3C3D1: { name: "ディグダ" }, A1B3C3D2: { name: "ディグダ" }, A1B3C3D3: { name: "ディグダ" }, A1B3C3D4: { name: "ラッキー" }, A1B3C4D1: { name: "ポリゴン" }, A1B3C4D2: { name: "ポリゴン" }, A1B3C4D3: { name: "ポリゴン" }, A1B3C4D4: { name: "ラプラス" }, A1B4C1D1: { name: "スピアー" }, A1B4C1D2: { name: "カイリキー" }, A1B4C1D3: { name: "カイリキー" }, A1B4C1D4: { name: "イーブイ" }, A1B4C2D1: { name: "スピアー" }, A1B4C2D2: { name: "スピアー" }, A1B4C2D3: { name: "スピアー" }, A1B4C2D4: { name: "コダック" }, A1B4C3D1: { name: "スピアー" }, A1B4C3D2: { name: "スピアー" }, A1B4C3D3: { name: "スピアー" }, A1B4C3D4: { name: "ディグダ" }, A1B4C4D1: { name: "スピアー" }, A1B4C4D2: { name: "ポリゴン" }, A1B4C4D3: { name: "ラプラス" }, A1B4C4D4: { name: "ラプラス" }, A2B1C1D1: { name: "コイキング" }, A2B1C1D2: { name: "ニャース" }, A2B1C1D3: { name: "カビゴン" }, A2B1C1D4: { name: "ピッピ" }, A2B1C2D1: { name: "コイキング" }, A2B1C2D2: { name: "コイキング" }, A2B1C2D3: { name: "カイリュー" }, A2B1C2D4: { name: "カビゴン" }, A2B1C3D1: { name: "ディグダ" }, A2B1C3D2: { name: "コダック" }, A2B1C3D3: { name: "カイリュー" }, A2B1C3D4: { name: "ラッキー" }, A2B1C4D1: { name: "ポリゴン" }, A2B1C4D2: { name: "ラプラス" }, A2B1C4D3: { name: "ラプラス" }, A2B1C4D4: { name: "ラッキー" }, A2B2C1D1: { name: "マルマイン" }, A2B2C1D2: { name: "コイキング" }, A2B2C1D3: { name: "カビゴン" }, A2B2C1D4: { name: "ピッピ" }, A2B2C2D1: { name: "コイキング" }, A2B2C2D2: { name: "メタモン" }, A2B2C2D3: { name: "カイリュー" }, A2B2C2D4: { name: "ピッピ" }, A2B2C3D1: { name: "ディグダ" }, A2B2C3D2: { name: "ディグダ" }, A2B2C3D3: { name: "コダック" }, A2B2C3D4: { name: "ラッキー" }, A2B2C4D1: { name: "ポリゴン" }, A2B2C4D2: { name: "ラプラス" }, A2B2C4D3: { name: "ラプラス" }, A2B2C4D4: { name: "カビゴン" }, A2B3C1D1: { name: "フーディン" }, A2B3C1D2: { name: "カイリキー" }, A2B3C1D3: { name: "マルマイン" }, A2B3C1D4: { name: "ピッピ" }, A2B3C2D1: { name: "フーディン" }, A2B3C2D2: { name: "カイリキー" }, A2B3C2D3: { name: "メタモン" }, A2B3C2D4: { name: "カビゴン" }, A2B3C3D1: { name: "カイリキー" }, A2B3C3D2: { name: "フーディン" }, A2B3C3D3: { name: "ディグダ" }, A2B3C3D4: { name: "ラッキー" }, A2B3C4D1: { name: "ポリゴン" }, A2B3C4D2: { name: "ポリゴン" }, A2B3C4D3: { name: "コダック" }, A2B3C4D4: { name: "ラプラス" }, A2B4C1D1: { name: "リザードン" }, A2B4C1D2: { name: "リザードン" }, A2B4C1D3: { name: "リザードン" }, A2B4C1D4: { name: "マルマイン" }, A2B4C2D1: { name: "フーディン" }, A2B4C2D2: { name: "リザードン" }, A2B4C2D3: { name: "フーディン" }, A2B4C2D4: { name: "イーブイ" }, A2B4C3D1: { name: "スピアー" }, A2B4C3D2: { name: "スピアー" }, A2B4C3D3: { name: "スピアー" }, A2B4C3D4: { name: "コダック" }, A2B4C4D1: { name: "スピアー" }, A2B4C4D2: { name: "ポリゴン" }, A2B4C4D3: { name: "ポリゴン" }, A2B4C4D4: { name: "ポリゴン" }, A3B1C1D1: { name: "マルマイン" }, A3B1C1D2: { name: "ニャース" }, A3B1C1D3: { name: "ニャース" }, A3B1C1D4: { name: "ピッピ" }, A3B1C2D1: { name: "ニャース" }, A3B1C2D2: { name: "ニャース" }, A3B1C2D3: { name: "カイリュー" }, A3B1C2D4: { name: "ピッピ" }, A3B1C3D1: { name: "メタモン" }, A3B1C3D2: { name: "カイリュー" }, A3B1C3D3: { name: "カビゴン" }, A3B1C3D4: { name: "カイリュー" }, A3B1C4D1: { name: "ディグダ" }, A3B1C4D2: { name: "ラプラス" }, A3B1C4D3: { name: "ラプラス" }, A3B1C4D4: { name: "ラッキー" }, A3B2C1D1: { name: "マルマイン" }, A3B2C1D2: { name: "ニャース" }, A3B2C1D3: { name: "ニャース" }, A3B2C1D4: { name: "ピッピ" }, A3B2C2D1: { name: "ニャース" }, A3B2C2D2: { name: "マルマイン" }, A3B2C2D3: { name: "ニャース" }, A3B2C2D4: { name: "ピッピ" }, A3B2C3D1: { name: "カイリキー" }, A3B2C3D2: { name: "メタモン" }, A3B2C3D3: { name: "カイリュー" }, A3B2C3D4: { name: "カイリュー" }, A3B2C4D1: { name: "ディグダ" }, A3B2C4D2: { name: "コダック" }, A3B2C4D3: { name: "ラプラス" }, A3B2C4D4: { name: "カビゴン" }, A3B3C1D1: { name: "マルマイン" }, A3B3C1D2: { name: "ニャース" }, A3B3C1D3: { name: "フーディン" }, A3B3C1D4: { name: "ピッピ" }, A3B3C2D1: { name: "フーディン" }, A3B3C2D2: { name: "マルマイン" }, A3B3C2D3: { name: "マルマイン" }, A3B3C2D4: { name: "ピッピ" }, A3B3C3D1: { name: "カイリキー" }, A3B3C3D2: { name: "フーディン" }, A3B3C3D3: { name: "イーブイ" }, A3B3C3D4: { name: "カビゴン" }, A3B3C4D1: { name: "ポリゴン" }, A3B3C4D2: { name: "ポリゴン" }, A3B3C4D3: { name: "コダック" }, A3B3C4D4: { name: "コダック" }, A3B4C1D1: { name: "リザードン" }, A3B4C1D2: { name: "リザードン" }, A3B4C1D3: { name: "リザードン" }, A3B4C1D4: { name: "ニャース" }, A3B4C2D1: { name: "リザードン" }, A3B4C2D2: { name: "リザードン" }, A3B4C2D3: { name: "リザードン" }, A3B4C2D4: { name: "ニャース" }, A3B4C3D1: { name: "スピアー" }, A3B4C3D2: { name: "フーディン" }, A3B4C3D3: { name: "カイリキー" }, A3B4C3D4: { name: "イーブイ" }, A3B4C4D1: { name: "スピアー" }, A3B4C4D2: { name: "スピアー" }, A3B4C4D3: { name: "フーディン" }, A3B4C4D4: { name: "ミュウ" }, A4B1C1D1: { name: "ナッシー（アローラのすがた）" }, A4B1C1D2: { name: "ピカチュウ" }, A4B1C1D3: { name: "ピカチュウ" }, A4B1C1D4: { name: "ピッピ" }, A4B1C2D1: { name: "マルマイン" }, A4B1C2D2: { name: "ピカチュウ" }, A4B1C2D3: { name: "ピカチュウ" }, A4B1C2D4: { name: "コダック" }, A4B1C3D1: { name: "マルマイン" }, A4B1C3D2: { name: "ピカチュウ" }, A4B1C3D3: { name: "ピカチュウ" }, A4B1C3D4: { name: "ピッピ" }, A4B1C4D1: { name: "マルマイン" }, A4B1C4D2: { name: "カイリュー" }, A4B1C4D3: { name: "カビゴン" }, A4B1C4D4: { name: "ラッキー" }, A4B2C1D1: { name: "ナッシー（アローラのすがた）" }, A4B2C1D2: { name: "ニャース" }, A4B2C1D3: { name: "ピカチュウ" }, A4B2C1D4: { name: "ナッシー（アローラのすがた）" }, A4B2C2D1: { name: "ナッシー（アローラのすがた）" }, A4B2C2D2: { name: "ピカチュウ" }, A4B2C2D3: { name: "ピカチュウ" }, A4B2C2D4: { name: "カビゴン" }, A4B2C3D1: { name: "ナッシー（アローラのすがた）" }, A4B2C3D2: { name: "マルマイン" }, A4B2C3D3: { name: "ピカチュウ" }, A4B2C3D4: { name: "ピッピ" }, A4B2C4D1: { name: "カイリキー" }, A4B2C4D2: { name: "メタモン" }, A4B2C4D3: { name: "カビゴン" }, A4B2C4D4: { name: "カイリュー" }, A4B3C1D1: { name: "ナッシー（アローラのすがた）" }, A4B3C1D2: { name: "ナッシー（アローラのすがた）" }, A4B3C1D3: { name: "ナッシー（アローラのすがた）" }, A4B3C1D4: { name: "ピカチュウ" }, A4B3C2D1: { name: "ナッシー（アローラのすがた）" }, A4B3C2D2: { name: "ナッシー（アローラのすがた）" }, A4B3C2D3: { name: "ナッシー（アローラのすがた）" }, A4B3C2D4: { name: "カイリキー" }, A4B3C3D1: { name: "ナッシー（アローラのすがた）" }, A4B3C3D2: { name: "ナッシー（アローラのすがた）" }, A4B3C3D3: { name: "ピカチュウ" }, A4B3C3D4: { name: "ニャース" }, A4B3C4D1: { name: "フーディン" }, A4B3C4D2: { name: "カイリキー" }, A4B3C4D3: { name: "マルマイン" }, A4B3C4D4: { name: "ミュウ" }, A4B4C1D1: { name: "ラッキー" }, A4B4C1D2: { name: "ピカチュウ" }, A4B4C1D3: { name: "ピカチュウ" }, A4B4C1D4: { name: "ナッシー（アローラのすがた）" }, A4B4C2D1: { name: "リザードン" }, A4B4C2D2: { name: "コダック" }, A4B4C2D3: { name: "リザードン" }, A4B4C2D4: { name: "ナッシー（アローラのすがた）" }, A4B4C3D1: { name: "リザードン" }, A4B4C3D2: { name: "リザードン" }, A4B4C3D3: { name: "マルマイン" }, A4B4C3D4: { name: "ミュウ" }, A4B4C4D1: { name: "リザードン" }, A4B4C4D2: { name: "フーディン" }, A4B4C4D3: { name: "ミュウ" }, A4B4C4D4: { name: "ミュウ" } } }, {}],

ここまででポケモンの名前に変換できました。続いて、以下で英語に変換します。

この処理は不要と言えば不要ですが、日本語より英語（アルファベット）の方が何かと便利です。

※ちなみに、ここを見れば全部で20種類のポケモンがいたこともわかります。

t.exports = {
  "ピカチュウ": "pikachu",
  "ニャース": "meowth",
  "イーブイ": "eevee",
  "ナッシー（アローラのすがた）": "exeggutor",
  "リザードン": "charizard",
  "カイリキー": "machamp",
  "フーディン": "alakazam",
  "スピアー": "beedrill",
  "ポリゴン": "porygon",
  "ディグダ": "diglett",
  "コダック": "psyduck",
  "ラプラス": "lapras",
  "カイリュー": "dragonite",
  "ラッキー": "chansey",
  "カビゴン": "snorlax",
  "ピッピ": "clefairy",
  "マルマイン": "electrode",
  "ミュウ": "mew",
  "メタモン": "ditto",
  "コイキング": "magikarp"
}

以上で、得点をポケモン名に変換することができました。

urlでアクセス

先ほど ../result/".concat(p.default[e], ".html" と言う形でurlを作っていました。そのため、

https://www.pokemon.co.jp/corporate/job/pokemoncenter/special/result/{ポケモンの英語名}.html

と言う形でアクセスすれば、それぞれのポケモンの性格診断を見ることができます。

おまけ

結果の画像ファイル名が

https://www.pokemon.co.jp/corporate/job/pokemoncenter/assets/img/special/share/{ポケモンの英語名}.jpg

であることを利用すれば、直接各ポケモンの結果画像を入手することも可能です。

試しに、以下のテキストポックスにポケモンの英語名を入れて見てください！！

再掲(ポケモンの名前)

t.exports = {
  "ピカチュウ": "pikachu",
  "ニャース": "meowth",
  "イーブイ": "eevee",
  "ナッシー（アローラのすがた）": "exeggutor",
  "リザードン": "charizard",
  "カイリキー": "machamp",
  "フーディン": "alakazam",
  "スピアー": "beedrill",
  "ポリゴン": "porygon",
  "ディグダ": "diglett",
  "コダック": "psyduck",
  "ラプラス": "lapras",
  "カイリュー": "dragonite",
  "ラッキー": "chansey",
  "カビゴン": "snorlax",
  "ピッピ": "clefairy",
  "マルマイン": "electrode",
  "ミュウ": "mew",
  "メタモン": "ditto",
  "コイキング": "magikarp"
}

ちなみに…

以下のようにすることで、ポケモン自己分析(Pokémon Self-analysis)のサイトを真似ていました。

body {
 background-image: url("https://www.pokemon.co.jp/corporate/job/pokemoncenter/assets/img/special/common/bg.png");
 background-color: rgb(246,224,105);
}