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') { […]
JavaScriptオブジェクトの分割代入を簡単に理解！【js】
普段からjsを用いた制作や開発を行わない場合、分割代入ってなんだっけ？ となります。 名前は難しそうですが、とても簡単なので紹介させて頂きます。 何に使う？ 基本的には取得したオブジェクトの更新などに使用することが多いです。 例えばJsonで取得したオブジェクトのプロパティを変数に保管して、その変数に対し違う値を代入してあげる、などといった感じですね。 分割代入って何？ オブジェクトに存在しているプロパティを変数に入れてあげる事です。 どうやる？ まずオブジェクトを用意してあげます。 const testObj = { name:"taro", age:25, job:"developer" } このように定義したオブジェクトのnameと、ageプロパティを変数として扱いたい、そうなったときに下記「分割代入」を用います //先ほど定義したオブジェクト const testObj = { name:"taro", age:25, job:"developer" } //name変数とage変数に各種プロパティの値が取得されます const { name , age } = testObj; この処理によって、name変数とage変数が用意され、その中には先ほど定義したオブジェクト（testObj）のnameプロパティとageプロパティの値が代入されています。 追加したnama変数=nameプロパティの値 追加したage変数=ageプロパティの値 といったイメージになります。 入れる変数の名前をプロパティの名前と違うものにしたい！ あまりこういうケースに遭遇したことがないのですが、違う変数として代入することも可能です。 取得したいプロパティ名:代入したい変数名 といったイメージです。 //先ほど定義したオブジェクト const testObj = { name:"taro", age:25, job:"developer" } const […]
取得したJSONの値をオブジェクトとして返す
APIから取得したJSONデータをオブジェクトにし、それを別ファイルで使用するという状況が発生したので、まとめさせて頂きます。 また、配列内にあるオブジェクトを返すという認識が曖昧だったので、これを機にしっかりキャッチアップします。 オブジェクト（パース済である前提）の値を各種変数に格納 変数に格納することで、ES6から可能となった、オブジェクトの名称と値が同じなら記載するのはプロパティだけで良いという恩恵を受けることが出来ます。 //JSON形式で受け取ったものをパースしている状態である前提 const obj = { "id": 1, "name": "taro", "age": 25, "skill": [ { "skill": "javascript", "deadWeek": "1month" }, { "skill": "php", "deadWeek": "9month" }, ] }; //各種変数に格納 const id = obj.id; const name = obj.name; const age = obj.age; //skillは配列なので、後ほどmapメソッドで使用します const skills = obj.skill; 格納した変数をオブジェクトで返す return { id, name, age, […]
