ポケモン コレクション アプリの作成: ローカル データ、インタラクティブ性、および JavaScript イベント

導入

このプロジェクトを開始したときの私の目標は単純でした。それは、ユーザーがポケモンとその詳細を探索できるポケモン コレクション アプリを作成することです。 JavaScript、Node.js、ローカル データを組み合わせて、ユーザーがポケモンの画像、能力、タイプを表示できるインタラクティブなアプリを構築しました。同時に、イベント リスナーや動的なコンテンツ更新などでスキルを磨きました。パートナーと一緒にこれに取り組んでいる間、私は特に自分の仕事に集中するつもりです。完成したのは次のとおりです!

---

プロジェクト概要

このアプリは、ポケモンの画像と統計のコレクションを表示するように設計されており、ユーザーが各ポケモンをクリックして詳細を表示したり、ホバー操作でメイン画像と代替画像を切り替えたりすることが簡単にできます。ポケモンのデータをローカルで提供したため、アプリ自体内でデータをレンダリング、更新、操作する方法に集中できました。

---

db.json を使用したローカル データのセットアップ

外部 API から取得する代わりに、名前、タイプ、能力、画像パスなどの属性を含むポケモン データを含むローカル db.json ファイルを作成しました。 http://localhost:3500/pokemon でローカル サーバーを実行すると、JavaScript の fetch メソッドを使用してこのデータを取得できました。簡略化されたセットアップにより、アプリを完全にオフラインで構築してテストすることができました。

---

コードのチュートリアル

ここでは、私がプロジェクトの重要な部分にどのように取り組んだかを見ていきます。

1. データを取得しています: 最初のステップは、ローカルサーバーからポケモンのデータを取得することでした。取得リクエストを処理し、ポケモンの詳細を JSON 形式で返す getAllPokemon 関数を作成しました。

   function getAllPokemon() {
     return fetch(pokemonURL).then(response => response.json());
   }

この関数は http://localhost:3500/pokemon からポケモン データを取得し、それを使用して各ポケモンを動的にレンダリングします。

1. ポケモンの表示: コレクションにデータを追加するには、取得したポケモン データを反復処理し、各アイテムを画像としてレンダリングする displayPokemons 関数を使用しました。また、各画像にクリック イベント リスナーを追加しました。これにより、選択するとポケモンの詳細が開きます。

   const displayPokemons = () => {
     getAllPokemon().then(pokemonArr => {
       pokemonArr.forEach(renderPokemon);
       handleClick(pokemonArr[0]); // Display first Pokémon by default
     });
   }

renderPokemon 関数は、各ポケモンの画像を作成し、スタイルを追加し、クリック イベントを添付して詳細を表示します。

1. イベント リスナー: インタラクティブ性の追加 このプロジェクトでは、主に 2 種類のイベント リスナーを使用しました。新しいポケモンを追加するためのフォーム送信リスナーと、画像を切り替えるためのマウスオーバー/マウスアウト イベントです。これらのリスナーにより、アプリはより魅力的でユーザーフレンドリーになりました。

• フォーム送信:
  
  新しいポケモンを追加するには、フォームに送信リスナーを設定します。これにより、入力フィールドから値が収集され、新しいポケモンがコレクションに追加されます。この新しいポケモンは、ページを更新することなくレンダリングされます:
  

     function getAllPokemon() {
       return fetch(pokemonURL).then(response => response.json());
     }
  

  ここで、event.preventDefault() はフォームのページの再読み込みを停止し、スムーズなユーザー エクスペリエンスを保証します。

• 代替画像のマウスオーバー イベント:
  
  ユーザーが詳細セクションでポケモンの画像の上にマウスを移動すると、別の画像に切り替わり、進化や変身をシミュレートします。マウスオーバー イベントはこのスイッチをトリガーし、マウスアウトはスイッチを元に戻します:
  

     const displayPokemons = () => {
       getAllPokemon().then(pokemonArr => {
         pokemonArr.forEach(renderPokemon);
         handleClick(pokemonArr[0]); // Display first Pokémon by default
       });
     }
  

  この効果は、ユーザーに各ポケモンと対話し、その特性を視覚的に探索する楽しい方法を提供します。

---

課題と学習ポイント

イベント リスナーや動的要素はすぐに追跡が困難になる可能性があるため、JavaScript をモジュール化して管理しやすく保つために JavaScript を構造化することが課題の 1 つでした。コードを小さな関数に分割し、イベント リスナーを選択的に使用してパフォーマンスと読みやすさを最適化する方法を学びました。

---

まとめ

このポケモン コレクション プロジェクトは、JavaScript を適用し、ローカル データの取得を実験し、魅力的なイベント駆動型のインタラクティブ性を追加するエキサイティングな方法でした。このアプリをゼロから構築することで、フロントエンドとバックエンドの両方のコンセプトに関する貴重な経験が得られ、将来的にはよりインタラクティブなプロジェクトを模索する意欲が湧いてきました。

GitHub で私のプロジェクトをチェックしてください!:

https://github.com/kelseyroche/phase-1-project-pokemon

以上がポケモン コレクション アプリの作成: ローカル データ、インタラクティブ性、および JavaScript イベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。