JavaScript

JavaScript とは
「オブジェクト指向スクリプト言語」である。
ブラウザ環境
JavaScriptが利用されている最も一般的な環境がブラウザ環境です。
Node.js 環境
JavaScriptは、近年、Node.jsというソフトウェアでも使用できるようになりました。
前提知識のHTML
ブラウザ画面上に表示する文章や画像などのコンテンツの構成を記述するための言語です。
JavaScriptの実行方法
HTMLから JavaScriptを読み込む方法は、2つです。
Console API
JavaScript でプログラミングをしていく際に、画面には表示させたくないけど、プログラムの中で、どういった情報を取り扱っているのか確認したいケースが出てきます。こういった場合に Console (コンソール)に表示させるというのは有効な手段のようです。
デバッグの仕方
プログラムが意図した通りに動かない場合に、デバッグという作業を行います。
コード記述のルール
JavaScriptの記述ルールについて見ていきます。
コメント
JavaScriptのコメントの書き方には、2通りの記述方法があります。
変数と定数
変数とは、プログラムで使われる値を、名前付きで管理するラベルのようなものです。
識別子と予約語
変数名は、識別子と呼ぶこともあります。
データ型
プログラムで扱うデータにはいくつかの種類があり、そのデータの種類のことをデータ型、または型と呼びます。
リテラル
JavaScriptでプログラムに直接記述するデータ値のことをリテラルと呼びます。
テキスト
文字列は、16ビット値が順序付けて並べられた不変のデータです。
BigInt
任意の精度で整数値を扱える型です。
オブジェクト、メソッド、プロパティとは
ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ
文字コード
コメント
セミコロンの使い方
型、値、変数
論理値
グローバルオブジェクト
プログラムのどこからでもアクセスできる共通の機能や値を提供する、プログラミング言語の基盤です。
ラッパーオブジェクト
不変な基本型値と可変なオブジェクト参照
型の変換
変数のスコープ
単項式
オブジェクトと配列の初期化子
プロパティアクセス式
呼び出し式
オブジェクト生成式
演算子の概要
Arithmentic operator 「算術演算子」
関係演算子
条件式の挙動チェック
論理演算子
代入演算子
評価式
その他の演算子
クライアントサイド JavaScript
式文
複合文と空文
条件文
ループ文
for
複雑な繰り返し制御を行う。
アロー関数
=> (矢)を使って関数リテラルを記述します。
グローバルスコープ [global scope]
プログラム全体からアクセス可能な変数や関数を定義する範囲です。
数値 [Number]
Number型は、-(253 - 1) から 253 - 1 までの数値は正確に表現できます。
プリミティブ [primitive]
数値、文字列、ブーリアン、undefined、null、シンボルのような基本的なデータ型で、オブジェクトやメソッドではない単純な値を表します。

