Web Programming

JavaScript

Index

JavaScript とは: JavaScriptが何を担当する言語かを、HTML/CSSとの役割分担・実行環境（ブラウザ/Node.js）・動的型付け・イベント駆動・ECMAScriptとの関係まで含めて基礎から把握できます。
counter（クリックで数が増える）: ボタンをクリックするたびに数値を1ずつ加算し、変数の再代入とtextContentによるDOM更新の流れを確認できます。

JavaScriptの概要

ブラウザ環境: JavaScriptが利用されている最も一般的な環境がブラウザ環境です。

はじめに

JavaScriptの実行方法: HTMLから JavaScriptを読み込む方法は、２つです。
JavaScriptが動かない時の確認方法: 動かないJavaScriptの原因を調べて直すために、Chromeの開発者ツールでコードの動きを一歩ずつ確認する方法を紹介。
コード記述のルール: コードを読みやすく、ミスを減らすための「書き方のコツ」をまとめたページ。letやconstの使い分け、セミコロンの扱い、命名やインデントの統一など、きれいに整ったコードを書くための基本が身につきます。
コメント: JavaScriptのコメントの書き方には、２通りの記述方法があります。
セミコロンの使い方

変数・定数とデータ型

変数と定数: 変数とは、プログラムで使われる値を、名前付きで管理するラベルのようなものです。
識別子と予約語: 変数名は、識別子と呼ぶこともあります。
データ型: プログラムで扱うデータにはいくつかの種類があり、そのデータの種類のことをデータ型、または型と呼びます。
リテラル: JavaScriptでプログラムに直接記述するデータ値のことをリテラルと呼びます。
テキスト: 文字列は、16ビット値が順序付けて並べられた不変のデータです。
BigInt: 任意の精度で整数値を扱える型です。

オブジェクトとメソッド・プロパティの概要

オブジェクト、メソッド、プロパティとは

不変な基本型値と可変なオブジェクト参照

ラッパーオブジェクト

グローバルオブジェクト

プログラムのどこからでもアクセスできる共通の機能や値を提供する、プログラミング言語の基盤です。

型の変換

変数のスコープ

グローバルスコープ（Global Scope）: 特定の関数やブロックの外部に定義された変数や関数が、プログラム全体のどの箇所からでも参照・変更できる最も広いアクセス範囲のことです。
ローカルスコープ（Local Scope）: 関数やブロック(コードの塊)内部に限定されるスコープ。

演算子

演算子の概要
算術演算子 (Arithmentic operator): 足し算・引き算・かけ算・わり算・余りやべき乗まで、数字をどう計算するかと、+ が文字をつなぐ特別ルール、0 で割ったときや小数の誤差などのつまずきポイントを、手早く把握。
関係演算子
論理演算子
代入演算子
その他の演算子: JavaScriptで使う少し特殊な演算子たちをまとめたページ。短く書ける工夫や、意外と知られていない使いどころが分かります。
評価式

文・制御構文

特定の条件が満たされるまで同じ処理を繰り返し実行するための仕組みです。

break / continue

break [statement]: ループや switch文を条件が満たされた時点で即座に終了させるための制御文です。
continue [statement]: ループの中で特定の条件に当てはまった時に、その繰り返しの残りの処理をスキップして次の繰り返しに進むために使う命令です。

関数

関数（function）: 特定の処理をひとまとまりにして呼び出しやすくし、再利用可能にするためのコードの部品です。
アロー関数: => (矢)を使って関数リテラルを記述します。
return: 関数から値を返し、その関数の実行を終了します。

主要なビルトインオブジェクト

Number / String / Boolean / Object

数値 [Number]: Number型は、-(2⁵³ - 1) から 2⁵³ - 1 までの数値は正確に表現できます。
String: 文字列を参照／設定する。
Boolean: Boolean（真偽値）は、trueまたは falseという値を取ります。
Object [constructor]: 新しいオブジェクトを作成し、プロパティやメソッドを追加するための方法です。

配列（Array）

