Node.jsを学ぶ #2

学習の内容説明

ポケモンデータの詳細情報を非同期処理で取得し、表示する部分です。以下のように概要をまとめます

1. ローディング表示の追加

• ポケモンデータを取得する際に、非同期処理が完了するまで「ロード中」と表示させる処理を追加しました。
• 状態管理としてuseStateを使い、ローディング状態を管理。
• 初期状態をtrueに設定し、データ取得完了後にfalseに変更。
• JSX内で三項演算子を使って、ローディング中とデータ表示を切り替えるようにしました。

// ReactのuseStateフックを使用して、loadingという状態変数を初期値trueで定義
const [loading, setLoading] = useState(true);

useEffect(() => {
  // コンポーネントがマウントされた時にfetchAllPokemonData関数を呼び出して
  // データの取得が完了したら、setLoadingをfalseにしてローディングが完了したことを示す
  fetchAllPokemonData()
    .then(() => setLoading(false)); // データ取得後にloading状態をfalseに設定
}, []); // 空の依存配列を指定することで、コンポーネントのマウント時にのみ実行

return (
  <div>
    {/* ローディング中は「ロード中...」と表示し、データ取得が完了したら「ポケモンデータを取得しました」と表示 */}
    {loading ? <h1>ロード中...</h1> : <h1>ポケモンデータを取得しました</h1>}
  </div>
);

~単語意味~
JSX:（JavaScript XML）Reactで使うHTMLに似た構文のことを指します。Reactコンポーネント内で書かれる、UIを表現する部分がJSXです。JSXの特徴は、HTMLに似ているものの、JavaScriptコードとしても機能する点です。具体的には、return の中で書かれる部分がJSXです。ここにHTMLタグのようなものを書いて、Reactコンポーネントの表示を決めます。

1. ポケモンの詳細データ取得

• まずは、基本的なポケモンの一覧を取得した後、各ポケモンの詳細データをURLから取得する処理を追加しました。
• 各ポケモンのurlを使って、その詳細情報を取得するためにPromise.all()を使用。
• Promise.all()を使用することで、全てのポケモンの詳細情報を同時に非同期で取得し、すべてのデータが揃ったら結果を返すようにしています。

const loadPokemonData = (results) => {
  return Promise.all(results.map(pokemon => fetch(pokemon.url).then(res => res.json())));
};

1. getPokemon関数の作成
   各ポケモンの詳細情報を取得するgetPokemon関数を作成しました。この関数は、各ポケモンのurlを受け取り、さらにフェッチを行い、詳細なデータを取得します。
   javascript
   コードをコピーする
   const getPokemon = (url) => {
   return new Promise((resolve, reject) => {
   fetch(url)
   .then((response) => response.json())
   .then((data) => resolve(data))
   .catch((error) => reject(error));
   });
   };
2. ログの確認
   コンソールログで取得した詳細情報を確認しました。詳細には、ポケモンのタイプ、アビリティ、重さ、身長などが含まれていました。
3. Promise.allの利用
   Promise.all()を使うことで、全ての非同期処理が完了するのを待ってから、まとめて結果を返すことができました。このように複数の非同期処理を効率的にまとめて扱えます。
   javascript
   コードをコピーする
   const pokemonData = await Promise.all(results.map(pokemon => getPokemon(pokemon.url)));
   次のステップ
   詳細なデータを表示するUIを整えたり、エラーハンドリングを追加したりすることが考えられます。
   UIで各ポケモンの詳細を一覧表示し、デザインを整えるなどの作業を行うと良いでしょう。

グリッドを使って見た目を整える

App.cssに書き込む

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: center;
  gap: 20px;
  margin-top: 20px;

    box-shadow: 3px 7px 15px -5px #777777;
    border-radius: 10px;
    background-color: #fff;

• Card.cssにボックスシャドウジェネレーターで作った影をつける

-参照下のリンク-
https://hiroyuki-n.github.io/boxShadow_generator/

Navbarを入れる

<>

//全体のApp.jsにあるreturn部分
</>

• 空でもdivでもいいのでタグで囲む

   <Navbar />

• <>の真下に挿入

import "./Navbar.css"

const Navbar = () => {
  return (
    <nav>
      ポケモン図鑑
    </nav>
  )
}

• Navbar.jsとNavbar.cssを作成。
• Navbar.jsにcssを読み込み
• <nav>タグでタイトルを囲む

    background-color: #efc779;
    color: white;
    height: 65px;
    font-weight: 600;
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;