JavaScript

JavaScript

【JavaScript】半角英数字かどうかをチェックする方法

JavaScriptで文字列が半角英数字かどうかをチェックする方法を解説します。正規表現 /^[a-zA-Z0-9]+$/ での判定、* と + の違い(空文字の扱い)、全角の英数字(012・ABC)が自動的に弾かれること、記号やアンダースコアを許可する書き方、パスワードの文字種要件まで実例で紹介します。
JavaScript

【JavaScript】日付が正しいかチェックする方法

JavaScriptで日付が正しいかをチェックする方法を、正しい考え方で解説します。正規表現での形式チェックと、new Date() では 2024-02-31 が 3/2 に繰り越されて見逃される罠、年月日の一致比較で実在を確認する堅牢な方法、タイムゾーンのズレまで実例で紹介します。
JavaScript

【JavaScript】文字列が半角かどうかをチェックする方法

JavaScriptで文字列が半角かどうかをチェックする方法を、正しい定義から解説します。ASCII印字可能文字だけか半角カナ(アイウ)も含むかで正規表現が変わること、よく使われる charCodeAt > 0xFF が半角カナやアクセント文字を誤判定する理由、空文字の扱いまで実例で紹介します。
JavaScript

【JavaScript】チェックボックスのチェック状態を判定する方法

JavaScriptでチェックボックスのチェック状態を判定する方法を解説します。checkedプロパティでのtrue/false判定、changeイベントでの変化検知、querySelectorAllで複数のチェック済みを取得する方法、全選択とindeterminate(中間状態)、初期状態の設定まで実例で紹介します。
JavaScript

【JavaScript】バックスペースキーを無効化する方法

バックスペースキーを無効化する方法を、現代ブラウザの実情を踏まえて正しく解説します。ページ全体での一律無効化が文字削除を壊す理由、入力欄(input/textarea/contenteditable)を除外した安全な書き方、そして入力内容の消失を防ぐ本来の解決策 beforeunload まで紹介します。
JavaScript

【JavaScript】Enterキーでフォーム送信を無効化する方法

フォームでEnterキーを押すと意図せず送信される問題を、keydownイベントとpreventDefaultで無効化する方法を解説します。textareaの改行やIME変換確定のEnterを巻き込まない正しい書き方、特定フィールドだけの制御、Enterで次の入力欄へ移動する代替、アクセシビリティの注意点まで紹介します。
JavaScript

【JavaScript】要素の表示/非表示を切り替える方法

JavaScriptで要素の表示/非表示を切り替える方法を、classList.toggle・element.hidden・style.display・visibilityの違いと使い分けで解説します。display(場所が消える)とvisibility(場所が残る)の差、style.display判定の罠、aria-expandedでのアクセシビリティ対応まで実例で紹介します。
JavaScript

【JavaScript】placeholderに改行を入れる方法

textareaのplaceholderに改行を入れる方法を正確に解説します。HTMLなら 、JavaScriptなら \n を入れるだけで複数行になります(white-spaceの指定は不要)。inputで改行できない理由と代替手段、::placeholderでのスタイル調整、placeholderを説明文代わりにしない注意点まで紹介します。
JavaScript

【JavaScript】画面サイズをリアルタイムで取得する方法

window.innerWidth/innerHeightで画面サイズを取得し、resizeイベントでリアルタイム監視する方法を解説します。スクロールバーを含む/除くプロパティの使い分け、resizeの間引き(throttle)、matchMediaでのブレークポイント判定、ResizeObserverによる要素サイズ監視まで実例で紹介します。
JavaScript

【JavaScript】ページ表示を高速化する方法|配信と実行の最適化

JavaScriptでページ表示を高速化する方法を、「配信を軽くする(minify・コード分割・async/defer・キャッシュ・Vite)」と「実行を速くする(DOM操作削減・debounce/throttle・遅延読み込み・Web Worker)」の2軸で、実例コードと計測方法まで解説します。
JavaScript

【JavaScript】戻る・進むボタンを実装する方法

history.back()・forward()・go(n)でページ内に「戻る・進む」ボタンを実装する方法を、addEventListener版・複数ページ移動・popstateでの履歴検知まで解説します。「戻れるか判定できない」というブラウザの限界とトップへのフォールバック、SPAでのHistory API活用も合わせて紹介します。
JavaScript

