入力したキーボードのキーを取得する
キーボード操作を行ったときにJavaScriptで何らかの処理を行うとき、キーの判別をどのようにすればいいかで少し迷うこ...
VanillaJSの記事一覧
特定要素内にフォーカス可能な要素があるかどうか調べる
特定要素内に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で指定した月の最後の日を取得する方法をメモ。...
URLのパラメータを引き継ぐ
ページアクセス時にURLに付与されているパラメータを、ページ内の特定のリンクに引き継がせたいということがあったので、実装...
setIntervalとsetTiemoutで関数に引数を渡す
以前にsetIntervalとsetTiemoutの関数に引数を使う方法の記事を投稿しましたが、setIntervalと...