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