\n改行できてません。して扱われるんですね。UIのトーストでエラー表示します。トーストは下記のようなメッセージ枠を表示する機能です。最後にJSXの箇所についてです。)ルート設定の冒頭のHomeコンポーネントについては、Homeに渡すデータ群(Props)を追記しています。handleSearchです。言う書き方になってます。続いて、今回作成するCardsコンポーネントのルート設定を追加しています。コロンを付与する形になります。これにより変数を反映した可変のパスとなります。Home.tsx続いて、Home.tsxについてです。下記に変更後のHome.tsxコード全文を掲載します。Home;まず冒頭のtypesの定義について説明します。Promise<void>;//handleSearchの型、関数}//追加ここまでApp.tsxで記載した通り、App.tsxからHomeにPropsを渡しますので、渡されるPropsの型をHomePropsとして定義しています。loadingについては記載そのままです。handleInputChangeと、handleSearchは関数なので、特殊な書き方になっています。VSCodeを利用している場合は、例えばこの関数を定義しているApp.tsx上で関数上にマウスを合わせると型情報がポップアップ表示されます。これをコピーしてそのまま貼り付ければOKです。次に、Homeコンポーネントの定義箇所です。{//変更Porpsを渡されますので、Homeコンポーネントとしての型定義を追加しています。Homeの型は、React.FC<HomeProps>となります。HomePropsは先のtypeの箇所で設定した型定義です。Qiitahttps://qiita.com/kim_t0814/items/50d46b5f560831005ebcはじめに前職ではTypescriptやReactに触れる事もなく、素のjsやvue.jsを触ることが多く転職を機にReactを触る機会が大分増えてきました。App.tsxより渡されるPropsを記載します。続いて、JSXの箇所です。)InputとButtonの箇所にオプションを追加しています。Input箇所は、valueとしてuseridを設定し、フィールドに値が入力されたら、入力値をuseridとして、App.tsxで定義したhandleInputChangeを呼び出しています。これによりsetUseridにて値がuseridにセットされます。「名刺を表示」Buttonは、クリックすると、App.tsxで定義したhandleSearchを呼び出し、DBデータを取得します(現時点はDBデータ取得処理はまだ記載してないので、クリックしてもデータ取得はされません)。その他、データ取得中はローディング状態にして、ローディグ中である事がわかるようなスピンアニメーションとLoadingの表記をするよう設定しています。Cards.tsxそれでは、Cards.tsxの中身を記載していきます。以下内容となります(コード全文です。Cards;解説していきます。冒頭のインポート箇所と、type設定、コンポーネント定義の箇所です。useNavigate();//useNavigateの利用インポートについては、記載の通りです。Routerについては、useNavigateに加え、Link機能をインポートします。これはaタグと同等のものとなりますが、クリックした際にページ全体をリロードするaタグとは異なりページ内の更新が必要な箇所のみ更新を行うのがLinkコンポーネントです。Iconsのパーツを利用しますので、そのインポートをしています。setCardDataがPropsとして渡されますので、その定義を行っています。cardDataは、CardData(/src/cardData.ts)で定義された型情報を持った、配列です。setCardDataは4.2で記載したVSCode上でマウスオーバーした際にポップアップ表示される型情報を記載しています。Cardsコンポーネントの型定義については、先のHome.tsxと同様ですが、React.FC<CardsProps>となります。App.tsxより渡されるPropsを記載します。RouterのuseNavigateを利用する為のconst定義です。続いて、JSX箇所です。UIの<Card>コンポーネントで構成しています。mapによりcardData配列の中身をレンダリングしてます。`)を利用して埋め込んでいます。}}とあり、このフィールドはHTMLタグを許容する形となってるのですが、そのHTMLデータをHTMLとして表示させるためのメソッドです。dangerouslySetInnerHTMLと言う名前通り、セキュリティリスクがあるものとなってます。HTMLが埋め込めるため、XSS攻撃などのリスクが発生します。ここでは、このまま利用していきますが、これを安全化するサニタイズの手法等もあるようです。Qiitahttps://qiita.com/ushi_osushi/items/2c09e2d3a1f3db63e5a3dangerouslySetInnerHTMLとは?dangerouslySetInnerHTMLはReactのプロパティで、HTML形式の文字列をHTMLとして扱い、そのHTMLをコンポーネント...<Button>として、削除ボタンと戻るボタンを設置しています。削除ボタンは今時点は機能しません。後で、削除機能を作成する際に実装します。戻るボタンは、ocClickでcardData初期化とuseNavigateによる”/”への遷移を設定しています。この時点で以下のような画面の動きが実現出来ると思います。HomeのIDの箇所は、今のところ、selectDbでtrueしか返さない設定となってますので、何かしら入力すればCards画面に遷移します。データは何も取得しないので、中身は何もない状態となります。UIのトーストでエラー表示されます。データ取得機能の実装それでは、実際にSupabaseからデータを取得する機能を作成します。現状、空の状態のselectDbに処理を記述していきます。App.tsxを以下のように変更していきます。"./supabaseClient";//supabaseクライアントインポート追加まず、2.3で作成したsupabaseClientのインポートを追加します。続いて、selectDbにSupabaseのテーブルデータ取得のコードを記載していきますが、ここは少々複雑です。Card.tsxで記載したデータ表示に必要な情報とSupabaseのテーブルとの関係は下記の通りとなります。usersこの内、skillsについてですが、今回テーブルに予め登録した、sample_idの場合、sample_idのskill_idはuser_skillテーブルにあり、その値は1です。skillsはskillsテーブル上でidに紐付く形で、nameで定義されています。user_skillsのskill_idが1の場合は、skillsは、skillsテーブル、id:1のReactとなります。(下図参照ください)この構造を踏まえて、Supabaseのテーブルから情報を取得するプロセスは以下のようになります。同様にuseridをキーにマッチするskill_idをuser_skillテーブルから取得user_skillテーブルから取得したskill_idにマッチするnameデータをskillsテーブルから取得、そのデータをskillsとして設定それでは、selectDbのコードを見ていきます。//タイムラグがが想定されるので、非同期通信async/awaitで実装。};処理のステップを4つ設けてます。各ステップで取得したデータを集約なお、SupabaseはPostgreSQLをベースにしたRDBですので、複数テーブルの結合は外部キーの設定で可能で、上記のような複雑なプロセスを使わなくても一括して複数テーブルに跨るデータの取得は可能です。そちらも試行してたのですが、今ひとつ意図通りにならず、ステップbyステップの処理としました。冒頭の箇所及びStep1についてです。//タイムラグがが想定されるので、非同期通信async/awaitで実装。内容は上記コードのコメントに記載した通りです。関数の型としては、試行錯誤の過程で、どうもうまく行かないケースがあったので、明示的に成否を返すboolean型として、失敗時はfalseをreturnさせてます(最終的に全ステップ通ればtrueを返します)。最初にローディング状態をローディング中にセットします。よるsupabaseクライアント機能)にてDBに接続し、データを取得しています。UIのトースト機能でエラーメッセージを表示させています。その時点で、ローディングを解除し、処理失敗としてfalseをリターンしてます。Step1の取得データをコンソールに表示させています。skill.skill_id);//取得したデータをmapで回し、skill_idsに格納Step1と同様ですが、supabase関数で、useridをキーにuser_skillテーブルよりskill_id取得してます。エラーの場合は、同様にトーストでエラー表示、ローディング状態解除と、falseをリターン。処理成功時は、コンソールにstep2として取得したデータを表示してます。最後に取得したデータをskill_idsに格納してます。この際、Supabaseから返されるデータは配列となりますので、mapで回して格納しています(実際のデータは1組しか無いので、配列番号[0]を格納するやり方もあると思います)。skill.name);//取得したデータをmapで回し、skillsStringに格納これまでと同じような操作です。supabase関数で、Step2でセットした、skill_idsをキーにskillsテーブルよりnameを取得してます。エラーの場合は、同様にトーストでエラー表示、ローディング状態解除と、falseをリターン。処理成功時は、コンソールにstep3として取得したデータを表示してます。最後に取得したデータをskillsStringに格納してます。この際、Supabaseから返されるデータは配列となりますので、mapで回して格納しています(Step2と同様、実際のデータは1組しか無いので、配列番号[0]を格納するやり方もあると思います)。最後のStep4です。データ取得に成功した場合はtrueを返す};Step1,2,3と処理して取得したデータをこのStep4で集約しています。combinedDataと定義した定数に、mapを回して、Step1データにStep2、3のデータを追加しています。これも配列の為の処理で、実際は1個の配列データなので、[0]のみの操作でもいいと思います。skill_idはCardsでの表示には利用しないものですが、データ新規登録や編集時の際のスキル選択肢として利用しますので、格納する形にしています。コンソールにstep4として集約したデータを表示し、combinedDataとして集約したデータをuseStateのsetCardDataでcardDataにセットしてます。UIのトーストで「データを取得しました」のメッセージ表示を設定しています。最後に全Step処理完了時に、ロディング状態を解除し、trueをリターンしています。selectDbを利用した処理は既に組み込み済ですので、他のコンポーネントの変更箇所はありません。この時点で以下の画面の動きとなります。コンソールにも以下のように各Step毎の取得データが表示されます。ここまでで、Supabase上のテーブルからデータを取得し表示する機能が実現できました。前編はここまでとします。後編では、新規データ登録機能、データ編集・削除機能、GitHub、Firebase連携について説明したいと思います。コメントをキャンセルメールアドレスが公開されることはありません。