配列を作成します。

Math

数学的な定数と関数を提供するオブジェクトです。

Math.PI: 円周率。約 3.14159 です。
Math.random(): 0 以上 1 未満の疑似乱数を返す。

Date [object]

日付や時刻の取得・設定・操作を行うための組み込みオブジェクトです。

Promise [constructor]

非同期処理の成功または失敗の結果を表現し、将来の処理結果を管理するためのオブジェクトです。

Map / Set

Map: 様々な型のキーと値のペアを順序付けして保持し、効率的に操作できるデータ構造です。
Set: 重複する値を一切含まず、各要素がユニークなデータの集まりを管理するための機能です。

JSON (JavaScript Object Notation)

データを表現するための軽量なテキストベースの形式で、名前と値のペアの集合（オブジェクト）や値の順序付けられたリスト（配列）を使用してデータを構造化します。

正規表現 [Regular Expressions]

特定のパターンに基づいて文字列を検索、置換、抽出するための強力なツールです。

Error [object]

プログラム内で発生したエラーの情報を捕捉し、管理するために使用されるオブジェクトです。

DOM操作（クライアントサイド）

文字コード

日本語環境での文字化け対策など

ライブラリ・フレームワーク

jQuery: JavaScriptを簡潔に書けるようにし、DOM操作やイベント処理、Ajax、アニメーションを効率的に行うための軽量なライブラリです。
Three.js: JavaScriptでブラウザ上に3Dグラフィックスを簡単に描画できるオープンソースのライブラリです。
Vue.js: シンプルで柔軟な構造を持ち、リアクティブなデータバインディングとコンポーネントベースのアーキテクチャにより、効率的に動的なユーザーインターフェースを構築できるJavaScriptフレームワークです。
React
Angular

WebGL

WebGL: ウェブブラウザ上でインタラクティブな3Dおよび2Dグラフィックスをハードウェアアクセラレーションを利用して高速に描画するための JavaScript APIです。

Node.js（サーバーサイドJavaScript）

Node.js: Node.jsは、JavaScriptをウェブブラウザ以外で使えるようにするプラットフォームで、効率的なアプリケーション開発を可能にします。

付録・その他

デバウンス処理 [Debounce processing]: 頻繁に起こるイベントを一定時間待ってから一度だけ実行することで、不要な処理を防ぐ手法です。

Index

addEventListener: イベントリスナー（さまざまなイベントに合わせて処理を実行させる関数）を登録するためのメソッドです。
abort: 通信や処理の途中で「もういらない」と思ったときに、進行中の操作を途中で止めるための仕組み。
AbortController: ネット通信などの処理を「途中でキャンセルしたい」ときに使える、ストップボタンのような仕組み。
alert: 警告ダイアログを表示したい。
appendChild: 特定の親ノードの子ノードの最後にノードを追加する。
apply: 関数を特定の this値と、引数を配列で指定して実行できるようにするものです。
arc: 指定された中心点、半径、開始角度、終了角度、描画方向を使って、円や円弧を描画するための方法です。
arguments
array: 配列を作成します。
ArrowDown: キーボードの下矢印キーを押したことをプログラムが読み取って、「下に動かす」といった操作を自由に決められる仕組みのことです。
ArrowUp: キーボードの「↑」キーが押されたことをJavaScriptでキャッチして、上に動かす処理や前に戻る動きを自由にプログラムできる仕組みです。
async: 時間のかかる処理を、ほかの動きを止めずに順番どおり書けるようにするための合図。
auxclick: 左クリックだけじゃなくて、マウスの中ボタンや右ボタンで押された時の動きもキャッチして、好きな処理を動かせるイベント。
await: JavaScriptで“ちょっと待って”ができる合図。データの読み込みなどが終わるまで処理を一時停止して、Promiseの結果を受け取れる。

