Web Programming

JavaScript

Index

JavaScriptの概要

JavaScript とは
「オブジェクト指向スクリプト言語」である。
ブラウザ環境
JavaScriptが利用されている最も一般的な環境がブラウザ環境です。

はじめに

JavaScriptの実行方法
HTMLから JavaScriptを読み込む方法は、2つです。
デバッグの仕方
プログラムが意図した通りに動かない場合に、デバッグという作業を行います。
コード記述のルール
JavaScriptの記述ルールとは、let・constを使いセミコロンを省略せず、インデントや命名規則を統一し、厳密等価演算子を用いるなど可読性・保守性を重視したスタイルを徹底し、ESLintやPrettierなどのツールで自動的にフォーマットやエラー検知を行うことで安全・効率的なコードを維持することです。
コメント
JavaScriptのコメントの書き方には、2通りの記述方法があります。
セミコロンの使い方

変数・定数とデータ型

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

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

オブジェクト、メソッド、プロパティとは
不変な基本型値と可変なオブジェクト参照
ラッパーオブジェクト
グローバルオブジェクト
プログラムのどこからでもアクセスできる共通の機能や値を提供する、プログラミング言語の基盤です。
型の変換
変数のスコープ
グローバルスコープ(Global Scope)
特定の関数やブロックの外部に定義された変数や関数が、プログラム全体のどの箇所からでも参照・変更できる最も広いアクセス範囲のことです。
ローカルスコープ(Local Scope)
関数やブロック(コードの塊)内部に限定されるスコープ。

演算子

演算子の概要
Arithmentic operator 「算術演算子」
関係演算子
論理演算子
代入演算子
その他の演算子
評価式

文・制御構文

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

関数

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

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

Number / String / Boolean / Object
数値 [Number]
Number型は、-(253 - 1) から 253 - 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操作(クライアントサイド)

Documentオブジェクト / Windowオブジェクト
document
ドキュメントを参照する。
window
ウィンドウを使用する。
要素の取得・操作
ページ読み込みタイミング
文字コード

イベント処理

イベントモデル
(event.html や eventtarget.html など)
イベントリスナーの登録
addEventListener(), removeEventListener()
主要なイベントの種類
イベント伝搬制御
preventDefault(), stopPropagation(), stopImmediatePropagation()

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

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
イベントリスナー(さまざまなイベントに合わせて処理を実行させる関数)を登録するためのメソッドです。
alert
警告ダイアログを表示したい。
appendChild
特定の親ノードの子ノードの最後にノードを追加する。
apply [method]
関数を特定の this値と、引数を配列で指定して実行できるようにするものです。
arc [function]
指定された中心点、半径、開始角度、終了角度、描画方向を使って、円や円弧を描画するための方法です。
arguments
Array
配列を作成します。

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

cancelable
イベントがキャンセル可能かどうか、イベントが発生しないように抑止することができるかを示します。
change
フォーム部品でユーザーによる要素の値の変更が確定したときに発生するイベントです。
characterSet
文字コードを取得する。
charCodeAt
文字コードを取得する。
childNodes [property]
特定の要素の子要素を含む NodeList(ノードリスト)を返す。
classList
要素のクラス属性のリストを取得して返します。
classList.add() [method]
指定した要素にクラス名を重複なく追加することで、CSSやDOM操作による見た目や動作の変更を手軽に実現するためのメソッドです。
className
HTML要素のクラス属性を設定または取得する。
clearInterval
setInterval() でセットしたタイマーを解除する。
clearTimeout
setTimeout() でセットしたタイマーを解除する。
click
マウスのボタンが押されたあとで離された時に発生するイベントです。
cloneNode [method]
指定した DOM要素を、その子要素も含めて複製できるメソッドです。
close() [method]
ウィンドウやポップアップウィンドウを閉じるために使用する。
codePointAt
Unicode コードポイント値である負ではない整数を返します。
const
文字列や数値などのデータに名前を付けたり繰り返し利用するために、データを保持するための変数を宣言します。
content
HTML要素のメタ情報やテキスト内容を示すプロパティや属性を指し、ページや要素の中身を指定・操作するために使われます。
continue [statement]
ループの中で特定の条件に当てはまった時に、その繰り返しの残りの処理をスキップして次の繰り返しに進むために使う命令です。
createElement() [method]
新しいHTML要素をプログラムで作成するための機能です。

