2022-06-06Reactで条件によってpropsの属性名と値を出し分ける方法CODEReactを書いているとたまに属性の値の分岐だけではなく、特定の条件のときにのみ属性を付与したいことがあります。その場合に悩むことがあるので備忘録として記事にします。JavaScriptReact
2022-04-16Reactで再レンダリングされた要素をCSSアニメーションを使用し視覚的に確認する方法CODECSSアニメーションを使用してReactにおける再レンダリングを可視化する方法を紹介します。JavaScriptReact
2022-04-05react-hook-formでメールアドレスやパスワードの再入力時の一致確認バリデーションを実装する方法CODEreact-hook-formでメールアドレスやパスワードの再入力時の一致確認バリデーションの実装方法を紹介します。JavaScriptReact
2020-06-17スクロール位置でナビのカレント状態が変化するJS【ページ内リンク】CODE縦長のページでよくスクロールすると位置でナビゲーションの状態が変化するサイトをみたことがありませんか？状態としてはページの現在地を知らせるためのUIが多いですね。この記事ではそのJSの作り方をご紹介します！JavaScript
2020-05-08JavaScriptでローディング画面を作成する方法（画像を監視）CODE様々なサイトで実装されているローディング画面を実装したいと思ったことはありませんか？この記事ではJavaScriptを使用してローディング画面を実装する方法をご紹介します。JavaScript
2020-03-21WAI-ARIAに対応したタブを作ってみた（作成方法）【ES6】CODE最近業務でタブを久々に実装することがあったのでアクセシビリティーも考慮したいと思いWAI-ARIAに対応ものを作成してみました。この記事ではその作成したタブをご紹介します。HTMLJavaScript
2020-03-19【UAParser.js】ユーザーエージェントを取得してbodyに情報をclassとして付与する方法CODE画面の幅以外でPCなのかスマホなのかを判定したい場合があるかと思います。そんな時に有効なのがユーザーエージェントです。この記事では僕が使用しているユーザーエージェントを取得してbodyにua-spやua-pcなど情報をclassとして付与する方法をご紹介します。HTMLJavaScript
2020-03-13JavaScriptで一文字ずつspanで囲む方法【主に一文字ずつのアニメーションに使用】CODE文字を一文字ずつアニメーションさせようとする場合は一文字ずつspanタグで囲んでcssでアニメーションさせるのが一般的だと思いますが、そのアニメーションさせる文字数が5文字程度であれば手作業でspanタグで囲んでもいいのですが20や30文字と文字数が多くなるにつれてその作業は大変になります。この記事では文字を span タグで手作業で囲む作業を JavaScript を使用して楽にする方法を紹介します。CSSJavaScript
2020-03-11JavaScriptで特定の要素以外をクリックした時のイベント【jQuery不要】CODEモーダルウィンドウなどでモーダルウィンドウの外側をクリックしたときに閉じる動作をしたい時などに使える「特定の要素以外をクリックした時のイベント」をこの記事では紹介します。JavaScript
2020-03-05CSSのobject-fitをIEに対応させる方法 JavaScriptを使用します【object-fit-images】CODEobject-fitってすごい便利なCSSなんですけどIEでは効かないんですよね...この記事ではobject-fitをIEで効くようにできるJavaScript、object-fit-imagesをご紹介します。Sassを使用してる方向けにもmixin化したものも紹介します。CSSJavaScript
