コード– category –

完成形 このようにコレクションをタブで切り替えてを表示したい。 サンプルコード jsでイベントをフックするクラスはjs-*と命名しています。 既存のテンプレートをカスタマイズしやすいようにCSSはtailwindcssを使っています。 お使いのshopifyテーマに合...

Error: homebrew-core is a shallow clone. homebrew-cask is a shallow clone. To `brew update`, first run: git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow git -C /usr/local/Homebrew/Library/Taps/homebrew/hom...

この記事では数字のみを入力できるinput作る方法をサンプルコード付きでご紹介します。javascriptは使用しません。 数字のみ入力できる入力項目の作り方は type属性を使って数字のみ入力pattern属性を使って数字のみ入力 です。 これらの方法のサンプルコ...

フォームなどを作っている時に、ユーザーにブラウザバックやリロードなどの操作をしてほしくないときがあります。 その理由は入力したデータが保存される前で、ブラウザバックやリロードなどによってデータが消えてしまうからです。 この記事ではreactでブ...

この記事ではフォームのinputの入力欄を入力不可にする方法をご紹介します。 inputの入力欄を入力不可は次の2つあります。 disabled 属性readonly 属性 これらを付与するとユーザーは入力欄に値を入力・変更することができなくなります。 しかし、disabled...

tailwind CSSが大人気ですね！ 単一責任の原則でCSSの管理から解放されます。 tailwind CSSはユーティリティファーストなのでボタンを装飾するのにもたくさんのクラスをつける必要があります。 慣れていないとクラス名を調べる回数が多くなり、時間がかか...

このエラーはリモートリポジトリにpushする時に遭遇するエラーです。 $ git push -u origin main error: src refspec main does not match any error: failed to push some refs to 'REMOTE URL' または次のようにエラーが表示されることもありま...

useSWR()を使ってデータを取得するには以下の方法で取得できました。 const commentsFetcher = (url: string): Promise<fetchCommentsReturnType> => axios(url).then((res) => res.data); const { data: comments, error:commentsError } = u...

この記事ではNext.jsでPrismaを使う方法をご紹介します。 Prismaを使うことでJSでデータベース作ったり、クエリを発行してデータを取得することができてとても便利です。 この記事ではPlatforms Starter KitとPrisma Examplesを参考にしています。 prisma....

この記事はReact Hook Form v6を用いて Material UI v4のCheckboxを制御した記事です。 React Hook Form v7をお使いの方はReact Hook Form v7でMaterial UI v4のCheckboxを制御を参考にしてください。 React Hook FormでMaterial UIのText FieldやRadioを...

Amazon Linux2を使ったEC2のPHP7.2をPHP8.0にバージョンアップしてLaravelをインストールしました。その方法をご紹介します。 使用するコマンド この記事内で使用するコマンドを軽い説明付きでまとめました。お急ぎの方は以下のコマンドを参考にしてくださ...

EC2でRDSからデータをダンプしてから、RDSへリストアしようとしたらタイトル通りのエラーが出ました。 リストアしようとして実行したコマンドは以下のとおりです。 $ mysql -u USER_NAME -p -h HOST_NAME < dump.sql Enter password: ERROR 1227 (42000...