身近なゲームでウェブアプリの練習

Reactってのがいいらしい、と小耳に挟んだのです。

私は独学でプログラミングを楽しんでいます。
少しずつ色んなものが作れるようになってくると、段々「操作できるアプリを作りたい」と思ってくるのです。

操作できるっていうのはつまり、
画面に入力フォームやスライダーやボタンやらがありまして、
入力フォームに文字をぽちぽち~~して
スライダーを左右に動かして任意の数値に切り替え~~て
ボタンを押したら何か起こる!

そーゆーやつ!
を作りたい!!

こーゆーやつ!!(つくった!!)

ウェブアプリってインストール不要だからユーザー側はとても楽。
作る側も作る側で、アプリストアとか通さなくていいわけですから、気楽です。

そういう考えならReactってので作るのがいいんじゃないの?と小耳に挟んだのですね。

あとTailwindCSSなるものも勉強するといいらしいです。へえ~。
って、知らない言葉が増えたら頭痛くなるんですけど!?

無理せずゆっくり勉強するしかないかな。
勉強しながら試しに何か作ってみるとして……何を作りましょう?

と困ったので、私がよくやっているゲーム「ポケモンスリープ」に関するツールを作ってみることにしました。

ポケモンスリープでは、様々なフィールドがありそれぞれ異なるポケモンと出会えます。
それは、出会いたいポケモンに応じて適切なフィールドを選ぶことが望ましいということでもあります。

しかし問題は、出会いたいポケモンって1種類とは限らないってこと。
たとえば10種類くらい出会いたいポケモンがいたとして、どのフィールドに行けば最も嬉しくなれるだろうか?

ってのを手作業で数えるのは面倒くさいのでアプリに数えさせようってことです。


そんなアプリを作るために、
まずアプリで使うデータを作るためのアプリを作ります。

言葉にするとややこしいけど、こういうやつ。

これを使ってデータを作る。
作ったデータを、さっきURLを載せたアプリに利用する。
というわけです。

しかし一匹一匹、出現フィールドを調べるのは面倒です。
フシギダネが出現するのはどこ?
ってネットで調べれば出てくるけれども、全ポケモン分ネットを見ますか?

それはそれで面倒くさい。
なのでスプレッドシート(エクセルみたいなやつ)でこんなものも作りました。

これはゲーム画面を参照して数値を打ち込んだものです。
フィールド移動時の出現ポケモン一覧ですね。

この数字(図鑑番号)部分だけを打ち込んでいきます。
そうして各フィールドの出現ポケモンのメモができたら、COUNTIF関数などを使えば、こう!

うっとり。
スプレッドシートやエクセルってこんなに便利なんだ~。

というわけで練習のために作ってみたアプリ。
私以外の人が必要かどうかわからないけどとりあえず公開。

初めてなだけあって、色々な機能が足りてないし、レイアウトもいい加減ですねー。

しかもこういうのって新しいポケモンが追加される度にデータを更新しなきゃいけないんでしょうか……??

うう、それ、絶対大変じゃないですか。

もう既に、
ああ、もう既に、誰かが同じようなアプリを公開してくれていますように!
そしてその人は真面目に最新情報に更新し続けてくれますように!!

同じものが既にあるなら、私は更新しなくて済むのですから……!
(そして、自作するだけあって、そういう便利なものがあるなら使いたいのですから)

この記事が参加している募集