VanillaJSで途中省略のページャーを実装する
以前にjQueryを使ったページ送りの実装の記事を投稿しましたが、今回はVanillaJSでページャーが長い場合に途中省...
VanillaJSの記事一覧
スライダーの実装でアクセシビリティを意識する
スライダー(カルーセル)の実装をアクセシビリティ的な側面から考えた時、スライダーの機能やデザインによって考慮する点が色々...
入力したキーボードのキーを取得する
キーボード操作を行ったときにJavaScriptで何らかの処理を行うとき、キーの判別をどのようにすればいいかで少し迷うこ...
特定要素内にフォーカス可能な要素があるかどうか調べる
特定要素内にaタグやbuttonタグなど、フォーカス可能な要素があるかどうを判定したいということがあったので、その際に調...
三項演算子を使用する
三項演算子(条件演算子)の使い方についてメモ。...
別タブを開いた際のsetIntervalとsetTimeoutの挙動と対策
setIntervalやsetTimeoutを使った処理中に別タブを開くと、元のタブに戻ってきた際に挙動がおかしくなるこ...
特定要素内にフォーカスした時のイベントを設定する
特定の要素内にフォーカスした時に処理をしたいということがあったので、実装方法について調べたことをメモ。...
CSSでslideDownを実装する
CSSのgrid-template-rowsを使って、jQueryのslideDown()のようなアニメーションを実装す...
タブの実装でアクセシビリティを意識する
ARIA Authoring Practices Guideのページを参考に、タブの実装時にアクセシビリティの面を考慮し...
details要素での開閉時にJavaScriptで処理を行う
以前にdetailsタグの使い方やアコーディオンとして使用した際のメリットについて記事にしましたが、今回は開閉時にJav...
テンプレートリテラルを使ってみる
JavaScriptの文字列内で変数が使えるようになる、テンプレートリテラルを使ってみます。...
JavaScriptで入力した文字数をカウントする
フォームの文字数制限があるフィールドでたまに見かける、入力した文字数や残り文字数が表示される処理を実装してみます。...
JavaScriptでフォームの送信を一時停止する
フォームの送信が実行された際、送信前に別の処理を挟んでから送信を実行したいということがあったのですが、VanillaJS...
文字列の両端の空白を取り除く
フォームで入力された値の前後に含まれる空白スペースを削除するという実装がたまにあるので、文字列の両端の空白を取り除く方法...
論理積(&&)と論理和(||)の短絡評価
if文で&&を使った際の挙動で思っていたのと違うということがあったので、調べたことをメモ。...
padStart()で数値の桁数を揃える
以前に桁数を揃える処理を実装しましたが、padStart()メソッドで簡単に実装できそうだったので試してみます。...
JavaScriptのreplaceAll()を使ってみる
文字列を置換する際、複数箇所マッチした場合でもすべて置換できるreplaceAll()を使ってみます。...
オプショナルチェーン演算子を使ってみる
オプショナルチェーン(optional chaining)演算子を使って、オブジェクトの中を参照する方法を試してみます。...
アクセシビリティを考慮したアコーディオンを実装する
アコーディオンの実装をすることはよくありますが、アクセシビリティを考慮した場合の実装についてあまり意識したことがなかった...
JavaScriptで月末日を取得する
JavaScriptで指定した月の最後の日を取得する方法をメモ。...