はじめに
この記事では、SvelteKitとSupabaseを使ってポケモンチーム選択アプリを開発するチュートリアルシリーズに取り組みます。SvelteKitはウェブアプリケーション開発のためのフレームワークで、Supabaseはファイアベースの代替オープンソースのバックエンドサービスを提供します。このチュートリアルの最後には、お気に入りのポケモンを選択し、自分のチームを保存できる完全に機能するアプリが完成します。
ポケモンAPIの設定
まず始めに、’lib’フォルダーに’Pokemon API.TS’ファイルを作成し、APIリクエストを処理します。最初の151匹のポケモン名を取得する’getPokemonList’関数と、特定のポケモンの情報を取得する’getPokemon’関数を定義します。APIリクエストの構造は重要で、リクエストが成功するためにはURLの最後にスラッシュを含める必要があります。
SvelteKitアプリケーションでのポケモンデータの取得
次に、’page.subscribe’関数を使ってルートが変更されたときにポケモンリストデータを取得します。取得したポケモンリストデータを’pokemonList’変数に格納します。また、ピカチュウなどの特定のポケモンのデータを取得し、ログに出力する方法も紹介します。
ユーザープロファイルとポケモンIDの管理
ユーザー情報を管理するため、ユーザーの説明文とお気に入りのポケモンIDのリストを格納する’profile’オブジェクトを作成します。これは、次のチュートリアルパートで、選択されたポケモンIDを使ってデータを取得し表示するために重要になります。
複数のポケモンデータの取得と表示
ユーザーが選択したポケモンIDのデータを取得する’refreshPokemonData’関数を作成します。’spread’演算子を使って’pokemonData’配列に取得したデータを追加します。ユーザー体験を滑らかにするために、’pokemonData’配列が未定義の場合に読み込み状態を条件付きで表示します。
ポケモンカードの表示
最後に、’each’ブロックを使って’pokemonData’配列の各オブジェクトに対してポケモンカードをレンダリングします。ポケモンの名前、タイプ、画像のソースを、ポケモンオブジェクトの適切なプロパティにアクセスして表示します。テスト用の背景色を削除し、ユーザーが選択したポケモンIDが変更されると、表示されるカードも更新されることを確認します。
まとめ
このチュートリアルでは、SvelteKitとSupabaseを使ってポケモンチーム選択アプリを構築する過程を説明しました。ポケモンAPIの設定、ユーザーデータの取得と管理、視覚的に魅力的なポケモン情報の表示など、さまざまな側面について学びました。このシリーズに沿って学習することで、これらの強力なツールを使ったモダンなウェブアプリケーション構築の経験を得ることができます。
ポイント:
- ‘Pokemon API.TS’ファイルを設定し、APIリクエストを処理する
- ‘page.subscribe’関数を使ってポケモンリストデータを取得し、保存する
- ユーザープロファイルと選択したポケモンIDを管理する
- ‘refreshPokemonData’関数を使って複数のポケモンデータを取得し表示する
- ‘each’ブロックを使ってポケモンカードをレンダリングし、読み込み状態を条件付きで表示する