---
title: "１０％の確率でドオーしか表示されないポケモン生成サイトを作った"
description: "PokeAPIを使って10%の確率でドオーしか表示されないポケモン生成サイトを作成。"
date: 2023-12-23
tags:
  - "Next.js"
  - "PokeAPI"
  - "ポケモン"
  - "個人開発"
---

## 背景

PokeAPI を使ってみた一心から始まり、ポケモンをランダムに 6 匹表示するサイトを考え始めた。

作成中にランダムでポケモンを表示していると、あまりにもドオーが可愛すぎたので一定の確率でドオーしか表示されないポケモン生成サイトにすることにした。

可愛くないですか？？？

[画像のURLを取得できませんでした]

## 目的

- PokeAPI を使ってみる
- Next.js の勉強を軽くしたので、AppRouter を使用して API を叩く
- なんちゃってレスポンシブデザインを実現する

## できたもの

poketter([https://poketter.vercel.app/](https://poketter.vercel.app/))

[https://github.com/Suntory-N-Water/poketter](https://github.com/Suntory-N-Water/poketter)

## 感想と考慮したところ

## ポケモンSVで内定しているポケモンに絞った

なにかのバグで `ランダムでポケモン育成してみようぜ!!!` みたいなことが起きたとき、内定しているポケモンだと決めるのが楽かなと思った。
最新の DLC(12 月配信)には対応できていませんが、一個前の DLC には対応できています。

## 10%でドオーは光る

10%引いたあと更に 10%引くと嬉しくなりますね！！！！

[画像のURLを取得できませんでした]

## 画面デザインとレスポンシブデザイン

画面の色や UI については事前に Figma で設計をしました。
検討当初のボタンがそのまま入っていたりしますが..。

[画像のURLを取得できませんでした]

[画像のURLを取得できませんでした]

ボタンの色や背景色、カラーコードなどはピカチュウ大先生を連想しながら `coolors` で見つけて実装しました。

[https://coolors.co/](https://coolors.co/)

## 最後に

本当はドオーしか出なかったときにアニメーションをつけようと思ったけど、画面負荷が高くなるとのいい感じのアニメーションが思いつかなかったのでボツになりました。

またなにか思いついたら作ります。
おわり。