JavaScript(ジャバスクリプト) 【JavaScript】ボタンをクリックしたときに現在のパラメータを次のページに渡す
ボタンをクリックしたときに、現在のページのパラメータを次のページに渡したい。現在のページのパラメータを次のページに渡したい例えば、次のようなパラメータがあったとします。このページを開いたときに、次のページにパラメータを渡したい…。例えば、次...
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】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つです。非同期処理は、処理の完了を待たずに次の処理を実行することを可能にするため、プログラムのパフォーマンスを向上させることができま...
JavaScript(ジャバスクリプト) 【JavaScript】アロー関数の使い方（基本）
アロー関数とは？アロー関数は、ES6（ECMAScript 2015）で導入された、簡潔な構文で関数を定義する方法です。従来の関数定義よりも簡潔で読みやすく、特にコールバック関数を扱う際によく利用されます。以下はアロー関数の基本的な書き方で...
JavaScript(ジャバスクリプト) JSON（JavaScript Object Notation）とは何か？基本について
今回は、json（JavaScript Object Notation）とは何か？についてご紹介します。JSONとは？JSONとは「JavaScript Object Notation」の略で、データを表現するための軽量でテキストベースのフ...
JavaScript(ジャバスクリプト) 【JavaScript】ul要素の子要素であるli要素から各li要素の子要素であるa要素を取得してli要素と入れ替える
このスクリプトは、ul要素の子要素であるli要素から、各li要素の子要素であるa要素を取得して、li要素と入れ替えるものです。各li要素の子要素であるa要素を取得して、li要素と入れ替えるこのスクリプトを実行することで、特定のクラス名の配下...
JavaScript(ジャバスクリプト) JavaScriptを使ったアニメーションの実装方法と３つの事例について
JavaScriptのアニメーションを作成することで、目を引くウェブサイトを作成することができます。以下は、人々を驚かせるかもしれない、いくつかのアイデアです。サンプルページはこちら▼JavaScriptの４つのアニメーション例キャンバスを...
JavaScript(ジャバスクリプト) JavaScript初心者必見！抑えておくべき１０つのポイント
JavaScriptはWeb開発において重要なプログラミング言語であり、抑えておくべきポイントは多岐にわたりますが、以下にいくつか挙げてみます。基本構文基本構文：JavaScriptの基本的な構文を把握することが重要です。変数の宣言方法、デ...