dataset
HTMLの data属性(カスタムデータ属性)を操作するプロパティです。
Date [object]
日付や時刻の取得・設定・操作を行うための組み込みオブジェクトです。
decodeURI [function]
ウェブアドレスやその他のURIから特殊文字のエンコーディングを解除し、もとの読みやすい文字列に戻す関数です。
decodeURIComponent [function]
ウェブアドレスに含まれる特殊文字を元の文字(例えば日本語や空白など)に戻す関数です。
default
モジュールから単一の値をエクスポートする際や、switch文内でどのケースにも当てはまらない場合の処理を指定するために使用されます。
dispatchEvent
特定の EventTargetに Eventをディスパッチし、影響する EventListenerを適切な順序で呼び出します。
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 [statement]
定義された関数、変数、クラスなどを他のファイルからアクセス可能にするために使用されます。

fill [method]
配列の全要素または指定された範囲の要素を特定の値で上書きする機能を提供します。
fillRect [method]
キャンバス上に指定した位置と大きさで四角形を描き、それを現在の塗りつぶし色で塗りつぶす機能を提供します。
fillStyle [property]
キャンバス上で描画する図形や文字の色や模様を設定するプロパティです。
for [loop]
指定した条件が満たされる間、コードブロックを繰り返し実行するための制御構造です。
for...in [loop]
オブジェクトの列挙可能なすべてのプロパティを一つずつ取り出して処理するための構文です。
for...of [loop]
ループの一種で、配列や文字列などの反復可能オブジェクトに対して、要素の値を繰り返し処理するために使用されます。
forEach() [method]
配列の各要素に対して、指定された関数を一度ずつ実行するために使用されます。
forms
文書内に含まれるすべての <form> を列挙した HTMLCollectionを返します。
frames
ウィンドウ自体を、現在のウィンドウの直接のサブフレームを列挙した配列風オブジェクトとして返します。
fromCharCode
Unicodeコードポイントを表す数値を引数に取り、それに対応する文字列を返す。
fromCodePoint
指定されたコードポイントのシーケンスを使って生成された文字列を返します。
function 「関数」
特定の処理をひとまとまりにして呼び出しやすくし、再利用可能にするためのコードの部品です。

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

hasOwnProperty [method]
オブジェクト自身が特定のプロパティを持っているかどうかを確認するためのものです(継承されたプロパティは含まれません)。
height [property]
ウェブページ上の要素の高さを設定または取得するために使用されます。
History [object]
JavaScriptからブラウザーの「戻る」「進む」などの履歴操作を行い、URLやセッション履歴の状態を動的に変更・管理できる仕組みを提供するAPIです。
href
URL を参照/設定する
HTMLDataListElement
HTMLElement
任意の HTML 要素を表します。
HTMLTableColElement

id
idの取得・設定・削除。
if ... else
条件分岐処理をする。
Image
新しく HTMLImageElementインスタンスを作成します。
import [statement]
他のモジュールから機能やデータを読み込むために使用されます。
importNode
外部ドキュメントから、現在のドキュメント内へ挿入可能なノードのコピーを作成します。
in
in演算子は、主に2つの使い方があり、オブジェクトにプロパティが存在するか判定する。または、オブジェクトのプロパティを繰り返し処理する。
Infinity
計算可能な数値の範囲を超える非常に大きな数値、または無限大を表す特別な値です。
innerHeight
ブラウザの表示領域の高さをピクセル単位で教えてくれるプロパティです。
innerHTML
HTML要素の中身を変更する際に使用する Elementオブジェクトのプロパティです。
innerText [property]
HTML要素内のユーザーに表示されているテキストのみを取得または変更するために使用されます。
innerWidth
ブラウザーのウィンドウ内の表示領域の幅をピクセル単位で教えてくれるプロパティです。
instanceof 演算子
オブジェクトが特定のクラスまたはコンストラクタ関数から作成されたかどうかを確認する。
isFinite [function]
与えられた値が実際の有限数であるかどうかを判断するためのツールです。
isNaN [function]
与えられた値が数値ではないかどうかを判断するためのものです。
item() [method]
特定のコレクション内の項目にアクセスするために使用されます。

join [method]
配列の各要素を指定した区切り文字で結合して一つの文字列を生成します。
JSON (JavaScript Object Notation)
データを表現するための軽量なテキストベースの形式で、名前と値のペアの集合(オブジェクト)や値の順序付けられたリスト(配列)を使用してデータを構造化します。

keydown
キーが押されたときに発生するイベントです。
keypress
通常は文字を生成するキーが押されたときに発生するイベントでしたが、このイベントはデバイス依存度が高く、使用すべきではないようです。keydownイベント、keyupイベントを使うようにしましょう。
keyup
キーが離されたときに発生するイベントです。

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

