はじめてのプログラミング｜ポケモンLINE Bot
2021/10/2に私はプログラミングの勉強を始めました。
初めて作ったプロダクトが、上の記事にあるポケモンのAPIを叩いて情報を取得して返してもらうLINE Botです。
申し遅れましたが、私はタイトルの通りエンジニアではなくショッピングセンターを運営する企業に勤務する従業員の1人です。
世間と会社からの強い要請で、DXが推進できれば良いと思いプログラミングを勉強してみることにしました。
元々プログラミング自体に興味があり、せっかくの機会だからやってみようと思ったのです。
作成したプロダクトはJavaScriptのサンプルをコピペしてつぎはぎで作っただけのLINE Bot。
当時の私にはこれが精一杯でした。
600日たった今、同じテーマをノーコードで実装
下記、リンク先のWebアプリケーションを作成しました
PWAのような感じでスマホでも使いやすくしておりますので、下のQRからアクセスしていただき、気に入っていただけたらメニューに追加、メニューから直接アクセスしてみてください。
ブラウザメニューが表示されずアプリ的に使えて快適かと思います
TypeScript, React, Chakra Uiというノーコードツールで実装しました。
きっちり型指定していけば、誤りもなくサジェストが強烈に効いてくるのでポチポチと選ぶだけ。
なので繰り返しになりますがこれはノーコードツールです。
使い方
- 名前、タイプ、重量（草結びのダメージ）を表側のカードに記載
- ポケモン名を検索、または画像をクリックすると、種族値、特性、ドロップアイテムを表示
- 日本語対応
prev100 / next100
- ポケモンを100匹ずつ閲覧可能です
検索
- ポケモン名を日本語で入力して検索できます
- サジェストされるので上下キーで選んでEnterで検索
レスポンシブ
- スマホにも対応したサイズ設計（GIFはiPhoneSE想定）
- サジェストされたポケモン名をタップして選択
実行環境
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"
}
データ取得
デプロイ
Netlify
TypeScriptのランタイムとして超高速の肉まんbunを採用（v0.6.14）
本当に早いです
bun create react appした時点では多少エラーも出ていますが、十分修正できる範囲かと思います
多分npx create-react-app app --template typescriptしている間に開発終わる気がします
コード全文はこちら
ノーコードツールなのにコード全文？
妙だな
工夫した点
折角なのでいくつか紹介したいと思います
名前の日本語化
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とか使うとより良いコードになるのかもしれません。
ここで衝撃の新事実を発表
もうポケモンやってない