JavaScript

JavaScript

【JavaScript】機種依存文字・特殊文字のチェックと除去方法完全ガイド|正規表現・Unicode対応

JavaScriptで機種依存文字(①②③・囲み数字・全角英数字)を検出・除去・変換する方法を正規表現とUnicodeブロック指定で完全解説。フォームバリデーション実装例、全角→半角変換まで実践ガイド。
JavaScript

【JavaScript】メールアドレスをチェックする方法

JavaScriptでメールアドレスをチェックする方法を、HTML標準の input type="email"(制約検証API)から正規表現 /^[^\s@]+@[^\s@]+\.[^\s@]+$/ での判定、trimの必要性、正規表現の限界、そして確実な確認メールによるサーバー側検証まで、実例で解説します。
JavaScript

【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を説明文代わりにしない注意点まで紹介します。
HTML/CSS

【CSS】iPhone(iOS)で滑らかなスクロールを実現する方法

iOSデバイス(特にiPhone)でウェブページのスクロールを滑らかにする方法について、CSSとJavaScriptを使用した効果的な方法を紹介し
HTML/CSS

【HTML5】dialog要素の基本的な使い方と応用方法

HTML5では、新しい要素としてdialogが導入されました。これにより、モーダルダイアログや非モーダルダイアログを簡単に作成できる
JavaScript

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

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

【gulp】gulp-uglifyを使ってJavaScriptファイルを簡単に圧縮する方法

JavaScriptファイルを効率的に圧縮して、ウェブサイトのパフォーマンスを向上させたいですか?この記事では、Gulpとgulp-uglify
JavaScript

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

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