JavaScriptでPokeAPIからポケモンカードを作ってみよう！

こんにちは。KOUKIです。

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

<目次>

実装するもの

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

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

環境構築

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

JavaScriptでアプリ開発 ~環境構築~

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

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

CSS版

CSSでポケモンカードをスタイリングしよう!

ページ(HTML)の作成

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Pokedex</title>
  </head>
  <body>
    <h1>Pokedex</h1>
    <div class="poke-container" id="poke-container"></div>

    <!-- Design inspired by this Dribbble shot: https://dribbble.com/shots/5611109--Pokemon -->
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Pokedex</title>

</head>

<body>

<h1>Pokedex</h1>

</body>

</html>

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

スタイル(CSS)を装飾

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

@import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap');

* {
  box-sizing: border-box;
}

body {
  background: #efefbb;
  background: linear-gradient(to right, #d4d3dd, #efefbb);
  font-family: 'Lato', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}

h1 {
  letter-spacing: 3px;
}

.poke-container {
  display: flex;
  flex-wrap: wrap;
  align-items: space-between;
  justify-content: center;
  margin: 0 auto;
  max-width: 1200px;
}

.pokemon {
  background-color: #eee;
  border-radius: 10px;
  box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5);
  margin: 10px;
  padding: 20px;
  text-align: center;
}

.pokemon .img-container {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  width: 120px;
  height: 120px;
  text-align: center;
}

.pokemon .img-container img {
  max-width: 90%;
  margin-top: 20px;
}

.pokemon .info {
  margin-top: 20px;
}

.pokemon .info .number {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 0.8em;
}

.pokemon .info .name {
  margin: 15px 0 7px;
  letter-spacing: 1px;
}

@import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap');

* {

box-sizing: border-box;

}

body {

background: #efefbb;

background: linear-gradient(to right, #d4d3dd, #efefbb);

font-family: 'Lato', sans-serif;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

margin: 0;

}

h1 {

letter-spacing: 3px;

}

.poke-container {

display: flex;

flex-wrap: wrap;

align-items: space-between;

justify-content: center;

margin: 0 auto;

max-width: 1200px;

}

.pokemon {

background-color: #eee;

border-radius: 10px;

box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5);

margin: 10px;

padding: 20px;

text-align: center;

}

.pokemon .img-container {

background-color: rgba(255, 255, 255, 0.6);

border-radius: 50%;

width: 120px;

height: 120px;

text-align: center;

}

.pokemon .img-container img {

max-width: 90%;

margin-top: 20px;

}

.pokemon .info {

margin-top: 20px;

}

.pokemon .info .number {

background-color: rgba(0, 0, 0, 0.1);

padding: 5px 10px;

border-radius: 10px;

font-size: 0.8em;

}

.pokemon .info .name {

margin: 15px 0 7px;

letter-spacing: 1px;

}

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

JavaScriptの実装

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

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

要素を取得する

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

// 要素の取得
const container = document.getElementById('container')

1 2	// 要素の取得 const container = document.getElementById('container')

定数を定義

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

// 定数を定義
// 表示するポケモン数
const pokemon_count = 151

// カラー
const colors = {
  fire: '#FDDFDF',
  grass: '#DEFDE0',
  electric: '#FCF7DE',
  water: '#DEF3FD',
  ground: '#f4e7da',
  rock: '#d5d5d4',
  fairy: '#fceaff',
  poison: '#98d7a5',
  bug: '#f8d5a3',
  dragon: '#97b3e6',
  psychic: '#eaeda1',
  flying: '#F5F5F5',
  fighting: '#E6E0D4',
  normal: '#F5F5F5'
}

// colorsのkeyを配列に格納
const main_types = Object.keys(colors)

// 定数を定義

// 表示するポケモン数

const pokemon_count = 151

// カラー

const colors = {

fire: '#FDDFDF',

grass: '#DEFDE0',

electric: '#FCF7DE',

water: '#DEF3FD',

ground: '#f4e7da',

rock: '#d5d5d4',

fairy: '#fceaff',

poison: '#98d7a5',

bug: '#f8d5a3',

dragon: '#97b3e6',

psychic: '#eaeda1',

flying: '#F5F5F5',

fighting: '#E6E0D4',

normal: '#F5F5F5'

}

