JavaScript

JavaScriptで多言語サイトの言語切り替えを実装する方法を解説します。言語別URLへの安全な移動、localStorageによる選択保持、navigator.languagesの初期判定、HTMLのlang属性、hreflang・canonical、サーバー側の許可言語検証まで実例付きで整理します。

JavaScriptでselectの日付optionを選択不可にする方法を解説します。固定休業日、過去日・今日、土日、期間指定の判定、選択済み値の解除、input type=dateとの使い分け、送信時とサーバー側の再検証まで実例付きで整理します。

JavaScriptやCSSで画像の右クリック保存、ドラッグ、モバイルの長押しを抑止する方法を解説します。完全防止できない理由、透かし・低解像度配信・認証や署名付きURLとの違い、ユーザー体験を損なわない実装範囲まで用途別の実例付きで整理します。

JavaScriptでフォーム入力途中にページを離れようとしたとき確認アラートを表示する方法を解説。beforeunloadイベントの仕組みとブラウザ制限、変更検知のdirtyフラグ管理、フォーム送信時のスキップ、ブラウザダイアログの代わりにカスタムモーダルで「保存」「破棄」を選ばせるパターン、localStorageへの下書き自動保存まで実装します。

JavaScriptでブラウザの戻るボタンを無効化・制御する方法を解説。history.pushState()とpopstateイベントの仕組み、なぜ完全無効化はブラウザ仕様上できないのか、ページ離脱確認（beforeunload）との使い分け、SPAルーティングとの違い、使うべきケースと避けるべきケースまで実務視点で解説します。

JavaScriptでスライドショーをゼロから実装する方法を解説。setIntervalによる自動再生、CSSトランジションを使ったフェード/スライドアニメーション、前後ナビボタン、ドットインジケーター、キーボード操作、スマホ対応タッチスワイプ、ホバー一時停止まで備えた実践的なSlideshowクラスを完全実装します。

JavaScriptでDOM要素を複製するcloneNode()の使い方を解説。深いコピー(true)と浅いコピー(false)の違い、クローン後のID重複対策、イベントリスナーが引き継がれない問題と解決策、template要素を使った再利用パターン、フォーム行の動的追加など実践的なユースケースまで網羅します。

JavaScriptで現在の日付を取得してYYYY/MM/DD形式でWebページに表示する方法を解説。new Date()の基本から、DOMへの書き込み、setIntervalを使った日時の自動更新、フッター著作権年・フォームデフォルト値・ヘッダー日付表示などの実践パターンまで網羅します。

JavaScriptで日付をYYYY/MM/DD・YYYY-MM-DD・YYYY年MM月DD日などの形式に変換する方法を解説。padStart()による手動フォーマット、Intl.DateTimeFormat、再利用できるformatDate()ユーティリティ、タイムゾーン変換、文字列パースの落とし穴、Temporal APIの展望まで実務レベルで網羅します。

Webページの読み込み速度を改善するLazyload（遅延読み込み）の実装を解説。HTML属性loading="lazy"だけで完結するネイティブ対応、IntersectionObserverによるカスタム実装、iframe遅延読み込み、rootMarginチューニング、LCPを悪化させない設計、fetchpriority対応まで実践的に網羅します。

JavaScriptで特定の日時を過ぎたら要素を非表示にする方法を解説。new Dateによる即時判定、表示開始・終了の期間管理、data属性でHTMLに期限を書く一括管理、タイムゾーン対応、setIntervalでの定期チェック、CSSトランジションを使ったスムーズな切り替えまで実践的に網羅します。

JavaScriptでキャンペーン終了までのカウントダウンタイマーを作る方法を解説。日・時・分・秒への分解、Intl.DateTimeFormatでのタイムゾーン対応、終了時の表示切り替え、ラスト1時間の緊急アニメーション、複数タイマー管理、aria-liveアクセシビリティ対応まで実践的に網羅します。

JavaScriptでアクセスごとにランダムなコンテンツを表示する方法を解説。Math.randomによる基本実装、重み付き確率でバナーの出現頻度を制御、Fisher-Yatesシャッフルで同じ内容が連続しないキュー管理、localStorageで1日1回だけ表示する制御まで実践的に網羅します。

スマホで100vhが画面いっぱいにならない原因（アドレスバー・タブバー問題）と解決策を解説。CSS新単位dvh/svh/lvhの使い分け、JavaScriptのwindow.innerHeight+--vhカスタムプロパティによる回避策、orientationchange対応、ブラウザサポート比較まで網羅します。

JavaScriptでHTMLの子要素を取得するchildren・childNodes・querySelectorAllの違いと使い分けを解説。ElementのみのHTMLCollectionとテキストノードを含むNodeListの違い、for...ofループ、タグ名・クラス名でのフィルタリング、子要素操作の実用パターンまで網羅します。

JavaScriptで特定クラスを持つDOM要素を動的にアンカーリンクで囲む方法を解説。replaceWith()による基本実装・closest()での重複防止・data属性でのhref動的取得・javascript:プロトコルXSS対策・MutationObserver対応まで実践コードで網羅します。

JavaScriptでアコーディオンの開閉状態をlocalStorageに保存する実装を解説。WAI-ARIA対応アコーディオン、JSON形式での複数アコーディオン管理、sessionStorageとの使い分け、QuotaExceededErrorのエラーハンドリング、有効期限付き状態保存まで実践的に網羅します。

JavaScriptでタブ切り替えを実装する方法を基本から解説。data属性によるシンプルな実装、WAI-ARIAロールでアクセシビリティ対応、キーボードナビゲーション、URLハッシュ連動、フェードアニメーション、動的タブ追加まで実践的に網羅します。