Map
様々な型のキーと値のペアを順序付けして保持し、効率的に操作できるデータ構造です。
map() [method]
配列の各要素に対して指定された関数を適用し、その結果を新しい配列として生成するためのメソッドです。
Math
数学的な定数と関数を提供するオブジェクトです。
Math.PI
円周率。約 3.14159 です。
Math.random()
0 以上 1 未満の疑似乱数を返す。
message [property]
エラーオブジェクトに対して発生したエラーの説明をテキスト形式で提供します。
mousedown
マウスのボタンが押された時に発生するイベントです。
mousemove
マウスが動いた時に発生するイベントです。
mouseup [event]
ユーザーが押していたマウスボタンを離した瞬間に発生するイベントです。

NaN (Not a Number)
数値として無効または未定義の計算結果を表す特別な値。
new
新規オブジェクトを生成する。
nodeType
要素の種類を示す整数値で、例えば、テキストノードや属性ノード、要素ノードなどがあります。
null
明示的に何もない状態を表す特別な値。
Number() [function]
与えられた値を数値に変換するために使用されます。

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

parse [パース]
文字列形式のデータを JavaScriptが操作しやすいオブジェクト形式に変換する処理のことです。
parseFloat [function]
文字列を数値に変換するために使われ、文字列が数値で始まる場合はその数値を、そうでない場合は NaN(数値ではない)を返します。
parseInt [function]
文字列を数値に変換する関数です。
preventDefault
既定のアクションを通常どおりに行うべきではないことを伝えます。
Promise [constructor]
非同期処理の成功または失敗の結果を表現し、将来の処理結果を管理するためのオブジェクトです。
prompt() [function]
ユーザーから入力を受け取るためのシンプルなポップアップダイアログを表示する機能です。
push() [method]
引数として渡された要素を配列の末尾に追加する。

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

readyState [property]
ドキュメントの読み込みと解析の状態を示すプロパティです。
remove
要素を削除する。
removeAttribute
要素に設定されている属性を削除する。
replace() [method]
文字列の中で指定したパターン(文字列や正規表現)に一致する部分を新しい文字列に置き換えるためのメソッドです。
requestAnimationFrame [method]
スムーズで効率的なアニメーションを実現するために、ブラウザの最適なタイミングで関数を実行するよう依頼するメソッドです。
reset() [method]
HTMLフォームの入力値を消去し、初期状態に戻すためのメソッドです。
return
関数から値を返し、その関数の実行を終了します。

Set
重複する値を一切含まず、各要素がユニークなデータの集まりを管理するための機能です。
selection
ユーザーが選択した範囲を表します。
setAttribute
指定したHTML要素に属性を追加する、または既存の属性を変更する。
setInterval [function]
指定した時間間隔ごとに同じ処理を繰り返し実行するための関数です。
setProperty
要素のスタイルを変更するために使用されるメソッドです。
setTimeout
タイマーをセットする。
showModal() [method]
ブラウザでモーダルダイアログを表示するためのメソッドです。
splice() [method]
配列の指定した位置に要素を追加したり、削除したり、置き換えたりできる便利なメソッドです。
stopImmediatePropagation
同じオブジェクトの同じイベントに複数のリスナーが設定されている場合、このメソッドを実行すると、その時点で他のリスナーを実行しません。
stopPropagation
イベントの過程におけるこれ以上の伝搬を抑止します。
String
文字列を参照/設定する。
style
HTML要素のスタイルを動的に変更することができます。
submit [event]
HTMLフォームが送信される時に発生するイベントです。
super
switch〜case
3つ以上の分岐が可能。

target
イベントを発生させたオブジェクトへの参照です。
test() [method]
指定された文字列が正規表現にマッチするかを判定し、マッチする場合は true 、しない場合は false を返すメソッドです。
textContent
テキストの取得や書き込み。
this
実行時に決定される特殊なキーワードです。
throw [statement]
プログラムで意図的にエラーを発生させ、そのエラーを捕捉して適切に処理するために使用されます。
toLocaleDateString [method]
日付を特定の地域の形式に合わせてフォーマットするために使用されます。
toLocaleTimeString [method]
日時を特定の地域や言語に合わせた形式で表示するための機能です。
toString
指定された Numberオブジェクトを表す文字列を返します。
try ... catch [statement]
エラーが発生する可能性のあるコードを安全に実行し、エラーが発生した場合にそのエラーを処理するための仕組みです。
typeof
対象の値のデータ型を表す文字列を返す演算子です。typeof 演算子を使用することでデータ型を調べることができます。

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

value
ボタンに表示する文字列や、入力フィールドに入力されている文字列など、各エレメントの値を参照、設定します。
var
文字列や数値などのデータに名前を付けたり繰り返し利用するために、データを保持するための変数を宣言します。

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)とは、外部のファイルをリンク1つで使用することができる仕組みのことです。

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