backgroundColor: 背景の色をJavaScriptで自由に変えることができます。
beginPath: 新しい描画を開始するために、以前の描画パスから独立させる命令です。
body [object]: ウェブページの表示内容を操作するためのHTMLドキュメントの主要な部分にアクセスするオブジェクトです。
Boolean: Boolean（真偽値）は、trueまたは falseという値を取ります。
break [statement]: ループや switch文を条件が満たされた時点で即座に終了させるための制御文です。

cancelable: イベントがキャンセル可能かどうか、イベントが発生しないように抑止することができるかを示します。
.catch(): エラーが起きたときに「こうしてね」と指示を出すための書き方で、Promiseなどの処理を安全に終わらせる役割を持つ。
change: フォーム部品でユーザーによる要素の値の変更が確定したときに発生するイベントです。
characterSet: 文字コードを取得する。
charCodeAt: 文字コードを取得する。
checkValidity() [method]: フォームの入力がルールを守っているかチェックするメソッドです。
childNodes: 特定の要素の子要素を含む NodeList（ノードリスト）を返す。
class: オブジェクトの共通の性質や動きをひとまとめにした「設計図」を作れる仕組み。
classList: 要素のクラス属性のリストを取得して返します。
classList.add() [method]: 指定した要素にクラス名を重複なく追加することで、CSSやDOM操作による見た目や動作の変更を手軽に実現するためのメソッドです。
className: HTML要素のクラス属性を設定または取得する。
clearInterval: setInterval() でセットしたタイマーを解除する。
clearTimeout: setTimeout() でセットしたタイマーを解除する。
click: ボタンやリンクを「押した合図」を受け取り、画面の切り替え・送信の中止・メニューの開閉など“押した後に起きてほしいこと”を、マウス・タップ・キーボードの操作を含めて安全に実装できる仕組み。
clientHeight [property]: 要素のパディングを含む表示高さをピクセルで取得できるプロパティ
clientWidth [property]: スクロールバーを除いた、要素の見える横幅をピクセルで取得できるプロパティ。
cloneNode [method]: 指定した DOM要素を、その子要素も含めて複製できるメソッドです。
close() [method]: ウィンドウやポップアップウィンドウを閉じるために使用する。
closest(): クリックされた子要素からclosest()でボタンやカードなど最も近い一致要素を見つけ、イベント委譲の分岐を安全に行います。
codePointAt: Unicode コードポイント値である負ではない整数を返します。
const: 文字列や数値などのデータに名前を付けたり繰り返し利用するために、データを保持するための変数を宣言します。
constructor: オブジェクトが作られたときに、自動で初期設定をしてくれる「はじまりの関数」。
content: HTML要素のメタ情報やテキスト内容を示すプロパティや属性を指し、ページや要素の中身を指定・操作するために使われます。
continue [statement]: ループの中で特定の条件に当てはまった時に、その繰り返しの残りの処理をスキップして次の繰り返しに進むために使う命令です。
create(): あるオブジェクトをひな形として受け継ぎ、新しいオブジェクトを作るための仕組みで、似た性質を持つものを簡単にそろえられる。
createElement(): 新しいHTML要素をプログラムで作成するための機能です。

dataset

HTMLに書いたdata-*属性を、JavaScriptのdatasetを使って読み取ったり書き換えたりできるしくみ。小さなデータをHTML要素ごとに持たせたいときに便利。

Date [object]

日付や時刻の取得・設定・操作を行うための組み込みオブジェクトです。

decodeURI [function]

ウェブアドレスやその他のURIから特殊文字のエンコーディングを解除し、もとの読みやすい文字列に戻す関数です。

decodeURIComponent [function]

ウェブアドレスに含まれる特殊文字を元の文字（例えば日本語や空白など）に戻す関数です。

default

モジュールから単一の値をエクスポートする際や、switch文内でどのケースにも当てはまらない場合の処理を指定するために使用されます。

defaultValue

入力欄に最初から入っている「元の値」をJavaScriptで扱うためのプロパティです。

delete

オブジェクトや配列の中から特定のプロパティや要素を取り除くためのキーワード。

dispatchEvent

