-
任意の時間内にイベントがなければ1度だけアクションを発火
この記事ではユーザーがイベントを起こしてから、一定の時間新たにイベントがなければ任意のアクションを発火させる方法をご紹介します。 使用用途としてはテキストフォーム入力後1.5秒後に値を送信、またはバリデーションを想定しています。この用途では... -
【javascript】タブでコンテンツの切り替えをする
この記事ではタブでコンテンツを切り替えるデモとソースコードを紹介します。 デモ See the Pen xxRNvXV by りーほー@プログラマ投資家 (@notover9) on CodePen. サンプルコード <div class="js-tab-panel"> <div class="flex jus... -
React Hook FormでMaterial UIのCheckboxを制御
この記事は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を... -
Field is missing `name` attribute
Material-UIのSelectにReact Hook Formを次のコードのように導入しました。 import React from 'react'; import { useForm } from 'react-hook-form'; import MenuItem from '@material-ui/core/MenuItem'; import Select from &#... -
Django REST frameworkでパラメータを取得する
この記事ではDjango REST frameworkが推奨するパラメータの取得方法や、用途によって使用するrequest関数をご紹介します。 GETリクエスト時にパラメータを取得 ajaxでDjango REST frameworkにGETリクエストをした場合、パラメータの取得方法は2つあります... -
Uncaught Error: Maximum update depth exceeded. React limits the number of nested updates to prevent infinite loops.
react-dom.development.js:4379 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to preven... -
TailWind CSSを使ってタブでコンテンツの切り替えをする
TailWind CSSはユーティリティファーストでレイアウトを少し変更したい場合などとても便利です。 しかし、TailWind CSSを使ってコンポーネント作る場合は、たくさんのクラスを組み合わせる必要があり、Bootstarapなどに比べると難易度が上がってしまいます... -
WordPressにカスタム投稿を作る
WordPressにカスタム投稿を作成する方法は プラグインを使うコードを使う の2通りあります。 この記事ではカスタム投稿をコードを使って追加する方法を紹介します。 プラグインでカスタム投稿を追加する場合は「Custom Post Type UI」プラグインをインスト... -
【時間を節約】tailwind CSSで爆速開発のためのツール集
tailwind CSSが大人気ですね！ 単一責任の原則でCSSの管理から解放されます。 tailwind CSSはユーティリティファーストなのでボタンを装飾するのにもたくさんのクラスをつける必要があります。 慣れていないとクラス名を調べる回数が多くなり、時間がかか... -
コピーボタンでテキストをコピー
ボタンをクリックするとクリップボードに対象のテキストをコピーするコピーボタン機能を紹介します。 今回はHTMLとjQueryを用いてテキストをコピーします。 コードをコピーして使用する場合はBootstrapなどのCSSできれいにして使ってください。 また、clip...
