JavaScriptでポケモンカードを作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、PokeAPIを使って、ポケモンカードをJavaScriptで作りたいと思います。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

準備ができたので、JavaScriptを実装していきましょう。

今回の処理は、PokeAPIからポケモン情報を取得し、その情報を元にカードを作成して、画面に表示します。

要素を取得する

最初に画面操作に必要な要素を取得します。

定数を定義

プログラム内で使う定数を定義しましょう。

ポケモン取得

次は、ポケモンを取得する処理を実装します。

定数のpokemon_countに設定した値の数だけ、PokeAPIにGetリクエストを送っています。

async/awaitは、ajaxのように処理を非同期にすることができます。この設定がないとデータが取得される前に次の処理が実行されることがあるので、つけています。あと、Promiseを返すので、後処理がしやすいと言うメリットもあります。

createPokemonCard関数は、これから作成します。

ポケモンカードを作成

最後にポケモンカードを作成します。

これは、今までのアプリケーション開発で散々出てきている内容ですね。

createElementでカードの要素を作成し、取得したポケモン情報をその中に入れ、appendChildで画面に追加しています。

これで完成です。

おわりに

PokeAPIなんてあるんだ、へぇ〜〜。と言う感じですね。

ポケモンかぁ。。。懐かしいです。小学生の頃、レッドやってましたよ。
個人的にですが、初期の151匹が最もかっこよかったですね。

今回記事にした機能以外にも色々とできそうなので、今度はGo言語で実装してみます。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す