JavaScript(ジャバスクリプト) 【JavaScript】図形の面積を計算する（Canvas）
JavaScriptで様々な図形の面積を計算する方法です。長方形の面積を計算する横 x 縦の値が返ります。// 長方形の面積を計算するfunction calcRectangleArea(width, height) {return wid...
JavaScript(ジャバスクリプト)
JavaScript(ジャバスクリプト) 
JavaScript(ジャバスクリプト) DOMContentLoadedイベント／DOM操作の基本【JavaScript】
DOMとは？DOM（Document Object Model）は、HTMLドキュメントの構造を表す階層的なオブジェクトモデルであり、JavaScriptを使用してドキュメントの内容や構造を変更することができます。DOMの処理は次のような流...
JavaScript(ジャバスクリプト) 【JavaScript】Ajaxとは？（非同期的なJavaScriptとXML）
Ajaxとは？Ajaxとは、Asynchronous JavaScript and XML（非同期的なJavaScriptとXML）の略語で、Webページを更新するために必要な情報を取得するためのテクノロジーです。Ajaxを使用することで、...
JavaScript(ジャバスクリプト) 【JavaScript】マウス位置を取得するプロパティ（client・page・screen・offset）
マウスの位置を取得するJavaScriptでマウスの位置を取得するには、以下のようなプロパティを使用します。clientX, clientYpageX, pageYscreenX, screenYoffsetX, offsetY例えば、以下...
JavaScript(ジャバスクリプト) 【JavaScript】ボタンをクリックしたときに現在のパラメータを次のページに渡す
ボタンをクリックしたときに、現在のページのパラメータを次のページに渡したい。現在のページのパラメータを次のページに渡したい例えば、次のようなパラメータがあったとします。このページを開いたときに、次のページにパラメータを渡したい…。例えば、次...
JavaScript(ジャバスクリプト) 【JavaScript】画面をスクロールしたら画像をふわっと表示する
画面スクロールイベントが発生したら特定の要素にクラスを追加して、スクロールしたら画像をふわっと表示させる方法です。scrollイベントを取得このコードは、特定のクラス名（ここでは 'wp-block-image'）が付いたすべての要素を取得...
JavaScript(ジャバスクリプト) 【JavaScript】端末がダークモードの時にダイアログやポップアップウィンドウで通知する方法
ダークモードでデザインが暗くなる端末がダークモードの時に、CSSによってデザインが見づらい状態・・・になってしまう場合があります。デザインによっては、ダークモードが動くと見づらくなる場合があるかもしれません。この場合に、何かしらアナウンスや...
JavaScript(ジャバスクリプト) 【JavaScript】li要素全体をクリックしてリンク先にジャンプさせる
li要素全体をクリックしてリンクしたい例えば下記のようなHTMLリスト（目次）があったとして、このli要素はリンクにならず、a要素がリンクとなります。<div class="toc-content"> <ol class="toc-list...
JavaScript(ジャバスクリプト) 【JavaScript】特定のクラス名を指定して変数に格納する｜querySelector・querySelectorAll
querySelectorメソッド特定のクラス名を指定するには、documentオブジェクトのquerySelectorメソッドやquerySelectorAllメソッドに、ドット（.）を使ってクラス名を指定します。具体的には、以下のように...
JavaScript(ジャバスクリプト) 【JavaScript】ビルトインオブジェクトとは？JavaScriptの実行環境オブジェクト
ビルトインオブジェクトとは？ビルトインオブジェクトとは、JavaScriptの実行環境に最初から用意されているオブジェクトのことを指します。ビルトインオブジェクトには、以下のようなものがあります。ObjectオブジェクトArrayオブジェク...
JavaScript(ジャバスクリプト) 【JavaScript】フォームの入力内容を確かめる｜制御構文・正規表現・例外処理を使った処理
JavaScriptを使用して、フォームの入力内容を確認する方法について説明します。制御構文（入力欄が空欄かどうか）まず、制御構文を使用して、入力された値が適切かどうかを確認します。以下は、例として、フォームの入力欄が空欄でないことを確認す...
JavaScript(ジャバスクリプト) 【JavaScript】オブジェクト・プロパティ・メソッドについて
オブジェクトとはJavaScriptにおけるオブジェクトは、キーと値のペアの集合で構成されます。キーは文字列であり、値には任意のデータ型を使用できます。オブジェクトは、波括弧 {} 内にキーと値をカンマで区切って定義します。例えば、以下のよ...
JavaScript(ジャバスクリプト) JavaScriptの即時関数（IIFE）とは？
即時関数(IIFE: Immediately Invoked Function Expression)とは？JavaScriptの即時関数(IIFE: Immediately Invoked Function Expression)は、関数...
JavaScript(ジャバスクリプト) 【JavaScript】コメントアウトとは？実行を無視する機能について
コメントアウトとは？JavaScriptにおいてコメントアウトとは、プログラムの中で人間が読みやすくするために、実行時には無視されるようにする機能ことです。コメントアウトは、プログラムに対するメモや付属事項を書いたり、コードの一部を一時的に...
JavaScript(ジャバスクリプト) 【Cookie】ECサイトでカート情報をCookieに保存するためのJavaScriptコードサンプル例
セッションとCookieは、Webサイトにアクセスするユーザー情報を保持するための方法です。今回は、前回のCookie例のひとつで「カート情報の保持」について見ていきます。 カート情報の保持（Cookie）ECサイトの場合、ユーザーがカート...
JavaScript(ジャバスクリプト) Session（セッション）とCookieの違いについて【JavaScript】
Session（セッション）ととCookieは、Webサイトにアクセスするユーザー情報を保持するための方法です。以下のような違いがあります。保持する情報の種類Cookieは、ユーザーのブラウザに保存される小さなテキストファイルで、主にユーザ...
JavaScript(ジャバスクリプト) 【JavaScript】Cookieを使ってWEBページへの再訪問時の実行を制御する
Cookieを使って再訪問時の実行を制御するこのコードは、Cookieを使って、例えば２回目の訪問ユーザーにポップアップ広告を制御するといった場合のひとつの方法です。Cookieを使用して、ユーザーが最後にポップアップを閉じた時間を追跡し、...
JavaScript(ジャバスクリプト) 【JavaScript】ブラウザーキャッシュでWEBページへ再訪問時の実行を制御する
再訪問時の実行を制御するこのコードは、ブラウザーキャッシュを使用して、例えば２回目の訪問ユーザーにポップアップ広告を制御するといった場合のひとつの方法です。ポップアップが表示された時間を保存するために、ブラウザーキャッシュ内に "popup...
JavaScript(ジャバスクリプト) 【JavaScript】２回目の訪問ユーザーにポップアップなどを表示させないようにする（local storage）
ポップアップを制御する（popup_cache）このコードは、local storage（ローカルストレージ）を使用して２回目の訪問ユーザーにポップアップ広告を制御するためのひとつの方法です。ポップアップが表示された時間を保存するために、ロ...
JavaScript(ジャバスクリプト) JavaScriptでtitleとdescriptionを書き換える方法
titleを書き換える｜document.titleJavaScriptを使用して、ウェブページのタイトルを書き換えるには、以下のように書きます。document.title = "新しいタイトル";このコードでは、documentオブジェ...
JavaScript(ジャバスクリプト) 【JavaScript】郵便番号検索APIを使って住所を自動取得する（zipcloud）
無料で使える郵便番号検索APIを使って、住所を自動入力してみます。zipcloudフォームのHTMLを作るまずは、フォームのHTMLを作ります。<form> <label for="zip">郵便番号：</label> <input typ...
JavaScript(ジャバスクリプト) 【JavaScript】現在のページのパラメータを取得して条件でリダイレクトするかどうか切り分ける
パラメータを取得する（URLSearchParams）：params.get以下のようなコードで、現在のページのURLからパラメータを取得し、条件に応じてリダイレクトするかどうかを切り分けることができます。// 現在のURLからパラメータを...
JavaScript(ジャバスクリプト) 【Javascript】URLパラメータの値を取得する｜window.location.search
window.location.searchプロパティJavascriptでURLパラメータの値を取得するには、以下のようにwindow.location.searchプロパティを使用します。このプロパティは、現在のページのURLの?以降の...
JavaScript(ジャバスクリプト) 【JavaScript】他のページにリダイレクトさせる｜location
JavaScriptで他のページにリダイレクトするには、以下のように設定します。.location.hreflocationオブジェクトのhrefプロパティにリダイレクト先のURLを設定します。window.location.href = ...
JavaScript(ジャバスクリプト) 【JavaScript】セミコロン（;）の記号を忘れるとどうなるのか？
セミコロン（;）の記号を忘れるとJavaScriptにおいて、セミコロン（;）を忘れると、次のような影響があります。文法エラー: セミコロンはJavaScriptの文の終わりを示す重要な役割を果たしています。セミコロンを忘れると、文法エラー...
JavaScript(ジャバスクリプト) 【JavaScript】XMLHttpRequestオブジェクトの基本について
XMLHttpRequestとは？XMLHttpRequest（XHR）は、JavaScriptを使用してウェブページとサーバーとの間でデータを非同期に送受信するためのAPIです。XHRは、ウェブページの再読み込みなしでデータを取得したり、...
JavaScript(ジャバスクリプト) 【JavaScript】addEventListener()で登録できるイベント一覧と読み込む順番
.addEventListener()とは？JavaScriptで、.addEventListener()はイベントリスナーを登録するためのメソッドです。下記のように使用します。window.addEventListener('load',...
JavaScript(ジャバスクリプト) 【JavaScript】じゃんけんゲームを作る（Part1）
JavaScriptでじゃんけんゲームを作ってみます。プログラミングの勉強にもなりますので、ぜひ挑戦ください。じゃんけんのルール改めて、じゃんけんのルールをおさらいしてみます。じゃんけんのルールプレイヤーは「グー」「チョキ」「パー」の中から...
JavaScript(ジャバスクリプト) 【JavaScript】Canvas（キャンバス）とは？
Canvas（キャンバス）とは？Canvasは、JavaScriptでグラフィックスを描画するためのHTML5要素の1つです。Canvas要素は、width（幅）とheight（高さ）属性を指定してHTMLドキュメント内に配置されます。そし...
JavaScript(ジャバスクリプト) 【JavaScript】コールバック関数とは？基本について
コールバック関数とは？コールバック関数とは、JavaScriptにおいて非同期処理を行うための重要な概念の1つです。非同期処理は、処理の完了を待たずに次の処理を実行することを可能にするため、プログラムのパフォーマンスを向上させることができま...
