デモアプリポケモンの画像を一覧で表示する[JavaScript]

Last updated at 2024-06-10Posted at 2024-06-10

今まで、学んできた内容を復習しながら、簡単なデモアプリを作成していこうと思います。

デモアプリの内容：
github上に公開されているPOKEMON APIを使い、
POKEMONの画像を151匹、表示させる簡単な一覧画面を作成していきます。

こちらでは、作成した内容を要約しながら、作成手順や具体的に使用した関数やロジックの内容をまとめていけたらと思います。

アプリの内容紹介

作成するアプリの内容を簡単にまとめていきたいと思います。

作成手順：

1.HTMLファイル(index.html)、CSSファイル(app.css)、JavaScriptファイル(app.js)をそれぞれ用意します。

2.HTMLファイルは、CSSファイルとJavaScriptファイルを接続しておきます。

3.HTMLファイルは、h1でタイトルを表示、sectionで入れ物を作成します。

4.CSSファイルは、テキストと画像の調整を行います。

5.JavaScriptファイルに、ロジックを書いていきます。
5-1. github上に公開されている下記のURLを使用してポケモンの画像を1番〜151番まで表示させます。
なお、下記URLは末尾、pngの直前の数字を変更することで、その番号に対応した数字のポケモンの画像を出力させます。
5-2. ポケモンの画像の下に＃「数字」とそのポケモンに対応した数字を出力します。

ポケモンの画像を出力するURL：
https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png

表示されるポケモンの画像例：

画像の例では、1.pngなので、ポケモン番号１番のフシギダネの画像が表示されています。

HTML ファイル

まず、HTMLファイルでは、CSSファイルとJavaScriptファイルの読み込みをします。

headの最下部にcssファイルのリンクを記載します。

<link rel="stylesheet" href="app.css">

bodyの最下部にJavaScriptファイルへの接続を記載します。

<script src="app.js"></script>

続いて、bodyの中の操作を記載していきます。

今回は、タイトルとして、h1にポケモン図鑑と記載します。

<h1>ポケモン図鑑</h1>

ポケモンの一覧表を入れておく器として、sectionを作成します。
また、このsectionにスタイルを当てやすいように予め、containerとidを割り当てておきます。

<section id = "container">

</section>

HTMLファイルの操作内容：

CSSファイルとJavaScriptファイルの接続をします。
h1を作成します。（一覧表の見出し）
sectionを作成します。(一覧表の器)
3-1. sectionにはスタイルを当てるため、idを割り当てます。

JavaScript ファイル

DOMを使い、id containerを取得します。
画像を表示するURLの一部をbaseURLという変数に保存します。

const container = document.querySelector('#container');
const baseURL = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/';

画像を作成するロジック：

画像の要素を作成、作成した要素をnewImgという変数に保存します。
img要素のsrcに表示したい画像のURLを保存します。
2-1. 画像のsrcには、表示したい151匹分の画像を挿入するため、ループを回して、URLを保存します。
2-2. 画像のURLは、下記３つを組み合わせて使用して作成します。
・事前に保存しておいたbaseURL
・ループ処理で獲得した1を＋する数字 i
・末尾 .png

for (let i = 1; i <= 151; i++) {
    const newImg = document.createElement('img');
    newImg.src = `${baseURL}${i}.png`
};

ポケモンの画像の下に＃「数字」とそのポケモンに対応した数字を出力します。

構成イメージ：

・divを作成します。
・divの中に、画像と、spanで「#数字」と出力するようにしたいと思います。

<div>
    <img></img>//ポケモンの画像が出力
    <span></span>//#「数字」※ポケモンに対応した数字
</div>

divをDOMで作成します。divの名前をpokemonとします。
同じく、spanも作成します。
innnerTextを使用し、作成したspanに対して、「#」とそれぞれのポケモンに対応した数字を入力するために、ループの「i」をテンプレートリテラルを使用して出力します。

作成したdiv(pokemon)に対して画像を追加します。
作成したdiv(pokemon)に対してspanを追加します。

containerに対してdiv(pokemon)を追加します。


for (let i = 1; i <= 151; i++) {
    const pokemon = document.createElent('div');
    pokemon.classList.add('pokemon');
    
    const span = document.createElent('span');
    span.innerText = `#${i}`;
    const newImg = document.createElement('img');
    newImg.src = `${baseURL}${i}.png`
};

pokemon.appendChild(newImg);
pokemon.appendChild(span);
container.appendChild(pokemon);

上記の状態で、一覧表を確認してみると、縦積みに画像が表示されてしまいます。

その為、CSSを調整する必要があります。

また、CSSでクラスを割り当てるために、作成したdivに対して、pokemonというクラスを追加します。

JavaScriptファイルの操作内容：

id containerを取得
URLを一部、変数として保存
画像を保存するimgタグを作成
3-1. 画像を表示するロジックの作成
3-2. 画像をimgタグに挿入
pokemonというdivを作成
#数字を入れるspanを作成
5-1. spanに#と数字を挿入。
pokemon(div)にnewImgを挿入
pokemon(div)にspanを挿入
containerにpokemon(div)を挿入
CSSでスタイルを当てるためのpokemonクラスをdivに付与。

CSS ファイル

作成したpokemonクラスのdivに対してスタイルを当てます。

displayプロパティの変更。

divはデフォルトでは、ブロック要素になっているので、
並びをインライン、中身をブロック要素に変更します。（inline-block）

imgは、デフォルトでは、インライン要素になっているので、
画像と#数字を縦積みにするために、ブロック要素に変更します。(block)

数字の配置を中心にするために、text-align-centerを使用します。

.pokemon {
    display: inline-block;
    text-align:center;
}

.pokemon img {
    display: block;
}

CSSファイルの操作内容：

divクラスpokemonに対してスタイルを当てる
1-1. displayをinline-blockに変更
1-2. text-alignをcenterに変更
divクラスpokemonのimg要素に対してスタイルを当てる
displayをblockに変更。

最終的な完成一覧になります。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

デモアプリ ポケモンの画像を一覧で表示する[JavaScript]

目次：