複数の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} […]
