Pデジタルではこれまで多数の
サイト制作に携わって参りました
Atip 様 マッチングサイト
コーディング、検索ロジック・DBへのエージェント登録（編集）等の機能開発を担当致しました。
WPで使用可能なプラグインを1から独自開発させていただきました。
「こんなものがあったらいいな」という開発についても承っております。
OMD 様 HP
全てのコーディング・ロジック実装等について担当。
アニメーションを抑え、シンプルな形に仕上がっております。
その他、100件以上の実績がございますが、"情報公開可否の確認最中である状態"、及び当HPの「取り組ませて頂いた制作内容と依頼いただいた企業様の紹介」ページについてが作成途中となりますので、大変恐れ入りますが、その他の実績については下記ボタンよりお問い合わせ下さいませ。
PデジタルではWeb領域をメインに、バルク溢れる
パワフルな仕事を受け賜っております
スクロールできます
デザインからコーディングまで一括して承ります。
「コーディングのみ」「デザインのみ」といったご相談も承らせていただいております。
「こういうのがあったら良いな」という要望をお伺いし、貴方の為のツールやプラグインを開発させていただきます。
shopifyを用いて、デザインからコーディングまで一括して承ります。
「コーディングのみ」「デザインのみ」といったご相談も承らせていただいております。
制作技術や活動内容について
発信しています
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, […]
