ショッピングセンター勤務者が600日学んで作成したもの

## はじめてのプログラミング｜ポケモンLINE Bot

https://qiita.com/watanabe-tsubasa/items/becf2ae43a1ffdf02ab6

**2021/10/2に私はプログラミングの勉強を始めました。**
初めて作ったプロダクトが、上の記事にあるポケモンのAPIを叩いて情報を取得して返してもらうLINE Botです。

申し遅れましたが、私はタイトルの通りエンジニアではなくショッピングセンターを運営する企業に勤務する従業員の1人です。
世間と会社からの強い要請で、DXが推進できれば良いと思いプログラミングを勉強してみることにしました。
元々プログラミング自体に興味があり、せっかくの機会だからやってみようと思ったのです。

作成したプロダクトは`JavaScript`のサンプルを**コピペしてつぎはぎで作っただけのLINE Bot**。
当時の私にはこれが精一杯でした。

## 600日たった今、同じテーマをノーコードで実装

下記、リンク先のWebアプリケーションを作成しました

https://symplepokedex.netlify.app/

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/00e890a2-5ca6-febf-d2c2-f20b17a9b330.png" alt="562d0c61284cb98a6d68646072f819b557adefb5.png" width=10%>

PWAのような感じでスマホでも使いやすくしておりますので、下のQRからアクセスしていただき、気に入っていただけたらメニューに追加、メニューから直接アクセスしてみてください。

::: note
ブラウザメニューが表示されずアプリ的に使えて快適かと思います
:::

---

`TypeScript`, `React`, `Chakra Ui`という**ノーコードツール**で実装しました。
きっちり型指定していけば、誤りもなくサジェストが強烈に効いてくるのでポチポチと選ぶだけ。
なので繰り返しになりますがこれはノーコードツールです。

## 使い方

- 名前、タイプ、重量（草結びのダメージ）を表側のカードに記載
- ポケモン名を検索、または画像をクリックすると、種族値、特性、ドロップアイテムを表示
- **日本語対応**

### prev100 / next100

![gif1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/028e6fa5-8332-96b7-f206-cee6c20e0f10.gif)

- ポケモンを100匹ずつ閲覧可能です

---

### 検索

![gif2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/5836249d-1d7b-3a1d-28f6-37741589ef52.gif)

- ポケモン名を日本語で入力して検索できます
- サジェストされるので上下キーで選んでEnterで検索

---

### レスポンシブ

![gif3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/7eb7f49e-0504-28a9-ba00-dfb2d0c703ae.gif)

- スマホにも対応したサイズ設計（GIFはiPhoneSE想定）
- サジェストされたポケモン名をタップして選択

## 実行環境

<details><summary>package.jsonはこちら</summary>

```json:package.json
{
  "name": "app",
  "version": "0.1.95",
  "dependencies": {
    "@chakra-ui/icons": "^2.0.19",
    "@chakra-ui/react": "^2.7.1",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "axios": "^1.4.0",
    "framer-motion": "^10.12.18",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "web-vitals": "^3.0.3"
  },
  "eslintConfig": {
    "extends": [
      "react-app"
    ]
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@types/web": "^0.0.106",
    "bun-types": "canary",
    "react-refresh": "0.10.0",
    "typescript": "latest"
  },
  "scripts": {
    "dev": "bun --watch run dev.tsx"
  },
  "module": "index.ts",
  "type": "module"
}
```

</details>

### データ取得

[PokeAPI](https://pokeapi.co/)
<a href="https://pokeapi.co/">
![スクリーンショット 2023-07-16 0.48.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/81c1d38d-ec67-d457-aa75-81a7d2a506ab.png)
</a>

### デプロイ

Netlify

https://www.netlify.com/

---

TypeScriptのランタイムとして超高速の肉まん`bun`を採用（v0.6.14）


https://bun.sh/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/16e0e1ab-bdc8-9b66-48cd-c72c44c96a09.png)

本当に早いです
`bun create react app`した時点では多少エラーも出ていますが、十分修正できる範囲かと思います
多分`npx create-react-app app --template typescript`している間に開発終わる気がします

---

コード全文はこちら

https://github.com/watanabe-tsubasa/pokedex_react

ノーコードツールなのにコード全文？
妙だな:thinking:

## 工夫した点

折角なのでいくつか紹介したいと思います

### 名前の日本語化

PokeAPIのポケモン詳細データを取得するところには日本語名がありません

- 表示データの取得は`api/v2/pokemon`からなのですが、日本語名は`api/v2/pokemon-species`のエンドポイントから取得が必要なため、APIを叩く処理のみで完結させようとするとパフォーマンスが著しく落ちてしまう
- `api/v2/pokemon`から取得できるすべてのデータに日本語名が付けられているわけではなく、**フォルムチェンジ、メガ進化、Gmax等**取得することができない

ですので、事前に英語がkey、日本語がvalueのJSONを作成し、**TypeScriptのコード上に直書きしてimportして使っています**

#### 手順
- `get_data.py`で英語 > 日本語のJSONを作成
- 日本語名が""のデータをフィルターして、`prompt.md`にしたがって`ChatGPT`でデータ作成
- 何度か繰り返した後、`add.py`で結合し`filled_json.json`に出力
- enToJs.tsにコピペ

`pakedex_datamaking`に使用したファイル残してありますので気になる方はご参照ください
`Python`の`asyncio`で1200回のAPI取得を即座に終わらせるコードなど記載してありますので、よければ見ていただけると嬉しいです

### memo化

これはReact使うのであれば当然かもしれませんが、一文字打つたびに画面全体再レンダリングのようなことは防いでいます。
ただ、React18まだキャッチアップできていないので、suspendとか使うとより良いコードになるのかもしれません。

## ここで衝撃の新事実を発表

もうポケモンやってない