はてなブックマーク

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

結論 ボタンを実装する際には、フォームのサブミットボタンでなければtype="button"をつけた方が良いです。 なぜか HTMLのボタン要素は3つのtype属性を持つことができます。 submit type="submit"のボタンはフォームのデータをサーバーへ送信します。 button type="button"のボタンは規定の動作がなく、イベントハンドラーを渡して使うのが一般的となります。 reset type="reset"のボタンは すべてのコントロールを初期値の初期化します。<input type="reset"> と同様です。 そしてデフォルトのtype属性の値はsubmitです。 つまりtype属性を指定せずにボタンを置くとtype="submit"として動作します。 起こった問題 予想外の挙動をするパターン1 以下は郵便番号と住所を入力するシンプルなフォームです。 郵便

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); }

はじめに 以下のような方を対象としています． GraphQL聞いたことある Next.jsでGraphQL使ってみたい Apolloサーバーを立てたい 今回作成したリポジトリです． GraphQLとは何か GraphQLについては既に分かりやすい記事がたくさん出ているのでリンクを共有することで説明を省略させていただきます． 準備 今回はNext.jsでGraphQLを学んでいくのでNext.jsでプロジェクトを立ち上げます． 以下を実行して，プロジェクト名などを決めます．

Qsって何？ npm公式 クエリの解析，文字列化をするライブラリです． 使っていて非常に便利なので一旦まとめようと思います． 基本的な使い方 import qs from 'qs'; // (以下省略) const obj = qs.parse('a=c'); // { a: 'c' } const str = qs.stringify(obj); // 'a=c' 簡単に言うと，parseはURLなどの文字列をオブジェクトに変換するメソッドで， stringifyはオブジェクトをURL形式の文字列に変換するメソッドです． またqsはネストしたオブジェクトも生成することができます． 例えば'foo[bar]=baz'は