こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、PokeAPIを使って、ポケモンカードをJavaScriptで作りたいと思います。
demoは「こちら」で確認できます。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
ページ(HTML)の作成
最初にページを作成しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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> |
このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾
次にスタイルを記述しましょう。
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
@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からポケモン情報を取得し、その情報を元にカードを作成して、画面に表示します。
要素を取得する
最初に画面操作に必要な要素を取得します。
1 2 |
// 要素の取得 const container = document.getElementById('container') |
定数を定義
プログラム内で使う定数を定義しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// 定数を定義 // 表示するポケモン数 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) |
ポケモン取得
次は、ポケモンを取得する処理を実装します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// ポケモン取得 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関数は、これから作成します。
ポケモンカードを作成
最後にポケモンカードを作成します。
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 29 30 31 32 33 34 35 |
// ポケモンカードを作成 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) } |
これは、今までのアプリケーション開発で散々出てきている内容ですね。
createElementでカードの要素を作成し、取得したポケモン情報をその中に入れ、appendChildで画面に追加しています。
これで完成です。
おわりに
PokeAPIなんてあるんだ、へぇ〜〜。と言う感じですね。
ポケモンかぁ。。。懐かしいです。小学生の頃、レッドやってましたよ。
個人的にですが、初期の151匹が最もかっこよかったですね。
今回記事にした機能以外にも色々とできそうなので、今度はGo言語で実装してみます。
それでは、また!
JavaScriptまとめ
JavaScript ソースコード
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
// 要素を取得する 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() |
コメントを残す
コメントを投稿するにはログインしてください。