addEventListener
イベントリスナー(さまざまなイベントに合わせて処理を実行させる関数)を登録するためのメソッドです。
alert
警告ダイアログを表示したい。
appendChild
特定の親ノードの子ノードの最後にノードを追加する。
arc [function]
指定された中心点、半径、開始角度、終了角度、描画方向を使って、円や円弧を描画するための方法です。
arguments
Array
配列を作成します。
beginPath [method]
新しい描画を開始するために、以前の描画パスから独立させる命令です。
Boolean
Boolean(真偽値)は、trueまたは falseという値を取ります。
break [statement]
ループや switch文を条件が満たされた時点で即座に終了させるための制御文です。
cancelable
イベントがキャンセル可能かどうか、イベントが発生しないように抑止することができるかを示します。
change
フォーム部品でユーザーによる要素の値の変更が確定したときに発生するイベントです。
characterSet
文字コードを取得する。
charCodeAt
文字コードを取得する。
childNodes [property]
特定の要素の子要素を含む NodeList(ノードリスト)を返す。
classList
要素のクラス属性のリストを取得して返します。
className
HTML要素のクラス属性を設定または取得する。
clearInterval
setInterval() でセットしたタイマーを解除する。
clearTimeout
setTimeout() でセットしたタイマーを解除する。
click
マウスのボタンが押されたあとで離された時に発生するイベントです。
close() [method]
ウィンドウやポップアップウィンドウを閉じるために使用する。
codePointAt
Unicode コードポイント値である負ではない整数を返します。
const
文字列や数値などのデータに名前を付けたり繰り返し利用するために、データを保持するための変数を宣言します。
continue [statement]
ループの中で特定の条件に当てはまった時に、その繰り返しの残りの処理をスキップして次の繰り返しに進むために使う命令です。
createElement()
要素を作成するメソッドです。
dataset
HTMLの data属性(カスタムデータ属性)を操作するプロパティです。
Date
日付・時間を取得/設定する。
decodeURI [function]
ウェブアドレスやその他のURIから特殊文字のエンコーディングを解除し、もとの読みやすい文字列に戻す関数です。
decodeURIComponent [function]
ウェブアドレスに含まれる特殊文字を元の文字(例えば日本語や空白など)に戻す関数です。
default
モジュールから単一の値をエクスポートする際や、switch文内でどのケースにも当てはまらない場合の処理を指定するために使用されます。
dispatchEvent
特定の EventTargetに Eventをディスパッチし、影響する EventListenerを適切な順序で呼び出します。
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...of [loop]
ループの一種で、配列や文字列などの反復可能オブジェクトに対して、要素の値を繰り返し処理するために使用されます。
forEach() [method]
配列の各要素に対して、指定された関数を一度ずつ実行するために使用されます。
forms
文書内に含まれるすべての <form> を列挙した HTMLCollectionを返します。
frames
ウィンドウ自体を、現在のウィンドウの直接のサブフレームを列挙した配列風オブジェクトとして返します。
fromCharCode
Unicodeコードポイントを表す数値を引数に取り、それに対応する文字列を返す。
fromCodePoint
指定されたコードポイントのシーケンスを使って生成された文字列を返します。
function 「関数」
処理を目的ごとに分割したり、似たような処理を何度も書かなくて済むように複数の処理をひとまとまりにしたものです。
getAttribute [method]
指定した属性の値をHTML要素から取得する。
getContext [method]
キャンバス上で絵を描くために使う道具や技法(「2d」や「webgl」など)を選ぶ方法です。
getElementsByClassName
特定の class名(class属性値)から要素を取得する際に使用します。
getElementById
オブジェクトの情報を id で取得する。
height [property]
ウェブページ上の要素の高さを設定または取得するために使用されます。
History
ブラウザーのセッション履歴、つまり現在のページが読み込まれたタブまたはフレームで訪問したページを操作することができます。
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
マウスのボタンが押された状態から離された時に発生するイベントです。
NaN (Not a Number)
数値として無効または未定義の計算結果を表す特別な値。
new
新規オブジェクトを生成する。
nodeType
要素の種類を示す整数値で、例えば、テキストノードや属性ノード、要素ノードなどがあります。
null
明示的に何もない状態を表す特別な値。
Number() [function]
与えられた値を数値に変換するために使用されます。
Object [constructor]
新しいオブジェクトを作成し、プロパティやメソッドを追加するための方法です。
Object.prototype.toString() メソッド
JavaScriptの標準オブジェクトで、引数として渡された値の型を文字列で表現するメソッドです。
onAbort
画像やフレームなどのリソースの読み込みが中断された場合に発生するイベントハンドラーです。
onBlur
フォーカスがはずれたら処理を実行する。
onChange
フォームの状態が変化したら処理を実行する。
onClick
オブジェクトがクリックされたら処理を実行する。
onDblClick
オブジェクトがダブルクリックされたら処理を実行する。
onError
画像のリンクが切れていたり、サーバの都合などによってエラーが発生した場合にイベントを取得する。
onFocus
フォーカスされたら処理を実行する。
onKeyDown
キーボードのキーが押された時に実行されるイベントハンドラです。
onKeyPress
キーが押されている間処理を実行する。
onKeyUp
キーが押されて離されたら処理を実行する。
onLoad
Webページ読み込み完了時に処理を実行する。
onMouseDown
マウスボタンが押されたら処理を実行する。
onMouseMove
マウスポインタがオブジェクト上を移動したら処理を実行する。
onMouseOut
マウスポインタがオブジェクトから離れたら処理を実行する。
onMouseOver
マウスポインタがオブジェクトに重なったら処理を実行する。
onMouseUp
マウスボタンが離されたら処理を実行する。
onUnload
他のページに移動したら処理を実行する。
open
新しいウィンドウを開く。
parse [パース]
文字列形式のデータを JavaScriptが操作しやすいオブジェクト形式に変換する処理のことです。
parseFloat [function]
文字列を数値に変換するために使われ、文字列が数値で始まる場合はその数値を、そうでない場合は NaN(数値ではない)を返します。
parseInt [function]
文字列を数値に変換する関数です。
preventDefault
既定のアクションを通常どおりに行うべきではないことを伝えます。
Promise [constructor]
非同期処理の成功または失敗の結果を表現し、将来の処理結果を管理するためのオブジェクトです。
push() [method]
引数として渡された要素を配列の末尾に追加する。
querySelector
指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の Elementを返します。
querySelectorAll
指定したセレクタに一致するすべての HTML要素(NodeList)を取得する。
readyState [property]
ドキュメントの読み込みと解析の状態を示すプロパティです。
remove
要素を削除する。
removeAttribute
要素に設定されている属性を削除する。
replace() [string]
文字列内の指定文字列を置換えします。
reset() [method]
HTMLフォームの入力値を消去し、初期状態に戻すためのメソッドです。
return
関数から値を返し、その関数の実行を終了します。
Set
重複する値を一切含まず、各要素がユニークなデータの集まりを管理するための機能です。
selection
ユーザーが選択した範囲を表します。
setAttribute
指定したHTML要素に属性を追加する、または既存の属性を変更する。
setInterval
インターバルタイマーをセットする。
setProperty
要素のスタイルを変更するために使用されるメソッドです。
setTimeout
タイマーをセットする。
showModal() [method]
ブラウザでモーダルダイアログを表示するためのメソッドです。
stopImmediatePropagation
同じオブジェクトの同じイベントに複数のリスナーが設定されている場合、このメソッドを実行すると、その時点で他のリスナーを実行しません。
stopPropagation
イベントの過程におけるこれ以上の伝搬を抑止します。
String
文字列を参照/設定する。
style
HTML要素のスタイルを動的に変更することができます。
submit [event]
HTMLフォームが送信される時に発生するイベントです。
super
switch〜case
3つ以上の分岐が可能。
target
イベントを発生させたオブジェクトへの参照です。
textContent
テキストの取得や書き込み。
this
実行時に決定される特殊なキーワードです。
throw [statement]
プログラムで意図的にエラーを発生させ、そのエラーを捕捉して適切に処理するために使用されます。
toLocaleDateString [method]
日付を特定の地域の形式に合わせてフォーマットするために使用されます。
toLocaleTimeString [method]
日時を特定の地域や言語に合わせた形式で表示するための機能です。
toString
指定された Numberオブジェクトを表す文字列を返します。
try ... catch [statement]
プログラム実行中にエラーが発生した場合にそれを捕捉し、エラーによってプログラムが停止することなく処理を続けるための構文。
typeof
対象の値のデータ型を表す文字列を返す演算子です。typeof 演算子を使用することでデータ型を調べることができます。
undefined
変数がまだ値を持っていないか、存在しないプロパティにアクセスした際に得られる特別な状態を指します。
value
ボタンに表示する文字列や、入力フィールドに入力されている文字列など、各エレメントの値を参照、設定します。
var
文字列や数値などのデータに名前を付けたり繰り返し利用するために、データを保持するための変数を宣言します。
while
条件をチェックして繰り返す。
width [property]
ウェブページ上の要素の横幅を指定または取得するために使用されるプロパティです。
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をウェブブラウザ以外で使えるようにするプラットフォームで、効率的なアプリケーション開発を可能にします。