EventTarget にイベントを発火してリスナーを呼び出し、bubbles / cancelable / composed と戻り値で伝播とキャンセル結果まで扱えます。

do...while [loop]

コードを一度実行してから条件をチェックし、その条件が真である間はその処理を繰り返すループです。

document

ドキュメントを参照する。

document.close(): openメソッドで出力を開始したドキュメントへの出力を終了します。
document.open(): ドキュメントを開いて書き出し可能な状態にします。

DOMContentLoaded

Webページが読み込みが完了した時に発動するイベント。（画像などのリソースは含まない）

element: HTML及び XHTMLの要素を表現するオブジェクト。
encodeURI [function]: URLをウェブ上で安全に使用できる形式に変換するために使用されます。
encodeURIComponent [function]: URLの一部として安全に使用するために文字列をパーセントエンコーディング形式に変換する関数です。
Error [object]: プログラム内で発生したエラーの情報を捕捉し、管理するために使用されるオブジェクトです。
eval [function]: 文字列として渡されたコードを実行する機能ですが、セキュリティリスクが高いため使用は推奨されません。
Event: Eventインターフェイスは、DOMで発生するイベントを表します。
EventTarget: EventTargetは DOMインターフェイスで、イベントを受け取ることや、リスナーを持つことができるオブジェクトが実装しています。
export: 定義された関数、変数、クラスなどを他のファイルからアクセス可能にするために使用されます。

fetch()

サーバーやAPIなどからデータを取りに行き、その結果をJSONなどで受け取れる便利な仕組み。Webサイトが外部の情報を使うときに欠かせない道具。

fill()

配列の全要素または指定された範囲の要素を特定の値で上書きする機能を提供します。

fillRect()

キャンバス上に指定した位置と大きさで四角形を描き、それを現在の塗りつぶし色で塗りつぶす機能を提供します。

fillStyle

キャンバス上で描画する図形や文字の色や模様を設定するプロパティです。

filter()

配列の中から「条件に合うものだけ」を取り出して、新しい配列を作れるしくみ。

find()

配列の中を上から順に見て、条件に合う最初の一つだけを見つけて返すしくみ。

for [loop]

指定した条件が満たされる間、コードブロックを繰り返し実行するための制御構造です。

for...in [loop]: オブジェクトの列挙可能なすべてのプロパティを一つずつ取り出して処理するための構文です。
for...of [loop]: ループの一種で、配列や文字列などの反復可能オブジェクトに対して、要素の値を繰り返し処理するために使用されます。

forEach() [method]

配列の各要素に対して、指定された関数を一度ずつ実行するために使用されます。

forms

文書内に含まれるすべての <form> を列挙した HTMLCollectionを返します。

frames

ウィンドウ自体を、現在のウィンドウの直接のサブフレームを列挙した配列風オブジェクトとして返します。

fromCharCode

Unicodeコードポイントを表す数値を引数に取り、それに対応する文字列を返す。

fromCodePoint

指定されたコードポイントのシーケンスを使って生成された文字列を返します。

function 「関数」

特定の処理をひとまとまりにして呼び出しやすくし、再利用可能にするためのコードの部品です。

getAttribute [method]: HTMLのタグに付いている「id」や「data属性」などの値を、JavaScriptで読み取って使うための方法。
getContext(): キャンバス上で絵を描くために使う道具や技法（「2d」や「webgl」など）を選ぶ方法です。
getElementsByClassName: 特定の class名（class属性値）から要素を取得する際に使用します。
getElementById: オブジェクトの情報を id で取得する。
getFullYear() [method]: Dateオブジェクトにおいて、getFullYear()メソッドは古い getYear()の代替として推奨され、オブジェクトが表すローカルタイムを基準に西暦年を整数で返すメソッドです。
getMonth() [method]: getMonth() は、Dateオブジェクトから 0（1月）～11（12月）の範囲で現在の“月”を取得するメソッドです。

