JavaScript

グローバルに利用されるWebサービスやアプリでは、日付や数値の表示をユーザーの地域や言語に合わせることが重要です。JavaScriptのIntl APIを使うと、複雑なロジックを自作することなく国際化対応が可能になります。ここではIntl....

Webアプリや動的なページでは、JavaScriptや外部ライブラリによってDOMが書き換えられることがよくあります。要素が追加されたり属性が変化したときに自動で処理を実行したい場合、MutationObserverを使うと効率的にDOMの...

```htmlイベントを多数の要素に付与するとき、個々にリスナーを登録するとメモリ消費や再描画コストが増え、動的に追加される要素には再度バインドが必要になります。Event Delegation（イベント委譲）を使えば、親要素に一度だけリス...

JavaScriptのFormDataオブジェクトを使うと、フォームデータを手軽に収集し、Ajaxで送信できます。従来のsubmitによる画面遷移を避け、非同期でデータを送ることで、スムーズなユーザー体験を実現できます。ここではFormDa...

非同期処理を扱うJavaScriptでは、Promiseとasync/awaitが代表的な書き方として使われています。どちらも非同期処理を分かりやすく記述できますが、適した場面や使い方には違いがあります。ここでは両者の基本と違い、使い分けの...

WebサイトやWebアプリケーションの開発では、スクロールやリサイズ、入力イベントのように高頻度で発火する処理をそのまま実行するとパフォーマンス低下の原因になります。これを防ぐためによく使われるのがdebounce（デバウンス）とthrot...

Webブラウザにはデータを保存するための仕組みがいくつか用意されています。その中でもlocalStorageとsessionStorageは手軽に利用できる保存先としてよく使われます。どちらもWeb Storage APIに含まれていますが...

highlight.js は、コードブロックに自動で色付けを行う軽量なライブラリです。CDN から 1 ファイル読み込むだけでも動作し、必要に応じて言語の個別読み込みやテーマ切り替え、行番号の付与などを柔軟にカスタマイズできます。ここでは導...

Web制作においてリッチなアニメーションを実装する場合、JavaScript ライブラリ「GSAP（GreenSock Animation Platform）」は非常に強力です。CSS アニメーションや jQuery アニメーションよりも柔...

JavaScriptを使って「特定の時間帯だけ処理を実行したい」というニーズは、業務用Webアプリや予約サイト、チャットサポートの受付など、さまざまな場面で発生します。この記事では、現在時刻を判定し、指定した時間内にだけ関数を実行する方法と...

フォームの送信ボタンやAjax処理などで、ユーザーが同じボタンを何度もクリックしてしまうと、重複送信や想定外の動作が起きることがあります。こうした「連打」を防ぐためには、JavaScriptでクリックを一時的に無効化する処理を加えることが有...

Webページ上で画像が正しく読み込まれたかを検知し、それに応じた処理を行いたい場面は多くあります。例えば、画像が表示された後にアニメーションを始める、ローディングを解除する、あるいは画像読み込み失敗時に代替処理を行うなどです。この記事では、...

Webサイトで特定の要素を何回かクリックした後に処理を実行したい場面は意外と多くあります。例えば、隠し機能を実行したり、ボタンの誤操作を防止したりといった用途です。この記事では、JavaScriptを使って「指定回数以上クリックされたら処理...

JavaScriptで配列を扱う際、重複した値を取り除きたい場面は多々あります。この記事では、簡潔かつ効率的に重複を削除する代表的な2つの方法、Setを使う方法と、filter()とindexOf()を組み合わせる方法を紹介します。Setを...

Webアプリで入力内容や設定状態を保存し、次回の訪問時にも同じ状態を保ちたい場合、ローカルストレージ（localStorage）を活用することで簡単に実現できます。この記事では、JavaScriptでローカルストレージにデータを保存し、ペー...

Webページの表示を訪問者のアクセスURLに応じて切り替えたい場面は多くあります。例えば、特定のキャンペーンページでのみ特別なコンテンツを表示したり、特定のクエリパラメータが含まれている場合だけ案内メッセージを表示したい場合などです。この記...

ユーザーがページを開いた後に何もアクション（特にスクロール）をしないまま一定時間が経過した場合に、注目コンテンツやお知らせなどのポップアップを表示したいケースがあります。この記事では、JavaScriptを使って「一定時間スクロールがなかっ...

Webサイト上で「特定の時間帯だけ表示させたいバナー」や「深夜には非表示にしたいコンテンツ」など、時間帯によって表示・非表示を切り替える処理は、ちょっとした工夫で簡単に実現できます。この記事では、JavaScriptを使って時間帯によって要...

入力フォームに自動補完機能（オートコンプリート）を追加することで、ユーザーの入力作業を効率化し、入力ミスの防止にもつながります。本記事では、JavaScriptを使って簡単なオートコンプリート機能を実装する方法をご紹介します。自動補完の概要...

ウェブページで動的な表示やフィルター処理を行いたいとき、URLパラメータを活用することでJavaScriptから簡単に制御できます。本記事では、URLSearchParams を使ってパラメータを取得し、値に応じた処理を行う実装方法を紹介し...