WordPressのカスタムデータベースで登録ユーザーかどうかを判定
WordPressを用いたログイン機能が必要なWebアプリ開発で必須となる、登録ユーザーが重複しているかどうかの確認の実装方法についてを記述していきます。 WordPressのデータベースオブジェクトが格納されているグローバル変数にアクセスし、テーブル名を定義 global $wpdbでWordPressデータベースのオブジェクトにアクセス。 該当のテーブル名称を$wpdb->prefix . ‘テーブル名称’;で取得。 global $wpdb; $table_name = $wpdb->prefix . '該当テーブルの名称'; パラメーターを取得 サインアップ関数があると仮定し、引数に存在するパラメータ情報を取得します。 function handle_form_submission($request) { $parameters = $request->get_params(); } 引数->get_params()とすることで、該当の変数にリクエストパラメータを格納できます。 ※リクエストのボディ情報を含む全てのパラメータを取得することができます。このメソッドは、GET、POST、またはその他のHTTPメソッドを通じて送られたパラメータを含む配列を返します。 パラメータ内にある、検索対象の値を取得する 上記でパラメータの内容を格納した変数を取得します。 $email = $parameters['email']; これにより検索をかけたい値を取得することができます（今回はemail）。 該当の値を検索し、存在する値の数を返すSQLを定義 WordPressでSQLクエリを実行したい場合は、変数をクエリの中に安全に組み込むことができるprepareメソッドを使用します。 $query = $wpdb->prepare("SELECT COUNT(*) FROM $table_name WHERE email = %s", $email); 用意したいクエリをget_varメソッドで実行 上記で用意したクエリを単一の結果を取得できるget_varメソッドで実行。 get_var(実行したいクエリ)で実行可能です。 $count = $wpdb->get_var($query); これにより、count変数の中には該当テーブルに該当の値（今回はemail）が存在する数が格納されます。 count変数の内容によって処理を分岐 上記で取得したcount変数の値によって処理を分岐させます。 今回の場合は、リクエストの中にあるメールアドレスの数が0以外の場合にはエラーを返し、それ以外の場合に実行したい処理を記述します。 if […]
複数のinputを単一のステートで管理
分割代入でinputのidやname等の属性値を取得し、ステートの中身を管理するのが便利でしたので備忘録として複数のinputタグでバリデーションを実装してみます。 ステートを定義 今回はname、type、restと3つのプロパティを用意し、初期設定としてそれぞれの値を設定します。 const [formData, setFormData] = useState({ name: "", type: "", rest: 0, }); JSXを作成 今回管理したいinputタグを用意します。 return ( <> <input type="text" classname="formCommon__input" id="name" onchange="{handleChange}" /> <input type="text" classname="formCommon__input" id="type" onchange="{handleChange}" /> <input type="number" classname="formCommon__input" id="rest" onchange="{handleChange}" /> </> ); イベント関数を用意 各種タグの入力内容が変更された時に発火するhandleChangeという関数を作成します。 const handleChange = (e: React.ChangeEvent) => { const { id, value, name } […]
Stripeで決済画面を作成【Express,Next.js,TypeScript】
stripeを用いて決済画面を作成する場面がありましたので、備忘録としてまとめます。 後から「時間があれば」画像等を追加して、細かい説明を作成したいと、思っています😅 フロント側も「別途時間ができた際」に掲載しようとは思いますが、基本的には各種必要なものをbodyにセットして、今回作成するエンドポイントにリクエストを送るだけになります（雑） stripeアカウント作成 下記リンクからアカウントを作成します。 stripeアカウント作成 登録完了後、環境を「テスト環境」に変更し、「商品カタログ」より商品を追加します。 各種モジュールをインストール npm install stripe Stripeオブジェクトと、秘密キーを用意 stripeオブジェクトの定義と、秘密キーを用意し、定義しておきます。 const Stripe = require("stripe"); const stripe = Stripe("秘密キーを記載"); 商品リストを取得 stripeの商品一覧は、priceIDというものに紐づいており、stripe.pricesで取得することができます。 また、stripeでは一度公開した商品を削除するのは基本的には無く、アーカイブという形をとります。 なので、該当の商品がアクティブ状態であるというのをフィルタリング（.product.active）する形をとります。 app.get("/prices", async (req, res) => { try { const prices = await stripe.prices.list({ expand: ["data.product"], }); // アーカイブされていない価格のみをフィルタリング const activePrices = prices.data.filter((price) => price.product.active); res.json(activePrices); } catch (error) { res.status(500).json({ […]
useStateの型として型エイリアスを定義する
useStateに型エイリアスを定義することが多いので、まとめさせていただきます。 型エイリアスを準備 オブジェクト内の各プロパティに対して型を定義するためのエイリアスを準備し、exportしておきます。 また、今回はtype.tsというものを用意し、そこからimportする前提となります。 export type userInfo = { name: string; mail: string; tel: number; }; useStateにエイリアスを型定義する useStateを作成する際に、下記の形でuserInfoを定義します。 イメージとしては、ユーザーがログインしている場合はuserInfoに基づいたデータを取得し、取得していない場合はnullを許容します。 また、今回はユニオン型を使用し、許容する型|許容する型といった形で定義をしています。 また、ログインしていない場合に初期状態の画面を描画する前提としている為、初期値はnullとします。 const [user, setUser] = useState<userInfo | null>(null); 状態を確認する 下記の形で、ログインしている場合はログインしているという文言、ログインしていない場合はログインしていませんという文言が表示されます。 import React from "react"; import { useState } from "react"; import { userInfo } from "./type/type"; function test1() { const [user, setUser] = useState<userInfo | […]
動的に増やしたinputタグの入力内容を出力【Next.js,TypeScript,React】
ボタンクリックで増やしたinputタグの入力値を、別ボタンクリック時にコンソールに出力させる処理をご紹介します。 今回はコンソールへの出力ですが、API通信を用いたデータ送信にも役立ちます。 全体のコード import { useState } from 'react'; type Item = { id: number; textValue: string; test3Value:string; numberValue: number; }; const App = () => { const [items, setItems] = useState<Item[]>([]); const addItem = () => { const newItem: Item = { id: items.length + 1, textValue: '', test3Value: '', numberValue: 0, }; setItems([...items, […]
ボタンを押したら要素が増える機能を、型引数・useStateを用いて実装【TypeScript,Next.js,React】
ボタンを押したら、該当の要素が増える機能を実装していきます。 useStateで、要素情報を配列オブジェクトで管理（IDを付番）、ボタンがクリックされたら定義したオブジェクトに新しいIDがインクリメントされてstateに格納され、レンダリングが走りオブジェクト情報に乗っ取った要素が増える仕組みとなります。 型安全性を保つために、後ほど使用するオブジェクトを型として定義し、useStateの型引数に定義した型を取得し、定義したオブジェクトと型以外は使用されないよう、型安全性を考慮した形となります。 全体のコード import { useState } from 'react'; type Item = { id: number; } const [items, setItems] = useState<Item[]>([]); const addItem = () => { const newItem: Item = { id: items.length + 1, }; setItems([...items, newItem]); }; function createItem() { return( <> {items.map((item) => ( <React.Fragment key={item.id}> <div> <input type="text" id={item.id} […]
①next.js・typeScript・firebaseでサインアップ、ログイン機能を作る
next.js・typeScript・firebaseでサインアップ、ログイン機能を作る機会があり、キャッチアップを行なったのでまとめたいと思います。 firebaseConfigの作成 プロジェクトのルートディレクトリ直下にfirebaseとの接続や、firebaseライブラリを使用するために必要な初期設定を行う、firebaseConfig.tsファイルを作成します。 firebaseConfig.ts import { initializeApp, getApp, getApps } from "firebase/app"; // 認証機能を取得するために追加 import { getAuth } from "firebase/auth"; //初期設定をする上で必要な設定オブジェクト const firebaseConfig = { apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL, projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID, appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID, measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }; //初期設定がされているアプリを入れるための定数 let app; //getApps()で初期化されたアプリをリスト化、その中に値がなければ中の処理を実行 if (!getApps().length) { //initializeApp(設定したオブジェクト)でアプリの初期設定を行う app = initializeApp(firebaseConfig); } else […]
JavaScript配列における分割代入について簡単解説！
JavaScriptの配列における分割代入は、配列の要素を個別の変数に簡単かつ効率的に割り当てることができる強力な機能です。この機能は、ES6（ECMAScript 2015）で導入され、JavaScriptのコードをより読みやすく、簡潔にするのに役立ちます。 分割代入とは？ 分割代入は、配列やオブジェクトからデータを抽出し、それらを個別の変数に割り当てる一種のシンタックス（文法）です。配列の場合、これは特に有用で、配列の各要素を変数に直接割り当てることができます。 基本的な使用方法 let fruits = ["Apple", "Banana", "Cherry"]; let [first, second, third] = fruits; console.log(first); // "Apple" console.log(second); // "Banana" console.log(third); // "Cherry" 上記の例では、fruits 配列の各要素が順番に first、second、third 変数に割り当てられています。これにより、配列の特定の位置にある要素を簡単に取り出して使用できます。 要素のスキップ すべての配列要素を変数に割り当てる必要はありません。特定の要素をスキップすることもできます。 let numbers = [1, 2, 3, 4, 5]; let [first, , third, , fifth] = numbers; console.log(first); // 1 console.log(third); // 3 console.log(fifth); […]
Object.entriesメソッドとmapメソッドを用いて、オブジェクト操作を行う
オブジェクトの中にオブジェクトが複数存在していおり、そのプロパティ内にある一定の値を出力したい場合がありました。 とても大雑把に結論を書きますと、Object.entriesメソッドでオブジェクトを配列にし、その配列に対しmapメソッドで該当の配列化されたオブジェクトに処理を実行するという形になります。 オブジェクトを用意 ユーザー毎に名前と年齢を保持しているオブジェクトがあるとします。 const testObj = { user1:{ name:"taro", age:22 }, user2:{ name:"ichiro", age:29 }, user3:{ name:"sachiko", age:21 } } Object.entriesメソッドで該当オブジェクトを配列に変換 先ほど作成したtestObjに対し、Object.entriesメソッドを適用することで、配列に変換します。 const test = Object.entries(testObj); console.log(test); ここで、変数testの中身は下記の様になっています。 [ [user1,{name:"taro",age:22}], [user2,{name:"ichiro",age:29}], [user3,{name:"sachiko",age:21}] ] 配列になったオブジェクトを分割代入し、mapメソッドで出力 配列になったオブジェクトが保管されている変数testに対し、mapメソッドを用いて内容を出力します。 この際、mapメソッドの引数には、「配列の分割代入」、「オブジェクトの分割代入」が使用されます。 配列の分割代入についてはこちら オブジェクトの分割代入についてはこちら //引数として[n]番目の配列と、その値を分割代入 test.map(([user,{name,age}])=>{ console.log("user番号は" + user); console.log("user番号" + user + "の名前は" + name); console.log("user番号" + user + […]
【React】useStateとpropsでコンポーネントの表示切り替えを行い、画面遷移のようなものを実装する方法
Reactでのページ遷移は、「React Router」を用いた画面遷移が多いかと思われます。 今回は「React Router」を用いず、ステートに基づいたviewコンポーネント（画面表示用のコンポーネント）の表示切り替えで、画面遷移っぽいものを作る機会がありましたので、ここに残したいと思います。 表示非表示にするための状態を定義 今回はユーザーの状態を管理するuserStateというステートに基づいてコンポーネントの表示切り替えを行いたいので、まずはuserStateを定義します。 //ユーザーの状態を管理（状態によって表示させるコンポーネントを変更したい為） const [userState,setUserState] = useState("comp1"); useStateを変更するための関数を用意 続いて、useStateを変更するための関数「userStateChange」を用意します。 これを用意しておくことで色々な場面、たとえばクリックや入力などのフォーム操作に対して、useStateを変更する挙動を実装することが出来ます。 //userStateの状態を変更する為の関数 const userStateChange = (newUserState) => { setUserState(newUserState); }; 定義した関数、userStateChangeの引数として文字列を与えたりすることで、setUserState（useStateの更新関数）が発火し、userStateの値が更新されるような流れとなります。 userStateの状態により、返すコンポーネントを変更する関数を定義 userStateの状態から分岐し、該当のコンポーネントを返す関数「renderComponent」を定義します。 この関数を定義し、表示領域（該当コンポーネントのretrun内）で関数を実行することで、表示されるコンポーネントの表示切り替えができます。 そして、propsとしてuserStateChange関数を渡してあげることで、呼び出し先のコンポーネントでuserStateChangeを扱うことが出来ます。 //userStateの状態によって返すコンポーネントを変更する function renderComponent() { if (userState === 'comp1') { //propsにuserStateChangeを指定 return } else if (userState === 'comp2') { //propsにuserStateChangeを指定 return } else if (userState === 'comp3') { […]