hasAttribute(): HTML要素に「この属性は付いているかな？」をサクッと調べて、あるかないかをすぐに判断できるチェック機能。
hasOwn(): オブジェクトがそのプロパティを自分で持っているかを確かめて、余計なものをまちがって数えないようにするための機能。
hasOwnProperty [method]: オブジェクト自身が特定のプロパティを持っているかどうかを確認するためのものです（継承されたプロパティは含まれません）。
height [property]: ウェブページ上の要素の高さを設定または取得するために使用されます。
History [object]: JavaScriptからブラウザーの「戻る」「進む」などの履歴操作を行い、URLやセッション履歴の状態を動的に変更・管理できる仕組みを提供するAPIです。
href: URL を参照／設定する
HTMLDataListElement
HTMLElement: 任意の HTML 要素を表します。
HTMLTableColElement

id: idの取得・設定・削除。
if ... else: 条件分岐処理をする。
Image: 新しく HTMLImageElementインスタンスを作成します。
import: 他のモジュールから機能やデータを読み込むために使用されます。
importNode: 外部ドキュメントから、現在のドキュメント内へ挿入可能なノードのコピーを作成します。
in: in は「この名前の入れ物が、オブジェクトの中か、親ゆずりのどこかにある？」を一瞬で確かめる道具で、配列では番号の有無を調べる、シンプルな存在チェック用のキーワードです。
includes(): 配列や文字列の中に、欲しい値や単語が入っているかをそのままの言い方で確かめられる仕組みで、結果は true か false で返ってくる。
Infinity: 計算可能な数値の範囲を超える非常に大きな数値、または無限大を表す特別な値です。
innerHeight: ブラウザの表示領域の高さをピクセル単位で教えてくれるプロパティです。
innerHTML: HTML要素の中身を変更する際に使用する Elementオブジェクトのプロパティです。
innerText [property]: HTML要素内のユーザーに表示されているテキストのみを取得または変更するために使用されます。
innerWidth: ブラウザーのウィンドウ内の表示領域の幅をピクセル単位で教えてくれるプロパティです。
instanceof 演算子: オブジェクトが特定のクラスまたはコンストラクタ関数から作成されたかどうかを確認する。
Intl [object]: ユーザーの言語や国に合わせて、日付や数値などを自動でわかりやすく表示する仕組みです。
isFinite [function]: 与えられた値が実際の有限数であるかどうかを判断するためのツールです。
isNaN [function]: 与えられた値が数値ではないかどうかを判断するためのものです。
item() [method]: 特定のコレクション内の項目にアクセスするために使用されます。

join [method]

配列の各要素を指定した区切り文字で結合して一つの文字列を生成します。

JSON (JavaScript Object Notation)

JSON.parse(): 文字列形式のデータを JavaScriptが操作しやすいオブジェクト形式に変換する処理のことです。
JSON.stringify(): JavaScriptのデータを「文字列」に変えて、保存や送信に使える形にするための便利な変換機能。

.json()

サーバーから受け取った文字のデータを、JavaScriptがそのまま扱える形（オブジェクトや配列など）に変えてくれる関数。

keydown: キーが押されたときに発生するイベントです。
keys(): オブジェクトの中にある「名前（キー）」をまとめて取り出して、どんな項目があるかを一覧で確認できるしくみ。
keyup: キーが離されたときに発生するイベントです。

lastModified [property]: Webページが最後に更新された時刻を取得するためのプロパティです。
length: 文字列の長さ（文字数）を参照する。
let: 文字列や数値などのデータに名前を付けたり繰り返し利用するために、データを保持するための変数を宣言します。
links: 文書中の、href属性の値を持つすべての area要素とアンカー要素のコレクションを返します。
load: Webページの読み込みが完了した時に発動するイベント。（画像などのリソースすべて含む）
location [object]: ロケーション（URL）情報を参照／設定する

Map

様々な型のキーと値のペアを順序付けして保持し、効率的に操作できるデータ構造です。

map() [method]

配列の各要素にコールバックを適用して、変換結果を並べた新しい配列を返す。

Math

数学的な定数と関数を提供するオブジェクトです。