// colorsのkeyを配列に格納

const main_types = Object.keys(colors)

ポケモン取得

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

// ポケモン取得
const fetchPokemons = async () => {
    for(let i = 1; i <= pokemon_count; i++) {
        await getPokemon(i)
    }
}

const getPokemon = async (id) => {
    const url = `https://pokeapi.co/api/v2/pokemon/${id}`
    const res = fetch(url)
    const data = await res.json()
    createPokemonCard(data)
}

// ページが読み込まれた時に実行
fetchPokemons(

// ポケモン取得

const fetchPokemons = async () => {

for(let i = 1; i <= pokemon_count; i++) {

await getPokemon(i)

}

const getPokemon = async (id) => {

const url = `https://pokeapi.co/api/v2/pokemon/${id}`

const res = fetch(url)

const data = await res.json()

createPokemonCard(data)

}

// ページが読み込まれた時に実行

fetchPokemons(

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

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

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

ポケモンカードを作成

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

// ポケモンカードを作成
const createPokemonCard = (pokemon) => {
    // div要素を作成
    const pokemonEl = document.createElement('div')
    // pokemonクラスを追加
    pokemonEl.classList.add('pokemon')

    // ポケモン情報からデータを格納
    const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1)
    const id = pokemon.id.toString().padStart(3, '0')
    const poke_types = pokemon.types.map(type => type.type.name)
    const type = main_types.find(type => poke_types.indexOf(type) > -1)
    const color = colors[type]

    // ポケモンの背景色を設定
    pokemonEl.style.backgroundColor = color

    // ポケモンカードのテンプレ
    const pokemonInnerHTML = `
    <div class="img-container">
        <img src="https://pokeres.bastionbot.org/images/pokemon/${pokemon.id}.png" alt="">
    </div>
    <div class="info">
        <span class="number">#${id}</span>
        <h3 class="name">${name}</h3>
        <small class="type">Type: <span>${type}</span> </small>
    </div>
    `

    // ポケモンカードのテンプレートを追加
    pokemonEl.innerHTML = pokemonInnerHTML

    // poke_containerの子要素として追加
    poke_container.appendChild(pokemonEl)
}

// ポケモンカードを作成

const createPokemonCard = (pokemon) => {

// div要素を作成

const pokemonEl = document.createElement('div')

// pokemonクラスを追加

pokemonEl.classList.add('pokemon')

// ポケモン情報からデータを格納

const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1)

const id = pokemon.id.toString().padStart(3, '0')

const poke_types = pokemon.types.map(type => type.type.name)

const type = main_types.find(type => poke_types.indexOf(type) > -1)

const color = colors[type]

// ポケモンの背景色を設定

pokemonEl.style.backgroundColor = color

// ポケモンカードのテンプレ

const pokemonInnerHTML = `

</div>

</div>

// ポケモンカードのテンプレートを追加

pokemonEl.innerHTML = pokemonInnerHTML

// poke_containerの子要素として追加

poke_container.appendChild(pokemonEl)

}

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

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

これで完成です。

おわりに

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

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

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

それでは、また!

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 要素を取得する
const poke_container = document.getElementById('poke-container')

// 定数を定義
// 表示するポケモン数
const pokemon_count = 151

// カラー
const colors = {
  fire: '#FDDFDF',
  grass: '#DEFDE0',
	electric: '#FCF7DE',
	water: '#DEF3FD',
	ground: '#f4e7da',
	rock: '#d5d5d4',
	fairy: '#fceaff',
	poison: '#98d7a5',
	bug: '#f8d5a3',
	dragon: '#97b3e6',
	psychic: '#eaeda1',
	flying: '#F5F5F5',
	fighting: '#E6E0D4',
	normal: '#F5F5F5'
}

// colorsのkeyを配列に格納
const main_types = Object.keys(colors)

// ポケモン取得
const fetchPokemons = async () => {
    for(let i = 1; i <= pokemon_count; i++) {
        await getPokemon(i)
    }
}

const getPokemon = async (id) => {
    const url = `https://pokeapi.co/api/v2/pokemon/${id}`
    const res = await fetch(url)
    const data = await res.json()
    createPokemonCard(data)
}

// ポケモンカードを作成
const createPokemonCard = (pokemon) => {
    // div要素を作成
    const pokemonEl = document.createElement('div')
    // pokemonクラスを追加
    pokemonEl.classList.add('pokemon')

    // ポケモン情報からデータを格納
    const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1)
    const id = pokemon.id.toString().padStart(3, '0')
    const poke_types = pokemon.types.map(type => type.type.name)
    const type = main_types.find(type => poke_types.indexOf(type) > -1)
    const color = colors[type]

    // ポケモンの背景色を設定
    pokemonEl.style.backgroundColor = color

    // ポケモンカードのテンプレ
    const pokemonInnerHTML = `
    <div class="img-container">
        <img src="https://pokeres.bastionbot.org/images/pokemon/${pokemon.id}.png" alt="">
    </div>
    <div class="info">
        <span class="number">#${id}</span>
        <h3 class="name">${name}</h3>
        <small class="type">Type: <span>${type}</span> </small>
    </div>
    `

    // ポケモンカードのテンプレートを追加
    pokemonEl.innerHTML = pokemonInnerHTML

    // poke_containerの子要素として追加
    poke_container.appendChild(pokemonEl)
}

