JavaScript(ジャバスクリプト)

DOMとは？DOM（Document Object Model）は、HTMLドキュメントの構造を表す階層的なオブジェクトモデルであり、JavaScriptを使用してドキュメントの内容や構造を変更することができます。DOMの処理は次のような流...

Ajaxとは？Ajaxとは、Asynchronous JavaScript and XML（非同期的なJavaScriptとXML）の略語で、Webページを更新するために必要な情報を取得するためのテクノロジーです。Ajaxを使用することで、...

マウスの位置を取得するJavaScriptでマウスの位置を取得するには、以下のようなプロパティを使用します。clientX, clientYpageX, pageYscreenX, screenYoffsetX, offsetY例えば、以下...

画面スクロールイベントが発生したら特定の要素にクラスを追加して、スクロールしたら画像をふわっと表示させる方法です。scrollイベントを取得このコードは、特定のクラス名（ここでは 'wp-block-image'）が付いたすべての要素を取得...

ダークモードでデザインが暗くなる端末がダークモードの時に、CSSによってデザインが見づらい状態・・・になってしまう場合があります。デザインによっては、ダークモードが動くと見づらくなる場合があるかもしれません。この場合に、何かしらアナウンスや...

li要素全体をクリックしてリンクしたい例えば下記のようなHTMLリスト（目次）があったとして、このli要素はリンクにならず、a要素がリンクとなります。<div class="toc-content"> <ol class="toc-list...

querySelectorメソッド特定のクラス名を指定するには、documentオブジェクトのquerySelectorメソッドやquerySelectorAllメソッドに、ドット（.）を使ってクラス名を指定します。具体的には、以下のように...

ビルトインオブジェクトとは？ビルトインオブジェクトとは、JavaScriptの実行環境に最初から用意されているオブジェクトのことを指します。ビルトインオブジェクトには、以下のようなものがあります。ObjectオブジェクトArrayオブジェク...

JavaScriptを使用して、フォームの入力内容を確認する方法について説明します。制御構文（入力欄が空欄かどうか）まず、制御構文を使用して、入力された値が適切かどうかを確認します。以下は、例として、フォームの入力欄が空欄でないことを確認す...

オブジェクトとはJavaScriptにおけるオブジェクトは、キーと値のペアの集合で構成されます。キーは文字列であり、値には任意のデータ型を使用できます。オブジェクトは、波括弧 {} 内にキーと値をカンマで区切って定義します。例えば、以下のよ...

即時関数(IIFE: Immediately Invoked Function Expression)とは？JavaScriptの即時関数(IIFE: Immediately Invoked Function Expression)は、関数...

コメントアウトとは？JavaScriptにおいてコメントアウトとは、プログラムの中で人間が読みやすくするために、実行時には無視されるようにする機能ことです。コメントアウトは、プログラムに対するメモや付属事項を書いたり、コードの一部を一時的に...

セッションとCookieは、Webサイトにアクセスするユーザー情報を保持するための方法です。今回は、前回のCookie例のひとつで「カート情報の保持」について見ていきます。 カート情報の保持（Cookie）ECサイトの場合、ユーザーがカート...

Session（セッション）ととCookieは、Webサイトにアクセスするユーザー情報を保持するための方法です。以下のような違いがあります。保持する情報の種類Cookieは、ユーザーのブラウザに保存される小さなテキストファイルで、主にユーザ...

Cookieを使って再訪問時の実行を制御するこのコードは、Cookieを使って、例えば２回目の訪問ユーザーにポップアップ広告を制御するといった場合のひとつの方法です。Cookieを使用して、ユーザーが最後にポップアップを閉じた時間を追跡し、...

再訪問時の実行を制御するこのコードは、ブラウザーキャッシュを使用して、例えば２回目の訪問ユーザーにポップアップ広告を制御するといった場合のひとつの方法です。ポップアップが表示された時間を保存するために、ブラウザーキャッシュ内に "popup...

ポップアップを制御する（popup_cache）このコードは、local storage（ローカルストレージ）を使用して２回目の訪問ユーザーにポップアップ広告を制御するためのひとつの方法です。ポップアップが表示された時間を保存するために、ロ...

titleを書き換える｜document.titleJavaScriptを使用して、ウェブページのタイトルを書き換えるには、以下のように書きます。document.title = "新しいタイトル";このコードでは、documentオブジェ...

無料で使える郵便番号検索APIを使って、住所を自動入力してみます。zipcloudフォームのHTMLを作るまずは、フォームのHTMLを作ります。<form> <label for="zip">郵便番号：</label> <input typ...

JavaScriptで他のページにリダイレクトするには、以下のように設定します。.location.hreflocationオブジェクトのhrefプロパティにリダイレクト先のURLを設定します。window.location.href = ...

セミコロン（;）の記号を忘れるとJavaScriptにおいて、セミコロン（;）を忘れると、次のような影響があります。文法エラー: セミコロンはJavaScriptの文の終わりを示す重要な役割を果たしています。セミコロンを忘れると、文法エラー...

XMLHttpRequestとは？XMLHttpRequest（XHR）は、JavaScriptを使用してウェブページとサーバーとの間でデータを非同期に送受信するためのAPIです。XHRは、ウェブページの再読み込みなしでデータを取得したり、...

.addEventListener()とは？JavaScriptで、.addEventListener()はイベントリスナーを登録するためのメソッドです。下記のように使用します。window.addEventListener('load',...

Canvas（キャンバス）とは？Canvasは、JavaScriptでグラフィックスを描画するためのHTML5要素の1つです。Canvas要素は、width（幅）とheight（高さ）属性を指定してHTMLドキュメント内に配置されます。そし...

コールバック関数とは？コールバック関数とは、JavaScriptにおいて非同期処理を行うための重要な概念の1つです。非同期処理は、処理の完了を待たずに次の処理を実行することを可能にするため、プログラムのパフォーマンスを向上させることができま...

アロー関数とは？アロー関数は、ES6（ECMAScript 2015）で導入された、簡潔な構文で関数を定義する方法です。従来の関数定義よりも簡潔で読みやすく、特にコールバック関数を扱う際によく利用されます。以下はアロー関数の基本的な書き方で...

今回は、json（JavaScript Object Notation）とは何か？についてご紹介します。JSONとは？JSONとは「JavaScript Object Notation」の略で、データを表現するための軽量でテキストベースのフ...