Math.max: 数字をいくつか渡すと、その中で一番大きい数字を見つけて返してくれる仕組みです。
Math.min: いくつかの数字を並べたときに、その中で「一番小さい数字」をすぐに教えてくれる便利な仕組みです。
Math.PI: 円周率。約 3.14159 です。
Math.random(): 0 以上 1 未満の疑似乱数を返す。

message [property]

エラーオブジェクトに対して発生したエラーの説明をテキスト形式で提供します。

mousedown

マウスのボタンが押された時に発生するイベントです。

mousemove

マウスが動いた時に発生するイベントです。

mouseup

ユーザーが押していたマウスボタンを離した瞬間に発生するイベントです。

NaN (Not a Number)

数値として無効または未定義の計算結果を表す特別な値。

navigator [object]

ブラウザやデバイスに関する情報を取得するためのオブジェクトです。

navigator.onLine [property]: ユーザーがオンラインかオフラインかを示す真偽値を取得します。

new

新規オブジェクトを生成する。

nodeType

要素の種類を示す整数値で、例えば、テキストノードや属性ノード、要素ノードなどがあります。

null

明示的に何もない状態を表す特別な値。

Number()

数値を扱うためのオブジェクト。文字列を数値に変換したり、数値の演算を行うことができます。

Object [constructor]: 新しいオブジェクトを作成し、プロパティやメソッドを追加するための方法です。
Object.prototype.toString() メソッド: JavaScriptの標準オブジェクトで、引数として渡された値の型を文字列で表現するメソッドです。
onAbort: 画像やフレームなどのリソースの読み込みが中断された場合に発生するイベントハンドラーです。
onBlur: フォーカスがはずれたら処理を実行する。
onChange: フォームの状態が変化したら処理を実行する。
onClick: オブジェクトがクリックされたら処理を実行する。
onDblClick: オブジェクトがダブルクリックされたら処理を実行する。
onError: 画像のリンクが切れていたり、サーバの都合などによってエラーが発生した場合にイベントを取得する。
onFocus: フォーカスされたら処理を実行する。
oninput: ユーザーが入力欄の内容を変更するたびに即座に反応し、その変化をリアルタイムで処理できるイベントです。
onkeydown: キーボードのキーが押された時に実行されるイベントハンドラです。
onKeyPress: キーが押されている間処理を実行する。
onkeyup: キーが押されて離されたら処理を実行する。
onLoad: Webページ読み込み完了時に処理を実行する。
onMouseDown: マウスボタンが押されたら処理を実行する。
onmousemove: ユーザーがマウスを動かしたときにその動きを検知して処理を実行できるイベントです。
onMouseOut: マウスカーソルが要素の上から外れたときに指定した処理を実行するためのイベントハンドラです。
onmouseover: マウスカーソルがボタンや画像などの要素の上に乗った瞬間をきっかけにして、色を変えたりメッセージを出したり別の処理を動かしたりできる“合図”です。
onMouseUp: マウスボタンが離されたら処理を実行する。
onUnload: 他のページに移動したら処理を実行する。
open: 新しいウィンドウを開く。

parseFloat [function]: 文字列を数値に変換するために使われ、文字列が数値で始まる場合はその数値を、そうでない場合は NaN（数値ではない）を返します。
parseInt [function]: 文字列を数値に変換する関数です。
pause() [method]: 音声や動画の再生を「ちょっと止めたい」ときに使う命令で、もう一度 play() すれば続きから再生できる。
play(): 音や動画を、ボタンを押したようにJavaScriptから再生できるようにするための命令。
preventDefault(): 既定のアクションを通常どおりに行うべきではないことを伝えます。
Promise [constructor]: 非同期処理の成功または失敗の結果を表現し、将来の処理結果を管理するためのオブジェクトです。
prompt() [function]: ユーザーから入力を受け取るためのシンプルなポップアップダイアログを表示する機能です。
push() [method]: 引数として渡された要素を配列の末尾に追加する。

