よく見る支払いフォーム ここ最近、支払いフォームを実装する機会があり、その際に割と悩んで勉強になったため自分なりの解決策をシェアしようと思います。 そしてちょうどこちらの記事で同じような要件の実装をされていました。非常に参考になったので掲載させていただきます。 なお今回はこの要件に追加でカード選択の要件が加わったフォームを実装していきます。ぜひ最後までご覧ください。 フォームの要件 支払い方法は大きく分けて以下の2つが存在する ポイント払い クレジットカード払い クレジットカード払いは大きく分けて以下の2つが存在する 登録済みのカードで支払う 新しくカード情報を入力して支払う 登録済みのカードは最大3枚まで表示できる(3枚まで登録できる) 登録済みのカード情報はデータベースから取得し、以下の情報を持つ カードID カード名義人 カード番号の下4桁 有効期限 新規カードで支払う場合は以下の情

package main import ( "net/http" "github.com/labstack/echo/v4" ) func main() { e := echo.New() e.GET("/", func(c echo.Context) error { return c.String(http.StatusOK, "Hello, World!") }) e.Logger.Fatal(e.Start(":1323")) } # syntax=docker/dockerfile:1 # Comments are provided throughout this file to help you get started. # If you need more help, visit the Dockerfile reference guide at # https://docs.

はじめに フロントエンドのWeb開発においてconsole.log()というのは非常によくお世話になります． しかしconsoleオブジェクトにはには他にもたくさんのインスタンスメソッドがあり，それらを使わずに開発を行うのは少しもったいないです． この記事では様々な機能を紹介していき明日から開発で使用していただければ嬉しいです． assert console.assert()は第一引数に論理式をとり，第二引数以降には任意のオブジェクトを取ります． 第一引数がfalseとなった場合，第二引数をコンソールに出力します． サンプル // assert const wishToSuccess = () => { return Math.random() < 0.5 } console.assert(wishToSuccess(), "失敗しました") 出力 log 一般的にログを出力するconso

参考 目的 プロジェクトで使用されている不適切なuseEffectを減らす 本題 Reactの公式ドキュメントにuseEffectは必要ないかもしれない，というようなページがありとても勉強になったので記事にしようと思いました． データフェッチング アプリのデータフェッチングをuseEffect内で行うのはよく知られている方法です． Bad 💣 function SearchResults({ query }) { const [results, setResults] = useState([]); const [page, setPage] = useState(1); useEffect(() => { // 🔴 Avoid: クリーンアップなしでのフェッチング fetchResults(query, page).then(json => { setResults(json); }