呼称解説 特化 努力値を252加算し、さらに性格補正で1. 1倍にすることです。 個体値31であればそのポケモンがとりうる最高値の実数値となります。 性格による上昇補正は1つの能力値にしかかけられないため、AS極振りなどでもA特化かS特化 最速 かでステータスが変化します。 252振ることで、その能力を最大限に活かすこととなる最も基本的な努力値の振り方となります。 その能力の重要度が他の能力より低ければ、無振りになることがあります。 また、攻撃や素早さなどをあえて低くしたい時も無振りになります。 火力調整 対峙するポケモンを想定し、特定の攻撃回数で相手を撃破できるよう努力値を調整することを「火力調整」と呼びます。 確定n発・乱数n発というのは火力調整の用語で、確定n発は特定のポケモンをn発の攻撃で必ず落とせる、 乱数n発は、特定のポケモンにn発攻撃すれば乱数次第で落とせる可能性がある ことを意味します。 具体的な数値を設定するには、web上で公開されているダメージ計算ツールを参考にするとよいでしょう。 火力調整の例 がを撃破することを想定し、 HP実数値183&特防実数値106のガブリアスを、れいとうビームで1発で落とせる、 特攻実数値143になるように、特攻に性格1. 1倍補正をかけ、特攻に努力値を36振る。 C143ポリゴン2のれいとうビーム が H183D106ガブリアスに与えるダメージ「184~220」、割合「100. 確定1発。 耐久調整 対峙するポケモンを想定し、特定の相手の攻撃を耐えられるように努力値を調整することを「耐久調整」と呼びます。 具体的な数値を設定するには、web上で公開されているダメージ計算ツールを参考にするとよいでしょう。 耐久調整の例 が対峙することを想定し、 攻撃実数値182のガブリアスがこだわりハチマキを持って放つじしんを、急所に当たらなければ耐えることができる、 HP実数値199&防御実数値92になるように、HPに228、防御に52の努力値を振る。 A182ガブリアスのこだわりハチマキじしん が H199 B92ニンフィアに与えるダメージ「168~198」、割合「84. 素早さ調整 素早さの努力値を調整することを「素早さ調整」と呼びます。 また素早さに性格1. 1倍補正をかけ素早さに極振りすることを「最速」、 素早さに補正はかけないものの素早さに極振りすることを「準速」、 個体値・努力値ともに0にし、さらに性格0. 9倍補正をかけることを「最鈍」「最遅」と言います。 素早さ調整の例1 がと対峙することを想定し、 素早さに性格1. 素早さ調整の例2 がを後出しからばかぢからで1発で落とすことを想定し、 技りゅうのまいを1回した最速のメガバンギラスに先手を取れるよう、 霊獣ランドロスにこだわりスカーフを持たせ、素早さに努力値を196振る。 素早さ調整の例3 素早さ種族値60のが努力値を振らない素早さ種族値65のよりも早く行動できるように、素早さに努力値を振る。 素早さ調整の例4 素早さ種族値13のがジャイロボールの威力を高めるため、 またトリックルーム下でなるべく先手を取って行動できるように、素早さを最鈍にする。 HP調整 HPを特定の値にすることによる、定量ダメージの被害を最小限に、 定量回復の効果を最大限に高めた調整を「HP調整」と呼びます。 よって、最大HPが160の場合、1ターンごとに10ダメージを受けますが、 最大HPが160より1少ない159の場合、1ターンごとのダメージが9となります。 この差により、以下で示すように、天候ダメージを2度受けると、 最大HP160の場合残りHPが140、最大HP159の場合残りHPが141となり、最大HP159の方が残りHPが多くなります。 天候ダメージは159のように16の倍数より1低い数値が最小限の被害となります。 この16の倍数より1低い数値を 16n-1 と示します。 nには自然数が入り、143,175,191,207 なども16n-1となります。 特にたべのこしなどの回復効果のある道具・特性・技を活かさず、 その値にした時としない時で耐久値に大きな差が出ないのであれば、16n-1調整が最も望ましいです。 16n-1は8n-1や4n-1なども満たすので、天候ダメージ,もうどく,どく,やけど,やどりぎのタネ,のろいなどのダメージが最小限です。 他、8n-1や 16n-1に近い効果を得られる16n-3などもよくある調整です。 極振りをする場合でも2つの能力に252ずつ振った余りの4を利用し奇数調整にはした方が良く、 偶数にすると、技「のろい」など思わぬ定量ダメージで効率悪く落ちることになりがちです。 1倍補正される能力において、11nは1. 1倍にした余りの切り捨てがないため、効率が最もよい数値です。 補正前の数値で10nにすることで、補正後の値が11nになります。 ただし効率がよいというだけで「優先すべき調整という意味ではない」事は覚えておきましょう。 11nになる数字 ~121,132,143,154,165,176,187,198,209… 具体的な努力値の振り方 例1:テラキオン 極振りの一例です。 岩・格闘技を両方半減以下に抑えられるポケモンは数えるほどしかいません。 一方弱点は多く、特にメジャーな水・格闘・地面技を抜群で通してしまううえに、主力のインファイトの効果で数値以上に打たれ弱いのが欠点です。 以上のことからテラキオンには、高い攻撃と素早さ、範囲優秀な一致技を活かして相手を上から叩き潰す戦い方が向いていると言えるでしょう。 そのため攻撃と素早さに252ずつ振るのがテンプレとなっています。 例2:シュバルゴ 極振りの一例です。 例1のテラキオンと違い、半減読みで積極的に繰り出して相手の攻撃を耐え、高い火力で反撃する戦い方が向いています。 よって、基本的に攻撃と、HPを上げれば物理特殊両方の耐久が上がるのでHPに極振りします。 例1、2の通り、極振りの考え方の一つに『高い能力2箇所を極限まで伸ばす』というものがあります。 例3:ハリテヤマ 調整振りの一例です。 ただし、シュバルゴと異なりHP種族値が防御・特防種族値より極めて高い場合が今回の例です。 HP・防御・特防は、実数値の比率が 2:1:1 に近い時、最も耐久力に優れています。 ハリテヤマが例2同様攻撃とHPに極振りした場合のHPと防御と特防の実数値は 251-80-80なので、 この2:1:1の比率から大きく逸脱してしまいます。 よってハリテヤマの場合、攻撃に振った余りはHPではなく防御と特防に振り分けるのが基本となります。 HP 攻撃 防御 特攻 特防 素早 キノガッサ 60 130 80 60 60 70 ここでは最大効率を求めます。 みがわりはHPの4分の1を消費して身代わり人形を出す技です。 つまり、みがわりが4回使えるようにするには4nにしてはいけません。 理由は以下の通りです。 この戦法はたった1のHPの積み重ねが重要になるので、HPの数値には気をつける必要があります。 例5:ガブリアス HP 攻撃 防御 特攻 特防 素早 ガブリアス 108 130 95 80 85 102 ガブリアスには様々な振り方がありますが、ここではLv. 50で対戦することを想定した陽気のガブリアスに攻撃と素早さに極振りしたことを前提とします。 今回の例は努力値の端数をどこに振るかというお話です。 努力値は合計510振れるため、あと6をどこかに振ることができます。 実際はステータス計算の都合上、努力値は4の倍数ごとにステータスに反映されるため、実質どこか1つのステータスに4を振ることになります。 まず特攻には振りません。 ガブリアスの場合特殊攻撃技のだいもんじを搭載することはありますが、 振らない理由は性格による0. 9倍補正が特攻にかかっているため、 特攻に4を振っても上昇値が端数止まりのまま切り捨てられてしまいLv. 50時のステータスが変わらないためです。 ですので、HP・防御・特防のいずれかに振ることになります。 ガブリアスのHP・防御・特防の実数値のステータスはそれぞれ、183-115-105です。 2:1:1の比率が最も硬いので、この原則に基づくのであればHPに振るのがベターです。 しかし、HPに振ることも少ないです。 理由はHPに努力値4を振るとHPのステータスが184になり、8nとなってしまうためです。 8nはやけどのダメージが最大効率です。 HPに努力値4を振らなければHP調整の項にあるとおり、実数値183につき8n-1となり、 やけど・やどりぎのタネなどのダメージ効率が最小効率となります。 よって防御か特防に端数の4を振るのが一般的です。 このように、端数も細かく考えて振るのがポケモンです。 素早さ調整の重要性 ポケモンバトルにおいて、素早さは他の能力と比べて重要な能力です。 素早さは1という数値の争いで、1でも素早さが高いと先に技を使えます。 大体はこれによって優劣が決まります。 ですから素早さを想定する相手の素早さより高く設定するということは、耐久調整より重要な意味を持っています。 また、確実に先手を取れることがわかれば先手前提の行動選択ができるため、行動選択上も優位となります。 基本的には 特定のポケモンの最速状態を抜き、確実に先手を取れるようにする です。 中速のポケモンはキノガッサ 素早さ種族値70 の催眠ループの起点にされないようにそれを抜く調整をしたり、 トップメタのメガガルーラを抜いたりと、特定の素早さのラインを抜いて確実な先手を確保します。 これはなどを参考にして決めてもよいでしょう。 種族値が低い箇所に努力値を振るメリット 基本的にはポケモンの育成は 長所を伸ばすように努力値を振り、短所はプレイングや控えのポケモンでカバーするのですが、場合によっては 種族値が低い部分に振ったほうが活躍の幅が広がることもあります。 例6:ランターン HP 攻撃 防御 特攻 特防 素早 ランターン 125 58 58 76 76 67 このような種族値の場合で鈍足アタッカーをする場合は、 HC252振りをしてはいけません。 なぜなら、努力値の無駄が多いからです。 先に結論を言ってしまえば、ランターンのHC252 使用努力値504 の耐久と火力は、H12 B100 C252 D116 使用努力値480 とほぼ同じになります。 つまり、後者のほうが前者より24だけ多く努力値を使えるというわけですね。 ただ、これはあくまでHC252振りとの比較であり、基本的にはアタッカー型ランターンはBC252やCD252に振ることが多いです。 なお、HPが高く防御特防が低いランターンとは逆に、HPが低く防御特防が高いでは BD252振りをしてはいけません。 こちらも先に結論を言ってしまえば、BD252振りツボツボ 使用努力値504 の耐久はH100振りツボツボ 使用努力値100 とほぼ同じです。 単純計算で404もの努力値が無駄になるのに等しいため絶対に止めましょう。 例7:ハピナス HP 攻撃 防御 特攻 特防 素早 ハピナス 255 10 10 75 135 55 このポケモンでも、防御・特防まんべんなく受ける場合には H振りよりもBD振りを優先すべきです。 その理由を知るためには 耐久指数という概念を知る必要があります。 その耐久指数とは、高ければ高いほど耐久がある、とだけ知っておくだけで構いません。 では、性格ずぶとい・個体値31-0-31-31-31-31のハピナスでステータス計算をしてみて、耐久指数を確認してみます。 まず、努力値508をH252 B124 D132と振った場合のレベル50時のステータスと耐久指数はこちら• ステータス:362-13-50-95-172-75• 物理耐久指数:18100• 特殊耐久指数:62264 続いて、努力値508をH4 B252 D252と振った場合のレベル50時のステータスと耐久指数はこちら• ステータス:331-13-68-95-187-75• 物理耐久指数:22508• 特殊耐久指数:61897 このように、明らかに物理耐久指数が後者のほうが高いことがわかるはずです。 特殊耐久指数こそ多少下がってしまいますが、むしろこの多少のロスだけで4000近く物理耐久指数を上げられると考えると決して悪いものではありません。 例8:カミツルギ HP 攻撃 防御 特攻 特防 素早 カミツルギ 59 181 131 59 31 109 最後に、壊滅的な特防を持ちながら、一定数特防振りの調整が見られるこのポケモンで、種族値が低い箇所に努力値を振る意義を考えていきましょう。 実際には細かく努力値調整が行われますが、説明のため思い切って「陽気ASぶっぱ残りH」と「陽気DSぶっぱ残りA」で比較してみたいと思います。 まず、努力値508をH4 A252 S252と振った場合のレベル50時のステータスはこちら• ステータス:135-233-151-x-51-177 続いて、努力値508をA4 D252 S252と振った場合のレベル50時のステータスはこちら• ステータス:134-202-151-x-83-177 この2つを、「陽気ASぶっぱ残りH」を基準として数値の増減で比較してみましょう。 HP 攻撃 防御 特攻 特防 素早 陽気AS 135 233 151 x 51 177 陽気DS 134 202 151 x 83 177 増減率 約0. 99倍 約0. 87倍 なし x 約1. 63倍 なし 攻撃はわずか0. 9倍弱の倍率に対し、特防はなんと1. 6倍以上の倍率であることがわかりました。 このことから 元々種族値が高い箇所の努力値振りを減らすと減少率は小さく、元々種族値が低い箇所の努力値振りを増やすと増加率が大きくなるという結論が導き出せます。 カミツルギのほかにも、などは特攻努力値の寄与が小さく、防御努力値の寄与が大きいポケモンのため、特攻を削って防御寄りにした調整(「H252 B100 C116 D4 S36振り」等)もよく見られます。 ここまでで、勘違いしてはいけないのは、 あくまで無振りに比べたら上昇率が高いだけに過ぎず、ポケモン全体から見ると決して高い数値にはならないということです。 例えば、で攻撃無振り・特攻全振りすると、確かに減少幅は小さく増加幅は大きいですが、だからといって オーバーヒートが実用レベルまで強くなることはありません。 攻撃を削ったカミツルギも同様で、特防振りにより最低限の特殊耐久は得られますが、だからといって 超火力の等倍特殊技を確定耐えできるようにもなりません。 ハピナスやツボツボのような例外を除いて、基本的には 長所を伸ばすように(種族値の高い箇所に)努力値を振り、短所(種族値の低い箇所)はプレイングや控えのポケモンでカバーするという方針を忘れないようお願いします。 最後に 結局は、種族値によってある程度努力値の振り方の方向性は決まるものの、 タイプ、特性、技、アイテム、想定する相手等を加味して努力値の振り分けは考えなければいけません。 努力値の振り分けはそのポケモンの育成計画や運用方針に直結するものなので、真剣にそして慎重に決定しましょう。
次の1 があり、持ち物・技・特性などにより1. 100時 のステータス実値を掲載。 素早さ比較表 Lv. 160 180 181 212 233 318 349• 151 171 172 203 223 304 334• 150 170 171 202 222 303 333• 148 168 169 200 220 300 330• 145 165 166 197 216 295 325• 143 163 164 195 214 292 321• 142 162 163 194 213 291 320• 140 160 161 192 211 288 316• 138 158 159 190 209 285 313• 136 156 157 188 206 282 310• 135 155 156 187 205 280 308• 132 152 153 184 202 276 303• 130 150 151 182 200 273 300• 129 149 150 181 199 271 298• 128 148 149 180 198 270 297• 127 147 148 179 196 268 295• 126 146 147 178 195 267 293• 125 145 146 177 194 265 292• 124 144 145 176 193 264 290• 123 143 144 175 192 262 288• 122 142 143 174 191 261 287• 121 141 142 173 190 259 285• 120 140 141 172 189 258 283• 119 139 140 171 188 256 282• 118 138 139 170 187 255 280• 117 137 138 169 185 253 278• 116 136 137 168 184 252 277• 115 135 136 167 183 250 275• 114 134 135 166 182 249 273• 113 133 134 165 181 247 272• 112 132 133 164 180 246 270• 111 131 132 163 179 244 268• 110 130 131 162 178 243 267• 109 129 130 161 177 241 265• 108 128 129 160 176 240 264• 107 127 128 159 174 238 262• 106 126 127 158 173 237 260• 105 125 126 157 172 235 259• 104 124 125 156 171 234 257• 103 123 124 155 170 232 255• 102 122 123 154 169 231 254• 101 121 122 153 168 229 252• 100 120 121 152 167 228 250• 99 119 120 151 166 226 249• 98 118 119 150 165 225 247• 97 117 118 149 163 223 245• 96 116 117 148 162 222 244• 95 115 116 147 161 220 242• 93 113 114 145 159 217 239• 92 112 113 144 158 216 237• 91 111 112 143 157 214 235• 90 110 111 142 156 213 234• 89 109 110 141 155 211 232• 88 108 109 140 154 210 231• 87 107 108 139 152 208 229• 86 106 107 138 151 207 227• 85 105 106 137 150 205 226• 84 104 105 136 149 204 224• 83 103 104 135 148 202 222• 82 102 103 134 147 201 221• 81 101 102 133 146 199 219• 80 100 101 132 145 198 217• 79 99 100 131 144 196 216• 78 98 99 130 143 195 214• 77 97 98 129 141 193 212• 76 96 97 128 140 192 211• 75 95 96 127 139 190 209• 74 94 95 126 138 189 207• 73 93 94 125 137 187 206• 72 92 93 124 136 186 204• 71 91 92 123 135 184 202• 70 90 91 122 134 183 201• 69 89 90 121 133 181 199• 68 88 89 120 132 180 198• 67 87 88 119 130 178 196• 66 86 87 118 129 177 194• 65 85 86 117 128 175 193• 64 84 85 116 127 174 191• 61 81 82 113 124 169 186• 60 80 81 112 123 168 184• 59 79 80 111 122 166 183• 58 78 79 110 121 165 181• 56 76 77 108 118 162 178• 55 75 76 107 117 160 176• 54 74 75 106 116 159 174• 52 72 73 104 114 156 171• 51 71 72 103 113 154 169• 50 70 71 102 112 153 168• 48 68 69 100 110 150 165• 47 67 68 99 108 148 163• 46 66 67 98 107 147 161• 45 65 66 97 106 145 160• 44 64 65 96 105 144 158• 43 63 64 95 104 142 156• 42 62 63 94 103 141 155• 40 60 61 92 101 138 151• 39 59 60 91 100 136 150• 36 56 57 88 96 132 145• 35 55 56 87 95 130 143• 34 54 55 86 94 129 141• 33 53 54 85 93 127 140• 32 52 53 84 92 126 138• 30 50 51 82 90 123 135• 29 49 50 81 89 121 133• 28 48 49 80 88 120 132• 25 45 46 77 84 115 127• 20 40 41 72 79 108 118• 15 35 36 67 73 100 110• 13 33 34 65 71 97 107• 5 25 26 57 62 85 94• 素早さ比較表 Lv. 160 356 357 419 460 628 691• 151 338 339 401 441 601 661• 150 336 337 399 438 598 658• 148 332 333 395 434 592 651• 145 326 327 389 427 583 641• 143 322 323 385 423 577 635• 142 320 321 383 421 574 631• 140 316 317 379 416 568 625• 138 312 313 375 412 562 618• 136 308 309 371 408 556 612• 135 306 307 369 405 553 608• 132 300 301 363 399 544 598• 130 296 297 359 394 538 592• 129 294 295 357 392 535 589• 128 292 293 355 390 532 585• 127 290 291 353 388 529 582• 126 288 289 351 386 526 579• 125 286 287 349 383 523 575• 124 284 285 347 381 520 572• 123 282 283 345 379 517 568• 122 280 281 343 377 514 565• 121 278 279 341 375 511 562• 120 276 277 339 372 508 559• 119 274 275 337 370 505 556• 118 272 273 335 368 502 552• 117 270 271 333 366 499 549• 116 268 269 331 364 496 546• 115 266 267 329 361 493 542• 114 264 265 327 359 490 539• 113 262 263 325 357 487 536• 112 260 261 323 355 484 532• 111 258 259 321 353 481 529• 110 256 257 319 350 478 526• 109 254 255 317 348 475 523• 108 252 253 315 346 472 519• 107 250 251 313 344 469 516• 106 248 249 311 342 466 513• 105 246 247 309 339 463 509• 104 244 245 307 337 460 506• 103 242 243 305 335 457 503• 102 240 241 303 333 454 499• 101 238 239 301 331 451 496• 100 236 237 299 328 448 493• 99 234 235 297 326 445 490• 98 232 233 295 324 442 486• 97 230 231 293 322 439 483• 96 228 229 291 320 436 480• 95 226 227 289 317 433 476• 93 222 223 285 313 427 470• 92 220 221 283 331 424 466• 91 218 219 281 309 421 463• 90 216 217 279 306 418 460• 89 214 215 277 304 415 457• 88 212 213 275 302 412 453• 87 210 211 273 300 409 450• 86 208 209 271 298 406 447• 85 206 207 269 295 403 443• 84 204 205 267 293 400 440• 83 202 203 265 291 397 437• 82 200 201 263 289 394 433• 81 198 199 261 287 391 430• 80 196 197 259 284 388 427• 79 194 195 257 282 385 424• 78 192 193 255 280 382 420• 77 190 191 253 278 379 417• 76 188 189 251 276 376 414• 75 186 187 249 273 373 410• 74 184 185 247 271 370 407• 73 182 183 245 269 367 404• 72 180 181 243 267 364 400• 71 178 179 241 265 361 397• 70 176 177 239 262 358 394• 69 174 175 237 260 355 391• 68 172 173 235 258 352 387• 67 170 171 233 256 349 384• 66 168 169 231 254 346 381• 65 166 167 229 251 343 377• 64 164 165 227 249 340 374• 61 158 159 221 243 331 364• 60 156 157 219 240 328 361• 59 154 155 217 238 325 358• 58 152 153 215 236 322 354• 56 148 149 211 232 316 348• 55 146 147 209 229 313 344• 54 144 145 207 227 310 341• 52 140 141 203 223 304 334• 51 138 139 201 221 301 331• 50 136 137 199 218 298 328• 48 132 133 195 214 292 321• 47 130 131 193 212 289 318• 46 128 129 191 210 286 315• 45 126 127 189 207 283 311• 44 124 125 187 205 280 308• 43 122 123 185 203 277 305• 42 120 121 183 201 274 301• 40 116 117 179 196 268 295• 39 114 115 177 194 265 292• 36 108 109 171 188 256 282• 35 106 107 169 185 253 278• 34 104 105 167 183 250 275• 33 102 103 165 181 247 272• 32 100 101 163 179 244 268• 30 96 97 159 174 238 262• 29 94 95 157 172 235 259• 28 92 93 155 170 232 255• 25 86 87 149 163 223 245• 20 76 77 139 152 208 229• 15 66 67 129 141 193 212• 13 62 63 125 137 187 206• 5 46 47 109 119 163 179•
次のの記事です。 この内容はGameWithのコンテンツとは関係なく、個人的な趣味で作ったものです。 はじめに ポケモントレーナーの いのす です! ポケットモンスター ソード・シールド のランク戦を日々楽しんでいます。 日頃から、ポケモンを育成する際に、色々な企業や個人の皆様が作っていただいているサイトを利用させていただいています。 前提 利用技術 コスト お金も時間も を控えめにするために以下の技術を採用しています。 Vue. jsフレームワーク• Vue. js用UIフレームワーク• jsは少し構築経験がありましたが、Vueに対しての知識は薄かったので、そこらへんも勉強しながらでした。 ポケモンのドメイン知識 こちらについての詳細は他のサイトをご覧いただけるといいと思いますが、最低限本記事に関連しそうなものをざっくり説明をします。 種族値: ポケモン種類ごとに定められているベースとなる能力値• 個体値: ポケモン1匹ごとに与えられる能力値• 例外を除いて、最高値のポケモンを使うことが前提• 努力値: ポケモントレーナーが各種能力値を強化できる値• 性格補正: ポケモンの性格によって上下する倍率 1. ポケモンのステータスを見るとこの結果が表示されています• ランク補正: 「すばやさ が ぐーんと あがった」などの際の補正• (ポケモンはLv. 50、個体値は さいこう のみの前提で進めます) 企画 主な利用想定ユーザーは 自分 です!(笑) 素早さ計算するだけのツールはいろいろあるのですが、 比較しながら細かい調整をするツールがほしいという欲望がありました。 それを踏まえると、以下の方針が生まれました。 対戦中に即座に素早さ比較をしやすい• 仮想敵に対して細かい素早さ調整がしやすい これに従った、具体的な実装内容としては、以下の通りです。 相手のポケモンと自分のポケモンの2つの計算を行って比較する• ポケモンを選ぶ際はインクリメンタルサーチで快適に• デフォルト値は最速育成状態にして、その他の補正系の値はなし• 努力値や補正値系はポチポチしてるだけで調整できる• 条件を変更した際の結果をリアルタイムで見ることができる(リアクティブ! 実装 全ての実装方法を細かく解説はしきれないので、今回の特徴的な実装の部分にフォーカスして取り上げます! 細かい内容が気になる場合は、こちらのリポジトリを見ていただければと思います。 今回は綺麗な実装というよりは素早く作り上げることを重視したので、コードは結構汚めです...。 最低限同じロジックを2度書かないようにする程度の調整はしてあります。 また、サーバーに負荷をかけずに取得します。 Webページで先ほどのページを開いて、GoogleChromeのConsoleからJavascriptでDOMの中身を抽出することで、 ポケモン名をキーにして、バリューをポケモンの情報を持つオブジェクト 現状は素早さ種族値 s のみ を生成します。 create-nuxt-app v2. js project in pokemon-speed-checker? Project name pokemon-speed-checker? Project description Pokemon speed checker for sword-shield? Author name inosy22? Choose the package manager Yarn? Choose UI framework Vuetify. Choose custom server framework None Recommended? Choose Nuxt. js modules Press to select, to toggle all, to invert selection? Choose linting tools ESLint, Prettier? Choose test framework Jest? Choose rendering mode Single Page App? Choose development tools jsconfig. json Recommended for VS Code 注目すべきところは、 Vuetify を入れたことぐらいです。 SPA SinglePageApp か SSR Universal にするかを選択しますが、今回は最終的に静的ファイルに落とし込む nuxt generate コマンドを利用するためどちらでもいいのかなと思います。 CompositionAPIについて また、今回利用しているVue. jsのバージョンは2系ですが、近い将来出るはずのVue. js3系のバージョンで標準装備されている CompositionAPI を勉強がてら利用してみます。 これを利用することにより、ClassベースのVueComponentではなく、Functionベースのコンポーネント作成が可能です。 Vue2系には標準装備されていないので、提供されているパッケージを追加します。 直感的に書くことができて、SFCのtemplateで利用できる変数は、CompositionAPIのCreateComponentでreturnしたオブジェクトに宣言したものだけというのが非常にシンプルでわかりやすい! 実数値計算ロジック コード: こちらは、ES6のクラスベースでオブジェクト指向っぽく作成。 時短のためTypeScriptにしなかったので、privateプロパティっぽくしてますがなってないのはご愛嬌...。 Nuxt. jsの部分とはあまり関係なく、ポケモンのドメインロジックなので詳細説明は省きます。 ページの作成 コード: Nuxt. jsは pages ディレクトリにVueファイルを作成すると、その通りにルーティングされるので、ファイルを作成するだけです。 最初はこのファイルに全てベタ書きしていましたが、冗長な部分があったので、VueComponentの分割を行いました。 全体のレイアウトなどは、Vuetifyのを使うことで、簡単にレスポンシブデザインを実現します。 全てのパーツは、VuetifyのForm系のコンポーネントなどを利用して、 でVueComponentのstateを紐付けることで、リアクティブな処理を実現しています。 Vueコンポーネント設計 コード: 冗長な機能と見た目を持つものは以下の2種類があったので、ここだけ別Componentに分離しています。 CalculatorCard 赤枠• PlusMinusButton 青枠 ラジオボタンとチェックボックスの部分については、シンプルなVuetifyのコンポーネントを使っているだけなので、説明を省略します。 ポケモンの選択 インクリメンタルサーチで簡単にポケモンを選べるようにします。 これは、Vuetifyのを用いることで簡単に作成できます。 しかし、今回は時間の関係で断念。 努力値の入力 努力値は 0 から 252 までの値を取りますが、実数値への影響は4の倍数ごとに発生します。 また、Lv. つまり、これもComboBoxコンポーネントで補助してあげることで、入力がしやすくなります。 また、努力値は一番細かく調整したい箇所なので、細かい調整をリアクティブに確認しながら行いやすいように、プラスマイナスボタンもつけることにします。 プラスマイナスボタンについては、ボタンの有効無効フラグとクリック時に発火する関数を受け取るだけのコンポーネントになっており、同じ見た目で色々な加算減算処理に対応できるようにしています。 アイコンは を利用していて、から自由に使うことができます。 enableMinusButton? enablePlusButton? しかし、セレクトボックスを使うと、1ランクずつ変更して徐々に確かめたい場合に面倒なので、こちらにもプラスマイナスボタンを利用します。 素早さ比較結果の表示 親コンポーネントであるページで比較結果を表示します。 自分と相手のそれぞれの CalculatorCard で計算された実数値は、 それぞれのコンポーネントが管理しているので、 親コンポーネントに通知する必要があります。 そのため、親コンポーネントから、親のstateに計算結果を連携するコールバック関数を CalculatorCard にpropsとして渡してあげます。 CalculatorCard はその関数を、実数値の計算が終わった時に実行します。 state. ownSpeed と state. opponentSpeed に依存した算出プロパティを作成してあげれば、子コンポーネントの計算結果も親コンポーネントの比較結果にリアクティブに処理されます。 ownSpeed state. opponentSpeed state. ' result. Vueの を使うことで、プログレスバーの中に文字を入れることができるので、結果をそこに記載しています。 result. value. result. value. そのため、スマホサイズの場合だけ、結果表示は固定フッターにするという形を取りました。 OGPの設定 SEO対策やSNSなどでのシェアのためのOGP設定を行います。 nuxt. config. js の を使うことで一括で全ページに入れることができます。 netlify. netlify. Netlifyの利用 Nuxt. jsの公式ドキュメントのFAQにやり方が書いてあります。 今回は、静的に作られたサイトで問題ないので、 BuildCommandには npm run generate を指定し、PublishDirectoryに dist を入力します。 netlify. com のサブドメイン部分を自由に変更することができます。 さいごに Nuxt. js はアプリケーション構築を簡単に行うことができてかなり便利です! また、 CompositionAPI を使うことでシンプルな記述ができたのも実装速度向上につながりました! 一番時間がかかったのはUI周りでしたが、 Vuetify のおかげでデザイン知識が無いの自分が、コンポーネント単位の細かいデザインを考えなくて良いため、かなりの時間節約になりました! Netlify については設定が10分ぐらいで終わり、CDのことも全く考えなくて良い、さらには無料なのは最高ですね! 加えて、 Nuxt. js と Netlify はかなり相性がいいように感じました! 趣味での簡単なアプリケーション作成であれば、 Nuxt.
次の