querySelector: 指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Elementを返します。
querySelectorAll: 指定したセレクタに一致するすべての HTML要素（NodeList）を取得する。

rangeOverflow: 入力値が設定された最大値より大きい場合にエラーとして判定する仕組みです。
rangeUnderflow: 入力値が設定された最小値より小さい場合にエラーとして判定する仕組みです。
readyState [property]: ドキュメントの読み込みと解析の状態を示すプロパティです。
reduce(): バラバラの配列を順番に処理して、合計や1つの結果にまとめたいときに使うメソッド。
remove: 要素を削除する。
removeAttribute: 要素に設定されている属性を削除する。
replace(): 文字列の中で指定したパターン（文字列や正規表現）に一致する部分を新しい文字列に置き換えるためのメソッドです。
reportValidity() [method]: 入力チェックを行い、不正があれば自動でエラーメッセージを表示するメソッドです。
requestAnimationFrame: 画面の描画タイミングに合わせて「次のコマ」を予約できるしくみで、ムダな更新を減らしつつ、なめらかな動き（アニメーションやゲームのループ）を作りやすくしてくれます。
reset(): HTMLフォームの入力値を消去し、初期状態に戻すためのメソッドです。
response: サーバーから返ってくる「答え」を受け取って中身を取り出すための“データの箱”のような役割。
return: 関数から値を返し、その関数の実行を終了します。

selection: ユーザーが選択した範囲を表します。
Set: 重複する値を一切含まず、各要素がユニークなデータの集まりを管理するための機能です。
setAttribute: 指定したHTML要素に属性を追加する、または既存の属性を変更する。
setCustomValidity [method]: フォームの入力欄にオリジナルのエラーメッセージを設定するためのメソッドです。
setInterval: 指定した時間間隔ごとに同じ処理を繰り返し実行するための関数です。
setProperty: 要素のスタイルを変更するために使用されるメソッドです。
setTimeout(): タイマーをセットする。
showModal() [method]: ブラウザでモーダルダイアログを表示するためのメソッドです。
slice(): 配列や文字列の一部を切り出して新しい値を返し、end非包含・負のインデックス・非破壊（shallow copy）を押さえて安全に範囲操作するためのメソッド。
splice(): 配列の指定した位置に要素を追加したり、削除したり、置き換えたりできる便利なメソッドです。
startViewTransition() [method]: コンテンツの切り替えを滑らかにするためのメソッドです。
step: 入力できる値の間隔を決めるための属性です。
stepMismatch: 入力値が step 属性の間隔ルールに合っていないときにエラー判定を行う仕組みです。
stopImmediatePropagation: 同じオブジェクトの同じイベントに複数のリスナーが設定されている場合、このメソッドを実行すると、その時点で他のリスナーを実行しません。
stopPropagation: イベントの過程におけるこれ以上の伝搬を抑止します。
string: 文字列を参照／設定する。
style: HTML要素のスタイルを動的に変更することができます。
submit [event]: HTMLフォームが送信される時に発生するイベントです。
super
switch〜case: 3つ以上の分岐が可能。

target: イベントを発生させたオブジェクトへの参照です。
test() [method]: 指定された文字列が正規表現にマッチするかを判定し、マッチする場合は true 、しない場合は false を返すメソッドです。
textContent: テキストの取得や書き込み。
.then(): 何かが終わったあとに「次にこれをしてね」と順番どおりに処理をつなげるための書き方。
this: 実行時に決定される特殊なキーワードです。
throw [statement]: プログラムで意図的にエラーを発生させ、そのエラーを捕捉して適切に処理するために使用されます。
toggle: 同じボタンを押すだけで、表示・色・開閉などの状態をオン／オフで切り替える考え方と手順を、classList.toggle や toggleAttribute を使った短いサンプルで実感できる。
toggleAttribute() [method]: HTML要素の属性を「ある」「ない」で切り替えて、ボタン操作のたびにON/OFFできるメソッドです。
toLocaleDateString [method]: 日付を特定の地域の形式に合わせてフォーマットするために使用されます。
toLocaleString() [method]: 数値や日付を、その国の読みやすい形式に変換します。
toLocaleTimeString(): 日時を特定の地域や言語に合わせた形式で表示するための機能です。
toString(): 数値や配列などの値を「その中身を文字として扱いたい」ときに使うメソッドで、コンピューターに「これを文字にしてね」と頼むようなもの。
try ... catch [statement]: エラーが発生する可能性のあるコードを安全に実行し、エラーが発生した場合にそのエラーを処理するための仕組みです。
TypeError: 値の種類（型）に合わない使い方をしたときに出るエラーで、「その操作はできません」という警告のようなもの。
typeof: 対象の値のデータ型を表す文字列を返す演算子です。typeof 演算子を使用することでデータ型を調べることができます。

