2024Reactのチュートリアル記事です。今回の記事も、以下の記事をモチーフに作成した名刺アプリのチュートリアルです。名刺アプリの開発」をベースに進めてます。Service)であるSupabaseを利用したものとなってますので、同様にSupabaseを活用して開発したいと思います。参考記事ではCI/CDの為のテスト実装まで触れてますが、本記事ではテストまでは言及していません。機能面に焦点を当てています。記事が長くなってしまったので、前編・後編と2回に分けてお届けします。今回は前編となります。前編ではSupabaseの設定、環境構築、SupabaseのDBからテーブル情報の取得までを記載しています。後編では、新規データ登録、データ編集、データ削除機能の実装を解説します。データ取得機能の実装はじめに本記事は、Reactの初学者向けのチュートリアルコンテンツです。BaaSである、Supabaseのデータ処理を実装し、実際にアプリケーションをデプロイしてユーザーが使えるリリースまでを行えます。IconsBaaSとしてSupabaseホスティングサービスは、GoogleのFirebaseを利用しています。本記事で、以下の対応が可能です。モバイルおよびウェブアプリ開発プラットフォームです。Supabase環境の準備まずは、Supabaseのアカウントを作成します。https://supabase.com/GitHubアカウントとの連携も出来ます。アカウント作成後、NewProjectで新しいプロジェクトを作成します。プロジェクト名はお好きなものをつけてください。Regionの選択はデフォルトで結構です(違うものでもいいかと思います)。Editor」を選択します。table]を選択します。「users」「user_skill」「skills」の3つのテーブルを作成します。Columnsはそれぞれ以下内容で設定します。keysは不要です(これは外部キー連携の機能ですが、機会があれば、利用してみたいと思います)。次に作成したtableにデータを作成しておきます。lowをクリックします。右側にデータの内容を入力するエリアが表示されますので、データを入力します。初期データとして下記のデータをセットします。1skillsテーブルskillsデーブルについては以下の3つのデータを作成しておきます。Githubそれぞれのテーブル内容はSupabase上で以下のようになります。続いて作成したテーブルに対して、ポリシー作成を行います。これはテーブルのデータ操作(SELECT,INSERT,UPDATE,DELETE)に対する権限を設定するものです。Policyをクリックします。以下画面のように設定していきます。Name:任意のポリシー名を入力します。Command:ALLを選択、全ての操作に共通のポリシーとしてます。policyをクリックしてポリシーを保存します。上記はusersテーブルの例ですが、他のuser_skillテーブル、skillsテーブルも同じ手順でポリシーを作成します。これでSupabase側の設定は完了です。環境構築それでは開発環境の構築をしていきます。JavaScript実行環境のnode.jsとパッケージマネージャのnpmは既にある前提とします。(ない場合は、こちらの記事を参照頂ければと思います。初学者向け1https://www.bau-haus.com/blog/2024/08/22/reacttodoリストの作成-初学者向け1/#1少し前からReactの勉強をしてます。本日ご紹介するのは、よくある、Todoリストの作成です。こちらの記事を参考にしています。はじめに本記事は、Reactの初学者向けのコンテンツです。基本は上記サイトの内容そのまま試しています。所々、追加の説明を記載したり、追加でカスタマイズをしてたりもしてます。Reactの基本的な使い方から実際にアプリケーションをデプロイしてユーザーが使えるリリースまでを行えます。Routerを利用します。Routerは、複数のページを持つReactアプリケーションを構築する際に利用されるライブラリです。Routerを使うことで、ユーザーの操作に応じて表示内容を変更したり、URLにパラメータやクエリを含めて表示内容を変更したりすることができます。アールエフェクトhttps://reffect.co.jp/react/react-router#google_vignetteReactアプリケーションでシングルページアプリケーションを構築する場合はルーティングが必要になります。Routerライブラリが利用されています。Routerの使い方の基礎について説明を行っています。今回作成するアプリの構造は下図のイメージです。App.tsxトップコンポーネントです。components/Home.tsx名刺を表示するためのID入力及び新規登録ボタンを配置したHome画面です。ルーティングは”/”で設定します。components/Cards.tsxID入力後、入力されたIDを元に名刺情報をsupabaseより読み込み表示します。ルーティングは”/card/id名”でセットします。components/Edit.tsx名刺情報を編集・更新するコンポーネントです。UIのモーダルを利用します。components/Delete.tsx名刺情報を削除するコンポーネントです。UIのモーダルを利用します。components/Register.tsx新規にID、名刺情報を登録するコンポーネントです。ルーティングは、”/register”でセットします。環境準備まずは、Viteを利用してReactプロジェクトを作成します。入力しプロジェクト作成を実行します。プロジェクト名は「name-cards」で他の選択肢は下記の通りです。TypeScriptこれでReactの初期環境構築は完了です。続けて出てくる内容に従って、環境起動を行います。プロジェクト作成時に生成された、プロジェクトのライブラリの依存環境が記載されたpackage.jsonに明示されているすべてのパッケージをインストールします。devは、開発用のサーバの起動を行います。これにより、ブラウザで開発プロジェクトの実行結果を確認出来ます。通常開発サーバは、http://localhost:5173/で起動されます。UIのインストールです。Started」に「Installation」の記載がありますので、それに従ってターミナルでコマンドを投入してください。Routerをインストールします。react-router-domそして、Supabaseのライブラリをインストールします。コマンドで、再度、開発サーバを起動します。以降インストールする際に開発サーバーを停止してインストールコマンドを実行した場合は、同様に操作します。(開発サーバー起動したままで別のターミナルウィドウからインストールコマンドを実行することも可能です)次にVSCode等のエディタでコードを記載していきます。VSCode等のエディタでlearning-recordsディレクトリを開きます。ローカルで開発される方は、拡張性の高さ、使い勝手の良さ、作業効率などで、VSCodeが圧倒的にお薦めです。Windows.プロジェクトルートのsrcフォルダ内、App.tsxを開き、以下のようにコードを記載します。以下は、App.tsxの初期内容です。これらは不要ですので、一旦全て削除します。App次に以下のように記載します。必要な「枠」だけ残す形です。UIのボタンを配置してみます。"で表現します)で設定しています。数値のみの場合は、1=4px(0.25rem)の換算となります。m="5px"等px指定も可能です。tokensなお、Reactコンポーネントを挿入する場合は(上記で言えば<Button>)、<Button>と入力すれば、VSCodeが自動で関連すると思われるコンポートのインポートを自動で補完してくれます。下記は参考のGIF動画です。importされていなくても、コンポーネントタグの最後の一文字を削除しまた記載すればimportの候補先が表示され、自動でコードに挿入してくれます。UIのインポートと、<ChakraProvider>タグで囲む記載が必要です。‘./index.css’は削除してください。みるとグリーン(teal)のボタンが表示されます。続いて、Supabaseとの連携の為の環境を整備していきます。Supabaseの環境設定ファイルをプロジェクトルート直下に、また、Supabaseのクライアント機能のファイル、名刺データの型定義ファイルを/src配下に作成します。supabaseの環境設定:/.envsupabaseのクライアント機能:/src/supabaseClient.ts名刺データの型定義:/src/cardData.tsまずは、.envです。ここには、Supabase接続の為の機密情報を記載しています。/.envVITE_SUPABASE_URL=Supabaseのアクセス先URLVITE_SUPABASE_ANON_KEY=SupabaseAPIキーここで、VITE_SUPABASE_URLとVITE_SUPABASE_ANON_KEYを記載しますが、それぞれの内容は、Supabaseのサイトにて確認します。keyをコピー(下図参照)し、上記の.envにそれぞれ貼り付けます。続いて、/src/supabaseClient.tsです。下記コードを記載します。他のコンポーネントからDBデータの参照や更新等の処理を行う際は、この機能を呼び出して利用します。supabaseKey);そして、型定義の/src/cardData.tsです。下記のコードを記載します。string}github_id?など、?は付いているものは、オプションの意味となります。これらは、DBテーブル上も必須項目としていないためです。ベースデザインの作成まずはアプリのベースデザインを作成します。機能面はこのあと実装していきます。Homeコンポーネントまずは、アプリの最初に表示されるHomeコンポーネントを作成します。プロジェクトルートの/src配下に、componentsフォルダを新たに作成し、その中に、Home.tsxと言うファイルを作成します。Home.tsxに以下コードを記載します。「Home」とだけ表示される内容です。Routerの設定を行い、Home.tsxが”/”で表示されるようにします。Routerを設定します。冒頭のインポート箇所に、’react-router-dom’をインポートします。先程、<ChakraProvider>で囲んだ箇所を更に<BrowserRouter>で囲みます。<BrowserRouter>はルーティングを行うアプリケーション全体をラップするために使用します。続いて、App.tsxです。App冒頭のインポートの箇所に、”react-router-dom”と、Homeコンポーネントのインポートを追加します。Routerによる、ルート設定を記載してます。/>のような書き方をします。Homeはサイトルート”/”で設定してます。XML)は、コンポーネント指向のJavaScriptライブラリやフレームワーク(特にReact)で一般的に採用されている、JavaScriptの拡張構文です。JSXを用いると、JavaScriptのコード内にHTMLタグのような構文が埋め込み可能となり、より直感的かつ読みやすい形でUIのコードを表現することができます。それによって、開発者のコーディング体験や開発、デバッグの効率が上がります。XML)は、コンポーネント指向のJavaScriptライブラリやフレームワーク(特にReact)で一般的に採用されている、JavaScriptの拡張構文です。JSXを用いると、JavaScriptのコード内にHTMLタグのような構文が埋め込み可能となり、より直感的かつ読みやすい形でUIのコードを表現することができます。それによって、開発者のコーディング体験や開発、デバッグの効率が上がります。この状態で、http://localhost:5173/にアクセスしてみます。Homeコンポーネントを”/”でルート設定してますので、Homeと言う文字が表示されると思います。表示されることが確認出来ましたので、Home.tsxの内容を具体的に作成します。UIのコンポーネントをインポート、利用し、JSX箇所にCard、Box等UIパーツを配置しています。この内容で以下のような画面となります。今のところは、何も処理の実装はしていないので、ボタン等は表示されるだけです。この後、機能実装をしていきます。テーブルデータ表示機能まずは、Supabaseのテーブルデータを表示させる機能を作成していきます。HomeコンポーネントでIDを入力すると、IDがマッチする場合は、該当の名刺情報をSupabaseより読み込み、表示させます。ルート設定で表示させるようにします。名刺データを表示するコンポーネント、Cardsを新たに作成します。これに伴い、App.tsx、Home.tsxを変更します。componentsに、Cards.tsxと言うファイルを作成します。Cards.tsxのコードは後ほど記載します。その前にApp.tsxとHome.tsxを変更していきます。App.tsxまず、App.tsxです。以下は、App.tsxのコード全文です。App解説していきます。冒頭のインポート箇所ですが、useState、useNavigate、useToastと言った、フック(Hooks)を追加しています。フックはコンポーネントから呼び出し利用可能なReactの様々な機能です。interfacesその他、Cardsコンポーネント及びCardDataの型定義をインポートしています。App()以下は、フック関連の定義です。画面の状態や表示を変更したい値はuseStateを使います。useStateを利用するものとして、userid,cardData,loadingを定義しています。useridはユーザID情報で文字列(string)、cardDataは名刺データ情報で、先に作成したcardData.tsで定義された型を持つ配列です。loadingはboolean(真偽値)です。setState)です。Qiitahttps://qiita.com/KokiSakano/items/c16a8daf03acdbd6c911はじめにuseStateはReactの関数コンポーネントで使われる代表的なAPIの1つで、シンプルかつ便利なのでよく使われる馴染み深い機能です。UIのトースト機能を利用するものです。Routerの機能でuseNavigateはページ遷移をする際に使用されます。navigate()の引数に遷移先のパスを渡すことでページを遷移する事ができます。Qiitahttps://qiita.com/apollo_program/items/53e733c400ee266289b3React-Routerのv6からはAPIが色々変わり、ページ遷移にuseNavigateというAPIを使うようになりました。困った所として使用したコンポーネントを起点としてパスを積み上げ...続いて、操作関連の処理です。useridをキーにSupabaseのDBからデータを検索し取得する処理。}冒頭のselectDbは、Supabaseからデータを取得する関数です。今時点はDB処理のコードは記載していません。tureのみを返す内容となっています。後ほど、この機能は記載します。次の、handleInputChangeは、HomeコンポーネントのユーザID入力フィールドに値が入力されたら、useridのセット関数setUseridでuseridに入力値をセットしています。このように、値の入力やボタンのクリック等、JSXのイベントをきっかけに動作する処理は慣例的にhandle〜と名付けられるケースが多いです。下の、handleSearchは、Homeコンポーネントで入力されたIDを、ボタンクリックをトリガーにSelectDbに渡しSupabaseのDBにマッチする情報をIDをキーに読出する処理です。IDが入力されていれば、selectDbを実行。実行結果が成功すれば、useNavigate機能を定義した、navigate(`/card/${userid})で/card/id名に遷移します。ここで、id名は変数となりますので、${userid}という記載をして変数(定数)useridを挿入しています。ここに入力されたuseridが代入されます。`と言う見慣れないもので囲んでいます(JISキー配列でshift-@)。これは、「グレイヴ・アクセント」と言うもので、これで囲むと文字列と変数を結合出来ると言うものです。違い【知っておくと便利】|ひつじ@単純作業を消...https://note.com/monono1024/n/nae85352f788fたまには技術的なことを。あると思うのですが、これ、実は役割が違うんです。