【JavaScript】Cookieの有無で要素を表示・非表示する方法

Cookieの有無で要素を表示・非表示する方法を、document.cookieの安全な読み取り(getCookie)、classList.toggleによる双方向の切り替え、element.hiddenを使うモダンな書き方まで、動くコードで解説します。チラつき対策やCookieのセット・削除方法も合わせて紹介します。
JavaScript

【JavaScript】window.statusが効かない理由と代替手段

window.status は現代のブラウザでは設定しても画面に表示されません。プロパティが残っているのに無効になった理由(フィッシング対策)と、aria-live付きのDOM表示やトースト通知でユーザーに状況を伝える代替手段を、動くコード付きで解説します。
JavaScript

【JavaScript】全角文字をチェックする方法|全角のみ・全角を含む判定と半角カナの落とし穴

JavaScriptで文字列が全角文字かどうかを正しく判定する方法を解説します。「全角=ASCII以外」という誤った判定では半角カタカナまで全角扱いになる落とし穴を避け、正規表現のUnicode範囲で「全部が全角か」「全角を含むか」を判定。ひらがな・カタカナ・漢字・全角英数の個別チェックやフォームバリデーションまで、実行確認済みのコードでまとめます。
JavaScript

【JavaScript】キーボード入力を取得する方法|event.key・event.codeとkeyCode(非推奨)の違い・移行ガイド

JavaScriptでキーボード入力を取得する方法を解説します。非推奨の event.keyCode に代えて、文字の意味を表す event.key と物理キー位置を表す event.code の違いと使い分け、keyCode からの移行表、Ctrl+S などの修飾キー判定、IME入力中の注意(isComposing)、keydown / keyup / keypress の違いまで、実用的なコードとあわせてまとめます。
JavaScript

【JavaScript】document.all が非推奨の理由と代替手法完全ガイド|getElementById・querySelector・querySelectorAll への移行まで

JavaScriptのdocument.allはIE時代の非標準APIで現代では使用禁止。非推奨の理由・特殊な挙動(falsyだがオブジェクト)・getElementById/querySelector/querySelectorAllへの移行パターン・古いコードのリファクタリング方法まで実例付きで解説します。
JavaScript

【JavaScript】テキスト内のURLをリンクに置き換える方法|XSS対策・末尾句読点・target/relまで安全に実装

JavaScriptでテキスト内のURLを自動でaタグのリンクに変換する方法を、安全に実装する手順で解説します。まずHTMLエスケープしてXSSを防ぎ、正規表現でURLを検出、末尾の句読点や括弧を除外し、target="_blank" rel="noopener noreferrer" を付与します。よくある脆弱なコードの危険性と、本番でライブラリを使う選択肢まで、実行確認済みのコードでまとめます。
JavaScript

【JavaScript】配列から条件に合う要素を取り出す方法|filter・find・findIndex・someの使い分け

JavaScriptで配列から条件に合う要素を取り出す方法を、用途別に解説します。条件に合うものすべては filter、最初の1件は find、位置は findIndex、存在チェックは some/every と、目的に応じたメソッドの使い分けを整理。filter が空配列・find が undefined を返す違いや、オブジェクト配列の検索、複合条件まで、実行確認済みのコードでまとめます。
JavaScript

【JavaScript】ウィンドウサイズの条件でページをリロードする方法|matchMediaで安全に・連続リロードの罠も解説

JavaScriptでウィンドウサイズが特定の条件になったときにページをリロードする方法を解説します。resize イベントで素朴に location.reload() すると連続リロードで操作不能になる罠を避けるため、ブレークポイントを跨いだ時だけ発火する matchMedia の change イベントや debounce の使い方、そもそもリロードせずCSSや動的再描画で対応すべきケース、状態消失への対処までまとめます。
JavaScript

【JavaScript】console.table()でコンソールに表形式で表示する方法|配列・オブジェクト・列の絞り込みまで

JavaScriptの console.table() で配列やオブジェクトを見やすい表形式でコンソールに出力する方法を解説します。オブジェクトの配列・2次元配列・単一オブジェクトの表示、第2引数での列の絞り込み、DevToolsでの並べ替え、Node.jsとブラウザの違い、本番でのログ削除まで、実際の出力とあわせてまとめます。