// ページが読み込まれた時に実行
fetchPokemons()

// 要素を取得する

const poke_container = document.getElementById('poke-container')

// 定数を定義

// 表示するポケモン数

const pokemon_count = 151

// カラー

const colors = {

fire: '#FDDFDF',

grass: '#DEFDE0',

electric: '#FCF7DE',

water: '#DEF3FD',

ground: '#f4e7da',

rock: '#d5d5d4',

fairy: '#fceaff',

poison: '#98d7a5',

bug: '#f8d5a3',

dragon: '#97b3e6',

psychic: '#eaeda1',

flying: '#F5F5F5',

fighting: '#E6E0D4',

normal: '#F5F5F5'

}

// colorsのkeyを配列に格納

const main_types = Object.keys(colors)

// ポケモン取得

const fetchPokemons = async () => {

for(let i = 1; i <= pokemon_count; i++) {

await getPokemon(i)

}

const getPokemon = async (id) => {

const url = `https://pokeapi.co/api/v2/pokemon/${id}`

const res = await fetch(url)

const data = await res.json()

createPokemonCard(data)

}

// ポケモンカードを作成

const createPokemonCard = (pokemon) => {

// div要素を作成

const pokemonEl = document.createElement('div')

// pokemonクラスを追加

pokemonEl.classList.add('pokemon')

// ポケモン情報からデータを格納

const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1)

const id = pokemon.id.toString().padStart(3, '0')

const poke_types = pokemon.types.map(type => type.type.name)

const type = main_types.find(type => poke_types.indexOf(type) > -1)

const color = colors[type]

// ポケモンの背景色を設定

pokemonEl.style.backgroundColor = color

// ポケモンカードのテンプレ

const pokemonInnerHTML = `

</div>

</div>

// ポケモンカードのテンプレートを追加

pokemonEl.innerHTML = pokemonInnerHTML

// poke_containerの子要素として追加

poke_container.appendChild(pokemonEl)

}

// ページが読み込まれた時に実行

fetchPokemons()

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

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

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

定数を定義

ポケモン取得

ポケモンカードを作成

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

定数を定義

ポケモン取得

ポケモンカードを作成

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

[Go言語]Builderパターン ~Functional Builder~

Go言語でterminalAPIを作ろう!

JavaScriptで虫取りゲームを作ろう!

TypeScriptの型チェック

[Go言語]Mementoパターンを学ぼう!

JavaScriptでNETFLIXのモバイルナビゲーションを作ろう!

[React]~MovieApp1: ~画面遷移の実装をしよう!~

Go言語とPostgreSQLで遊ぼう!~CRUD編~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル