2024前回に続き、学習記録アプリのチュートリアルの2回目です。Service)であるSupabaseを利用してみます。コードは前回の記事をベースに変更していきます。前回の記事はこちらです。1https://www.bau-haus.com/blog/2024/09/08/reactチュートリアル-学習記録アプリ-1今回の記事は、以下の記事をモチーフに作成した学習記録アプリのチュートリアルです。課題3をベースに進めてます。Service)であるSupabaseを利用したものとなっていますが、この記事では、データはローカルストレージに格納する方式としています。Supabaseを活用したものは、次回に紹介したいと思います。はじめに本記事は、Reactの初学者向けのチュートリアルコンテンツです。上記参考サイトの機能をベースに記載しています。GitHub、Firebase連携はじめに本記事は、Reactの初学者向けのチュートリアルコンテンツです。前回の記事をベースにBaaSである、Supabaseのデータ処理を実装し、実際にアプリケーションをデプロイしてユーザーが使えるリリースまでを行えます。IconsBaaSとしてSupabaseホスティングサービスは、GoogleのFirebaseを利用しています。本記事で以下の対応が可能です。モバイルおよびウェブアプリ開発プラットフォームです。Supabase環境の準備まずは、Supabaseのアカウントを作成します。https://supabase.com/GitHubアカウントとの連携も出来ます。アカウント作成後、NewProjectで新しいプロジェクトを作成します。プロジェクト名はお好きなものをつけてください。Regionの選択はデフォルトで結構です(違うものでもいいかと思います)。Editor」を選択します。table]を選択します。Nameは「learning_record」で(※お好きなもので結構です)。Columnsは以下内容で設定してください。次に作成したtableにデータを作成しておきます。lowをクリックします。右側にデータの内容を入力するエリアが表示されますので、データを入力します。初期データとして下記のReactとTypeScriptの2つセットします(idは自動でセットされますので、入力不要です)。5「learning_record」の内容が以下のように表示されるかと思います。続いて作成したテーブルに対して、ポリシー作成を行います。これはテーブルのデータ操作(SELECT,INSERT,UPDATE,DELETE)に対する権限を設定するものです。Policyをクリックします。以下画面のように設定していきます。Name:任意のポリシー名を入力します。policyとしてます。Command:ALLを選択、全ての操作に共通のポリシーとしてます。policyをクリックしてポリシーを保存します。続いて、前回開発したプロジェクト、コードベースに、SupabaseのDBとの連携機能を実装していきます。(前回の記事の対応されていない方も、コードはこれから全部記載していきますので、大丈夫です。環境構築の箇所は実施お願いします。UIのインポートと<ChakraProvider>タグで囲む記載を忘れずに)。supabaseのパッケージをインストールします。ターミナルにて、プロジェクトのディレクトに移動し、下記コマンドを投入します。@supabase/supabase-js続いてVSCode等のエディタでプロジェクトを開きます。Supabase環境変数の設定Supabaseのテーブルにアクセスする為の環境変数を定義したファイルを作成します。プロジェクトルート配下に、.envと言うファイルを作成してください。.envに下記の内容を記載します。/.envVITE_SUPABASE_URL=Supabaseのアクセス先URLVITE_SUPABASE_ANON_KEY=SupabaseAPIキーここで、VITE_SUPABASE_URLとVITE_SUPABASE_ANON_KEYを記載しますが、それぞれの内容は、Supabaseのサイトにて確認します。keyをコピー(下図参照)し、上記の.envにそれぞれ貼り付けます。次に、SupabaseのDBデータ呼出の機能を切り出して作成します。他のコンポーネントからDBデータの参照や更新等の処理を行う際は、この機能を呼び出して利用する形です。/src配下にsupabaseClient.tsと言うファイルを作成します。以下コードを記載します。supabaseKey);.envの環境変数もこちらのファイルに記載する事も考えそうですが、.envと本ファイルを分離するのはセキュリティ的理由です。この辺は以下記事をご参考ください。今回はSupabaseを使ってデータ取得を行います。続いて、Supabaseのデータを読み込み、学習記録画面(App.tsx)に表示させる処理を実装します。型定義ファイルの作成まず、DBデータの読み込みデータの型定義を独立したコンポーネントで作成します。これは別ファイルを作らなければならないと言うわけではありませんが、型定義が複雑になってくる、あるいは、各コンポーネントで共通的に使うと言うケースが多い場合は、型定義専用のコンポーネントを作成するのが合理的です。/src配下に、studyData.tsと言うファイルを作成します。studyData.tsに下記コードを記載します。Supabaseのテーブル「learning_record」で定義されている項目です。number}前回のローカルストレージ方式では、idは特に定義はありませんでしたが、DBの操作の場合、idをキーに操作する場合もありますので、idの定義もしています。続いて、この型定義を、各コンポーネントに反映、インポートします。型定義、StudyDataをインポートしています。stateのlearnings,setLearningsの型をStudyDataとして定義してます。続いて、NewEntry.tsxです。型定義、StudyDataをインポートしています。setLearningの型をStudyDataとして定義し、また、idを新たに加えています。})//変更Edit.tsxです。同様に型定義、StudyDataをインポートしています。StudyDataの型に該当するものをStudyDataとして定義しています。void}Delete.tsxです。同様に型定義、StudyDataをインポートしています。StudyDataの型に該当するものをStudyDataとして定義しています。続いて、Supabaseのテーブルからデータをフェッチし、表示させる機能を実装します。これに伴い、これまでローカルストレージに格納・読出していた処理を廃止します。App.tsxからローカルストレージ格納機能の、savedLearning及び、呼出処理のuseEffect箇所を削除します。伴い、savedLearningを利用していた各コンポーネントから、当該機能を削除します。/src/App.tsx//下記、ローカルストレージ格納機能、savedLearningを削除します。};//下記、ローカルストレージ読出処理のuseEffect箇所を削除します。[]);//各コンポーネントに渡している、savedLearningを削除します。*/}/>NewEntry.tsxです(コード全文を記載してます)。savedLearning関連の記載を削除します。NewEntryEdit.tsxです(コード全文を記載してます)。savedLearning関連の記載を削除します。Edit;Delete.tsxです(コード全文を記載してます)。savedLearning関連の記載を削除します。以下のデータを削除します。Delete;続いて、App.tsxにSupabaseのテーブルデータ読込の機能を追加します。App.tsxのコード全体は以下となります。Appsupabase呼出機能である、supabaseClient.tsxをインポートしてます。DBデータ取得は時間がかかる場合がある為、データ取得状況のステート、loading,setLoadingと、DBからエラーが返った場合のエラー表示の為のステート、error,setErrorを新たに設けてます。エラーメッセージ用のstateを追加テーブルデータの取得は、fetchLearningsで定義。DBからのデータ取得はタイムラグがある為、非同期通信のasync/awaitを実装します。Qiitahttps://qiita.com/soarflat/items/1a9613e023200bbebcb3はじめに今更ですが、JavaScriptのasync/awaitに関する備忘録になります。};最初にloadingをtureにセットし、ローディング状態にstateを変更します。Supabaseのlearning_recordテーブルから、全てのデータをselectで取得してます。データ取得後、setLearningsでlearningsに取得データを格納し、loadingをfalseにセットし、ローディング状態を解除します。エラーの場合は、setErrorでエラーメッセージをセットしてます。続いて、ローカルストレージ利用時と同様に、ページを表示するタイミングでデータを持ってくるよう、useEffectでfetchLearningsを実行しています。[]);画面表示を行う、JSXの箇所に、ローディング状態、及びエラーの有無によって表示内容を変えています。/>でスピン状態のアニメーション表示、エラー時はエラー内容の表示、それ以外の場合は取得した学習データを表示してます。</TableContainer>ローディング中及びエラー時の画面は以下のようになります。データ取得が成功すれば以下画面となります。Supabaseのテーブル「learning_record」の初期セットしたデータが表示されるのが分かります。次にデータ更新機能を実装していきます。App.tsxにDBテーブルデータ更新用の関数、updateDbを定義します。非同期通信のasync/awaitで実装します。}最初にloadingをtureにセットし、ローディング状態にstateを変更します。Supabaseのlearning_recordテーブルに対し、マッチするidのtitleとtimeをupdateにより更新しています。データ更新後、fetchLearningsを呼び出し、更新後のテーブルデータを取得しApp.tsxに再レンダリング、及びローディング状態を解除してます。エラーの場合は、setErrorでエラーメッセージをセットしてます。次に、編集画面コンポーネントのEdit.tsxに渡すPropsを以下のように変更します。setErrorを渡しています。indexは削除してます(DB更新時は、idを元に処理を行いますので、mapで生成されたindexは不要になります)続いて、Edit.tsxの修正です。型定義と、受け取るPropsの修正です。削除App.tsxから渡されなくなったPropsの型定義削除と、Propsの設定を削除しています(index,learnings,setLearnings)。useState(“”)はPropsとして受け取るので削除します。次に、handleUpdateの修正です。以下の内容に変更します。}以前と同様に、各フィールドが空でなければ、データ更新処理として、DB更新関数updateDbを実行します。非同期通信のasync/awaitを利用してます。ローディング状態が解除されれば編集画面のモーダルをクローズ、App.tsxに更新されたデータが表示される形です。必要は無いのですが、loading状態のスピンアニメは、モーダルと、App.tsxの双方で動作します。モーダルを閉じた後も、App.tsxのスピンアニメが続いてる場合が多いため、モーダルを閉じるのに、setTimeoutを設定し、ローディング解除後の0.5秒後にモーダルを閉じるようにしてみました。ローディング処理中はローディング表示する形としています。}}>また、Cancelボタンをクリックしてモーダルを閉じる際は、errorを初期化する処理を追加しました。これをしないと、エラー表示された際、Cancelでモーダル閉じた後も、エラー内容が画面に表示され続ける為です。onClose()}}>Cancel</Button>これらにより、以下画面のような処理が実現できると思います。Supabaseのテーブルデータも更新されていることが分かります。現時点のApp.tsxとEdit.tsxの全体の内容は以下となります。続いて、テーブルデータの新規追加機能を実装していきます。App.tsxにDBへの新規登録機能、insertDbを定義します。同様に、非同期通信のasync/awaitで実装します。}最初にloadingをtureにセットし、ローディング状態にstateを変更します。Supabaseのlearning_recordテーブルに対し、titleとtimeをinsertにより登録しています。idは自動付与の為、不要です。データ更新後、fetchLearningsを呼び出し、更新後のテーブルデータを取得しApp.tsxに再レンダリング、及びローディング状態を解除してます。エラーの場合は、setErrorでエラーメッセージをセットしてます。次に、新規登録画面コンポーネントのNewEntry.tsxに渡すPropsを以下のように変更します。setErrorを渡しています。updateDbも渡すのは、登録内容に既存アイテムと重複があった場合の処理の為です。setLearningsは使用しなくなるため、削除してます。続いて、NewEntry.tsxの修正です。型定義と、受け取るPropsの修正です。useState(“”)はPropsとして受け取るので削除します。次に、handleEntryの修正です。以下の内容に変更します。}ローカルストレージ格納版と同様に、新規入力した学習タイトルが既に存在する場合は、学習時間を加算した上で、データ更新処理としてDB更新関数updateDbを実行します。存在しない新規内容であれば、新規登録として、insertDb関数を実行します。非同期通信のasync/awaitを利用してます。ローディング状態が解除されれば編集画面のモーダルをクローズ、App.tsxに更新されたデータが表示される形です。Edit.tsxと同様に、setTimeoutを設定し、ローディング解除後の0.5秒後にモーダルを閉じるようにしています。ローディング処理中はローディング表示する形としています。(元々からですが)入力データが空の場合のエラー処理も行っています。}}>これでDBへの新規登録が行えるようになりました。以下の画面のようになります。Supabaseのテーブルにも新規にデータが追加されていることが分かると思います。現時点のApp.tsxとNewEntry.tsxの全体の内容は以下となります。最後に、テーブルデータの削除機能を実装していきます。App.tsxにDBへの削除機能、deleteDbを定義します。これまでと同様に、非同期通信のasync/awaitで実装します。}loadingをtureにセットし、ローディング状態にstateを変更します。Supabaseのlearning_recordテーブルに対し、マッチするidに対しdeleteによりデータを削除しています。データ更新後、fetchLearningsを呼び出し、更新後のテーブルデータを取得しApp.tsxに再レンダリング、及びローディング状態を解除してます。エラーの場合は、setErrorでエラーメッセージをセットしてます。次に、削除画面コンポーネントのDelete.tsxに渡すPropsを以下のように変更します。loadingを渡しています。setLearningsを削除します(DB削除時は、idを元に処理を行いますので、mapで生成されたindexは不要になります)。続いて、Delete.tsxの修正です。型定義と、受け取るPropsの修正です。loading追加App.tsxから渡されなくなったPropsの型定義削除と、Propsの設定を削除しています(index,learnings,setLearnings)。loading)次に、handleDeleteの修正です。以下の内容に変更します。}deleteDb関数にて、id(learning.id)を元に指定されたlearningデータを削除します。ここまでと同様、setTimeoutを設定し、ローディング解除後の0.5秒後にモーダルを閉じるようにしています。ローディング処理中はローディング表示する形としています。onClick={handleDelete}>これで削除機能が出来ました。以下の画面の動きが実現されます。Supabaseのテーブルからもデータが削除されたのが確認できます。ここまでのApp.tsxとDelete.tsxの全体の内容は以下となります。以下のデータを削除します。Delete;なお、補足ですが、プロジェクトルート配下のindex.html、こちらの<title>の箇所を必要に応じて変更してください。App等に変更しましょう。一通り、コード作成が完了しましたので、リポジトリ作成とGitHubへのコミット(push)、そしてFirebaseとGitHub連携を行い、GitHubプッシュ時にFirebaseに自動デプロイされるようにします。この一連の作業は、過去投稿した下記記事に詳細を記載してますので、ご参照ください。プロジェクト名等を読み替えていただくだけです。注意点ですが、リポジトリは、Privateをおすすめします。.envの中にSupabase接続の機密情報が含まれるためです。.gitgnoreファイルにGitHub同期除外対象として、.envを定義する事も可能ですが、この場合は、GitHubでのビルド、Firebaseでのデプロイはうまく行きませんので(.env情報が無いため)、ご注意ください。初学者向け1https://www.bau-haus.com/blog/2024/08/22/reacttodoリストの作成-初学者向け1/#5Firebase少し前からReactの勉強をしてます。本日ご紹介するのは、よくある、Todoリストの作成です。こちらの記事を参考にしています。はじめに本記事は、Reactの初学者向けのコンテンツです。基本は上記サイトの内容そのまま試しています。所々、追加の説明を記載したり、追加でカスタマイズをしてたりもしてます。Reactの基本的な使い方から実際にアプリケーションをデプロイしてユーザーが使えるリリースまでを行えます。初学者向け、その2です。前回は基本的に元の参考記事に準じた内容でしたが、ここからは、元記事以外の、私のオリジナルでカスタマイズした内容となります。機能のブラッシュアップを行うのと、Firebase-GitHub連携を行い、GitHubにコミットの都度、Firebaseに自動でデプロイする仕組みを構築します。前回の記事はこちら前回参考にした記事はこちらですはじめに本記事は、Reactの初学者向けのコンテンツです。前回までの内容を更にブラッシュアップを実施し、GitHub、Firebaseとの連携を行い、アプリケーション...Firebaseでデプロイして、ドメインの箇所からリリースされたアプリケーションを確認してみましょう。以下画面のようにアプリが表示されれば公開完了です!学習記録アプリ、これで完了です。1https://www.bau-haus.com/blog/2024/09/08/reactチュートリアル-学習記録アプリ-1今回の記事は、以下の記事をモチーフに作成した学習記録アプリのチュートリアルです。課題3をベースに進めてます。Service)であるSupabaseを利用したものとなっていますが、この記事では、データはローカルストレージに格納する方式としています。Supabaseを活用したものは、次回に紹介したいと思います。はじめに本記事は、Reactの初学者向けのチュートリアルコンテンツです。上記参考サイトの機能をベースに記載しています。前回に続き、学習記録アプリのチュートリアルの2回目です。Service)であるSupabaseを利用してみます。コードは前回の記事をベースに変更していきます。前回の記事はこちらです。はじめに本記事は、Reactの初学者向けのチュートリアルコンテンツです。前回の記事をベースにBaaSである、Supabaseのデータ処理を実装し、実際にアプリケーションをデプロイしてユーザーが使えるリリースまでを行えます。学習記録アプリ、3回目です。前回まででSupabaseを活用したDBデータの読み込み・編集・削除を実装しました。今回は、Supabaseの認証機能を利用してユーザー認証の仕組みを設けてみたいと思います。内容が長くなってしまったので、前編・後編と2回に分けてお届けします。今回は前編となります。前編ではSupabaseの設定、環境構築、サインアップ機能の開発までを解説します。後編では、ログイン・ログアウト、パスワードリセット機能の実装を解説します。1回目、2回目の記事は以下となります。(後編)https://www.bau-haus.com/blog/2024/10/07/react-チュートリアル-学習記録アプリ-3-ユーザー認証-2Reactチュートリアル、学習記録アプリのユーザー認証実装、後編です。Supabaseの認証機能を利用したユーザー認証の仕組みを実装します。前編でユーザーサインアップ機能の開発まで行いました。後編では、ログイン、ログアウト、パスワードリセットの機能を実装していきます。はじめに本記事は、Reactの初学者向けのチュートリアルコンテンツです。ここではテーブルは新規作成してますが、前回作成したテーブルをDuplicateして利用するのもありだと思います。ポリシーは新規に作成し直しが必要です。コメントをキャンセルメールアドレスが公開されることはありません。