undefined: 変数がまだ値を持っていないか、存在しないプロパティにアクセスした際に得られる特別な状態を指します。

valid [property]: フォーム入力がHTMLのルールに従って正しいかどうかを、JavaScriptで簡単に判定できる仕組みです。
validationMessage [property]: フォームの入力が正しくないとき、ブラウザが用意したエラーメッセージを取得できます。
validity: フォーム入力がHTMLのルールに従って正しいかどうかを、JavaScriptで簡単に判定できる仕組みです。
value: ボタンに表示する文字列や、入力フィールドに入力されている文字列など、各エレメントの値を参照、設定します。
var: 文字列や数値などのデータに名前を付けたり繰り返し利用するために、データを保持するための変数を宣言します。
void: 「結果を返さずにただ処理だけ実行する」ときに使う特別な書き方で、リンク先を変えずに動作させたいときなどに使われる。

while: 条件をチェックして繰り返す。
width [property]: DOM要素の幅(width)を扱う際は、offsetWidthや clientWidthなどがパディング・ボーダーを含むか否かで異なり、さらに box-sizingや style.widthの設定によって実際の表示幅が変わるため、それぞれの特性を理解して目的に応じた方法を使い分けることが重要です。
window: ウィンドウを使用する。
window.onload: windowの loadイベントに対応するイベントハンドラです。
write: ドキュメントにデータを書き出す。
writeln: ドキュメントに文字列を書き出して改行する。

XMLHttpRequest [object]: Webページがサーバーと非同期通信を行い、ページの再読み込みなしにデータを交換できるようにするオブジェクトです。

jQuery

jQueryとは、ウェブブラウザ用の JavaScriptコードをより容易に記述できるようにするために設計された JavaScriptライブラリです。

jQueryの入手方法
ready

jQuery UI

jQuery UIとは、jQueryの便利な機能をまとめたライブラリの一種で、名前の通り、UI（User Interface : ユーザーインターフェース）に関係した機能を提供します。

jQuery CDN

CDN（Contents Delivery Network）とは、外部のファイルをリンク１つで使用することができる仕組みのことです。

Node.js

Node.jsは、JavaScriptをウェブブラウザ以外で使えるようにするプラットフォームで、効率的なアプリケーション開発を可能にします。

Node.js の ESM とは？: Node.jsでブラウザと同じように import と export が使え、ファイルを分けて読み書きしながら分かりやすく作れる仕組みのことです。

Home: サイトのトップページ
HTML (HyperText Markup Language): ウェブページの基本的な構造を作成します。見出し、段落、リンク、画像などの要素を定義します。
CSS (Cascading Style Sheets): ウェブページのデザインやレイアウトを設定します。色、フォント、レイアウトなどのスタイルを指定します。
JavaScript: ウェブページにインタラクティブな動作を追加します。フォームの検証、アニメーション、リアルタイムのデータ処理などを行います。
DOM: ブラウザがHTMLから作る「画面の裏側のツリー」を理解して、要素の取得・更新・イベント処理を迷わず組み立てられるようにする。
PHP (Hypertext Preprocessor): サーバー上で動作してデータベースと連携し、動的なWebページを簡単に作成できるスクリプト言語です。
Simple Check List: Click item to move to bottom.