JavaScript

Web制作

JavaScriptのHTMLCollectionとNodeListの違い

HTMLCollectionとNodeListは、どちらもDOM(Document Object Model)を操作する際に、複数の要素を取得するためにJavaScriptで利用されるオブジェクトコレクションです。しかし、それぞれの特徴や使用方法にいくつかの違いがあります。
Web制作

【jQuery】slick.jsに一時停止機能をつける

slick.jsを一時停止できるようにします。最低限しか書いていないのでお好みで変更してください。
Web制作

【HTML・CSS・JavaScript】aタグのリンクを無効にする

aタグのリンクを無効にしたい場合の、HTML・CSS・JavaScriptそれぞれの方法です。 単にリンクを無効にしたいだけであれば、href属性を外してtabindex="-1"を付けるのが最もシンプルで、デメリットもありません。
Web制作

【JavaScript】いろいろな月末/月初・年末/年始の日付を取得する

JavaScriptで、任意の日付を起点として色々な月末・月初や年末・年始の日付を取得する方法です。
Web制作

【JavaScript】Dateオブジェクトで現在の年月日を取得したいが時刻はいらない場合

Dateオブジェクトを使いたいが年・月のみが必要で、時刻は00:00:00にしておきたいときの処理です。new Date()で現在の日時を取得し、それをtoDateString() メソッドで日付だけの文字列にします。受け取った日付の文字列を使い、再度Dateオブジェクトを作成します。
Web制作

【JavaScript】sort()で連想配列をソートする

sort()は、配列の要素を並び替えるメソッドです。引数を指定しない場合、配列内の各要素を文字列に変換して昇順で並び替えます。また、並び替えた新しい配列を返すのではなく対象の配列そのものを変更します。
Web制作

【Swiper】ズームしながらフェードで切り替わるスライダーを実装する

JavaScriptライブラリ「Swiper」を使って、ズームしながらフェードで切り替わるスライダーを実装します。
フォーム

Google reCAPTCHA V3を導入する

PHPメールフォームにGoogle reCAPTCHA V3を設置する方法です。細かい処理はお好みでどうぞ。
Web制作

JavaScriptでスクロールを監視するならIntersection Observerが便利

Intersection Observerは、特定の領域を監視して、監視対象の要素がその領域に交差したかどうかを検知します。デフォルトでは、viewport(見えている範囲)とある要素が交差した場合に、何かを実行します。
Web制作

JavaScriptの同期通信でPHPとJSONデータをやりとりする

PHPから返ってきた結果ををreturnしたいときなど、どうしても非同期ではなく同期通信でやりたいとき用です。下記のようにXMLHttpRequestのrequest.openの第三引数をfalseにすることで同期通信が可能です。