こんにちは！
今日も頑張ろう

Lesson-13
JavaScript を記述しましょう

L12.2 JavaScript 基本仕様

L12.2.1 文とコメント

(1) 文

文の最後にはセミコロン（;）を付けます。
1行の中に複数の分を記述することができます。
最後の文のセミコロン（;）は省略することができますがセミコロンを付ける癖をつけましょう。
JavaScript には、strict mode という実行モードがあり厳格な記述を行っていない文の実行を禁止することができます。strict mode に設定するには、「use strict;」という文字列をファイルまたは関数の先頭に書くことで対象の文が strict mode で実行されます。

文の例


const a = 100 + 200;
const b = a + 300; const c = b - 100; const d = c * 2;

(2) コメント

JavaScript のコメントには、一行コメントと複数行コメントの2種類があります。

一行コメント: // を記述すると行末までをコメントとして扱われます。
複数行コメント: /* と */ で囲まれた範囲は、コメントとして扱われます。

コメントの例


// 一行コメントとして扱われます。
// この行は実行されません。
/*
	複数コメントとして扱われます。
	この行は実行されません。
*/

L12.2.2 変数と宣言

JavaScript での変数宣言は、const、var、let の3種類があります。

変数名に記述ルールは、以下の通りです。

半角のアルファベット、アンダースコア（_）、ダラー（$）、数字を組み合わせた名前が使用できます。
数字から始めることはできません。
大文字と小文字が区別されます。name と NAME は、別の変数として扱われます。
あらかじめ定義されている予約語を変数名に使用できることはできません。予約語については、後述の予約語一覧を参照してください。
JavaScript の仕様では、全角文字（漢字など）も使用可能ですが環境に依存する部分も発生しますので全角文字の使用はお勧めしません。

(1) const

値の再代入ができない変数の宣言と変数の値（初期値）を定義します。const で定義した変数には、後から値を代入することができません。カンマ（,）で区切ることにより複数の変数を宣言できます。


const 変数名 = 初期値;
const 変数名 = 初期値, 変数名 = 初期値;

(2) let

値の再代入ができる変数を宣言します。変数の値（初期値）を定義することもできます。変数の値（初期値）が指定されていない場合は、undefined（未定義を示す値）で初期化されます。カンマ（,）で区切ることにより複数の変数を宣言できます。


let 変数名;
let 変数名 = 初期値;
let 変数名, 変数名 = 初期値;

(3) var

値の再代入ができる変数を宣言します。var は、let と、ほぼ同様の変数宣言ですが、var には、同じ名前の変数を再定義できてしまうという問題がありますので、新しく記述するコードには、let を使用することをお勧めします。


var 変数名;
var 変数名 = 初期値;
var 変数名, 変数名 = 初期値;

(4) 変数宣言の例

変数宣言の例


const name = "山田 太郎";
const name1 = "太郎", name2 = "二郎", name3 = "三郎";
let address;
let address1 = "東京", address2 = "埼玉";
var tel;
var tel1 = "03-1111-1111", tel2 = "090-1111-1111";

L12.2.3 データ型（プリミティブ型）

数値、文字列、真偽値などのような基本的な値をプリミティブ型（基本型）と呼びます。

型	typeof 演算子の返却値	ラッパーオブジェクト	記述例
数値	number	Number	123 3.14159
長整数	bigint	Bigint	9007199254740992n
文字列	string	String	"JavaScript" 'Web Site'
真偽値	boolean	Boolean	true false
undefined	undefined	－	undefined
null	object	－	null
シンボル	symbol	Symbol	Symbol("シンボル")

(1) 数値

数値は、64 ビットの浮動小数点数として扱われます。64ビットのうち、52ビットを数値、11ビットを小数点位置、1ビットを符号で使用します。
数値は、2 の 53 乗-1 (= 9007199254740991)までの数値を扱うことができます。

数値リテラルの記述方法は、以下の通りです。

型式	記述方法	記述例
10 進数	そのまま記述	1000
16 進数	先頭に 0x を付与して記述	0x3e8
8 進数	先頭に 0o を付与して記述	0o1750
2 進数	先頭に 0b を付与して記述	0b1111101000

(2) 長整数

長整数は任意の精度の整数を扱えます。
長整数のリテラルは、後ろに n を付けます。（例：1234567890n）

(3) 文字列

文字列は、英字、数字、記号、日本語などの文字列を扱えます。
文字列リテラルの記述方法は、以下の通りです。
- ダブルクォート（"）で囲みます。（例："JavaScript"）
- シングルクォート（'）で囲みます。（例：'Web Site'）
- バッククォート（`）で囲みます。（例：`HTML/CSS`）
バッククォート（`）を使用した時は、テンプレートリテラルと呼ばれ、以下の記述ができます。
- 改行コードをそのまま入力できますので、改行記号のエスケープ（\n）を使用しなくても複数行を入力することができます。
- 文字列内に「$(変数名)」と記述すると、その変数の値を埋め込むことができます。（例：`埋め込み：$(str)`）
文字列は、配列リテラルとして設定されていますのでインデックスを使用して 1 文字単位のアクセスができます。
文字列は、文字コードとして UTF-16 のコード体系を採用しています。
文字列内に特殊な文字を記述する場合は、エスケープシーケンスとして記述する必要があります。エスケープシーケンスは、バックスラッシュと特定の文字を組み合わせて記述します。

代表的なエスケープシーケンスは、以下の通りです。

記述文字	記述型式
水平タブ	\t
ダブルクォート	\"
シングルクォート	\'
バックスラッシュ	\\
ラインフィード	\n
キャリッジリターン	\r
ダブルクォート	\"
シングルクォート	\'
バックスラッシュ	\\
Latin-1 文字（\x と 2 桁の 16 進数）	\xXX
Unicode 文字（\u と 4 桁の 16 進数）	\uXXXX
Unicode 文字（\u{} と {} 内に 16 進数）	\u{XXXX}

文字列のアクセス例は、以下の通りです。

文字列の結合【+】


// 文字列1（str1）と文字列2（str2）を結合し str に格納
const str1 = "HTML";						// 文字列1
const str2 = "CSS";							// 文字列2
const str = str1 + "/" + str2;				// str = "HTML/CSS"

文字列の文字数【length】


// 文字列（str）の文字数をカウントし num に格納
const str = "HTML/CSS";						// 文字列
const num = str.length;						// num = 8

文字列の検索（先頭から）【indexOf】


// 文字列（str1）の先頭から検索文字列（str2）を検索し最初に現れた位置（0 から始まる値）を num に格納
// 検索文字列がみつからない場合は、-1 が返却されます
const str1 = "HTML/CSS";					// 文字列
const str2 = "CSS";							// 検索文字列
const num = str1.indexOf(str2);				// num = 5

文字列の検索（末尾から）【lastIndexOf】


// 文字列（str1）の末尾から検索文字列（str2）を検索し最初に現れた位置（0 から始まる値）を num に格納
// 検索文字列がみつからない場合は、-1 が返却されます
const str1 = "HTML/CSS";					// 文字列
const str2 = "CSS";							// 検索文字列
const num = str1.lastIndexOf(str2);			// num = 5

文字列の置き換え（先頭）【replace】


// 文字列（str1）で最初に現れた検索文字列（str2）を置き換え文字列（str3）に置き換えて str に格納
const str1 = "HTML/HTML";					// 文字列
const str2 = "HTML";						// 検索文字列
const str3 = "CSS";							// 置き換え文字列
const str = str1.replace(str2, str3);		// str = "CSS/HTML"

文字列の置き換え（全て）【replaceAll】


// str1 の全ての str2 を str3 に置き換えて str に格納
const str1 = "HTML/HTML";					// 文字列
const str2 = "HTML";						// 検索文字列
const str3 = "CSS";							// 置き換え文字列
const str = str1.replaceAll(str2, str3);	// str = "CSS/CSS"

文字列の検査（先頭）【startsWith】


// 文字列（str1）の先頭が検査文字列（str2）かの真偽値（true/false）を bool に格納
const str1 = "HTML/CSS";					// 文字列
const str2 = "HTML";						// 検査文字列
const bool = str1.startsWith(str2);			// bool = true

文字列の検査（末尾）【endsWith】


// 文字列（str1）の末尾が検査文字列（str2）かの真偽値（true/false）を bool に格納
const str1 = "HTML/CSS";					// 文字列
const str2 = "HTML";						// 検査文字列
const bool = str1.endsWith(str2);			// bool = false

文字列の検査（包含）【includes】


// 文字列（str1）に検査文字列（str2）が含まれているかの真偽値（true/false）を bool に格納
const str1 = "HTML/CSS";					// 文字列
const str2 = "HTML";						// 検査文字列
const bool = str1.includes(str2);			// bool = true

一部文字列の抽出（末尾位置からの指定可）【slice】


// 文字列（str1）の開始位置（num1）から終了位置（num2）の範囲の文字列を obj に格納
// 開始位置（num1）は、0 から始まり、終了位置（num2）は、位置 + 1 を指定します
// 終了位置（num2）を省略すると末尾が終了位置になります
// 開始位置（num1）、終了位置（num2）にマイナス値を指定すると末尾から数えた位置になります
// 開始位置（num1）が終了位置（num2）より大きい場合は、空文字が返却されます
const str1 = "HTML/CSS";					// 文字列
const num1 = 5;								// 開始位置
const num2 = 8;								// 修了位置
const str = str1.slice(num1, num2);			// str = "CSS"

一部文字列の抽出（開始位置と終了位置の反転可）【sybstring】


// 文字列（str1）の開始位置（num1）から終了位置（num2）の範囲の文字列を obj に格納
// 開始位置（num1）は、0 から始まり、終了位置（num2）は、位置 + 1 を指定します
// 終了位置（num2）を省略すると末尾が終了位置になります
// 開始位置（num1）、終了位置（num2）にマイナス値を指定すると 0 として扱われます
// 開始位置（num1）が終了位置（num2）より大きい場合は、開始位置（num1）と終了位置（num2）をひっくり返して処理します
const str1 = "HTML/CSS";					// 文字列
const num1 = 0;								// 開始位置
const num2 = 4;								// 修了位置
const str = str1.substring(num1, num2);		// str = "HTML"

一部文字列の抽出（文字数指定）【substr】


// 文字列（str1）の開始位置（num1）から文字数（num2）の範囲の文字列を obj に格納
// 開始位置（num1）は、0 から始まります
// 文字数（num2）を省略すると末尾までが対象になります
const str1 = "HTML/CSS";					// 文字列
const num1 = 0;								// 開始位置
const num2 = 4;								// 文字数
const str = str1.substr(5, 3);				// obj = "CSS"

文字列の前後の余白削除【trim】


// 文字列（str1）から先頭および末尾の空白と行終端記号を削除して str に格納
// 空白は、水平タブ（\t）、垂直タブ（\v）、フォームフィード（\f）、スペース（\s）を示します
// 行終端記号は、バックスペース（\b）、ラインフィード（\n）、キャリッジリターン（\r）、ダブルクォート（\"）、シングルクォート（\'）、バックスラッシュ（\\）を示します
const str1 = "  HTML/CSS  ";				// 文字列
const str = obj1.trim();					// obj = "HTML/CSS"

文字コードの取り出し【charCodeAt】


// 文字列（str1）の文字位置（num1）の文字を取り出し文字コードに変換し num に格納
// 文字位置（num1）は、0 から始まります
const str1 = "HTML/CSS";					// 文字列
const num1 = 5;								// 文字位置
const num = str1.charCodeAt(num1);			// num = 67

数値の N 進数に変換【toString】


// 数値（num1）を変換値（num2）で N 進数変換を行い str に格納
// 変換値（num2）は、N 進数値の N を指定し、16 進数に変換する時は 16 を指定します
// 変換値（num2）を省略すると 10 進数になります
const num1 = 67;							// 数値
const num2 = 16;							// 変換値
const str = num1.toString(num2);			// obj = "43"

文字コード群の文字列に変換【String.fromCharCode】


// UTF-16 の文字コード（num1～）を文字列に変換し obj に格納
// 文字コードは、0 ～ 65535（0xffff）の範囲で指定します
// 指定する引数の数は自由です
const num1 = 72;							// 文字コード（"H"）
const num2 = 84;							// 文字コード（"T"）
const num3 = 77;							// 文字コード（"M"）
const num4 = 76;							// 文字コード（"L"）
const str = String.fromCharCode(num1, num2, num3, num4);	// str = "HTML"

文字列を区切り文字で分解【split】


// 文字列（str1）を区切り文字（str2）で分解し配列を obj に格納
// 区切り文字（obj2）に正規表現で「/\s+/」と指定すると 1 文字以上のスペースが区切り文字になります
const str1 = "HTML CSS JavaScript";			// 文字列
const str2 = " ";							// 区切り文字
const obj = str1.split(str2);				// obj = ["HTML", "CSS", "JavaScript"]

配列要素を結合文字で結合【join】


// 配列（obj）の配列要素を結合文字（str1）で結合し str に格納
const obj1 = ["HTML", "CSS", "JavaScript"];	// 配列
const str1 = ":";							// 結合文字
const str = obj1.join(str1);				// obj = "HTM:CSS:JavaScript"

数値の 3 桁単位カンマを挿入【toLocalString】


// 数値（num1）に 3 桁単位のカンマ（,）を挿入し str に格納
const num1 = 1234567;						// 数値
const str = num1.toLocaleString();			// str = "1,234,567"

(4) 真偽値

真偽値は、真または偽を示す値であり、主に条件式などの判定で使用します。
真偽値（true / false）は、以下の値で識別されます。
- false：false、0、-0、0n、"" (空文字)、null、undefined、NaN
- true：true、（上記以外）

(5) undefined

undefined は、変数の内容が未定義であることを示す値です。
変数を定義しても、その変数に一度の値が代入されていない時は、undefined が設定されています。
関数呼び出し時に引数の数が満たない場合は、満たない引数に undefined が設定されます。
undefined を判定するためには、undefined と比較するか、typeof 演算子を使用してください。どちらの場合も、比較する場合は、厳密等価演算子（===）を使用してください。

(6) null

null は、変数の内容が空であることを示す値です。
null は、プログラム作成者が意図的に値がない状態であることを示すために使用できます。

(7) シンボル

シンボル（Symbol）は、他のシンボルと値が重複しない値をあらわします。
シンボル（Symbol）値を生成する時は、Symbol 関数を使用します。

L12.2.4 データ型（オブジェクト）

プリミティブ型でないものをオブジェクト（複合型）と呼び、オブジェクトは複数のプリミティブ型の値やオブジェクトの集合からなります。代表的な基本オブジェクトは、以下の通りです。

(1) オブジェクトリテラル

オブジェクトリテラルは、キー名と値を紐付けて定義するオブジェクトです。オブジェクトリテラルの記述は、中カッコ（{ と }）を使用し次の型式で記述します。キー名には、文字列または、Symbol を指定し、値にはプリミティブ型の値やオブジェクトなどを指定することができます。

オブジェクトが持つキーのことをプロパティ名と呼びます。存在しないプロパティをアクセスした場合は、undefined が返却されます。

オブジェクトの項目指定には、ピリオド（.）を使用したドット指定とブラケット（[ ]）を使用したブラケット指定があります。キー名が変数に格納されている場合は、ドット指定はできませんのでブラケット指定でアクセスしてください。


const オブジェクト名 = {						// オブジェクトリテラルの定義
	キー名 : 値,
	キー名 : 値,
	キー名 : 値
};

const 変数名 = オブジェクト名.キー名;			// 値の参照（ドット指定）
const 変数名 = オブジェクト名["キー名"]; 		// 値の参照（ブラケット指定）

オブジェクト名.キー名 = 値; 					// 値の設定（ドット指定）
オブジェクト名["キー名"] = 値; 			 		// 値の設定（ブラケット指定）

オブジェクト名.キー名 = 値; 					// 項目の追加（ドット指定）
オブジェクト名.["キー名"] = 値; 				// 項目の追加（ブラケット指定）

delete オブジェクト名.キー名; 					// 項目を削除

const 変数名 = "キー名" in オブジェクト名;	// 項目の存在確認（true / falseが返却）

オブジェクトリテラルのアクセス例は、以下の通りです。

オブジェクトリテラルの定義と操作


const obj = {					// オブジェクトリテラルの定義
	"key1" : "value1",
	"key2" : "value2",
	"key3" : "value3"
};

// 値の参照
const obj1 = obj.key1;			// obj1 = "value1"（ドット指定）
const obj2 = obj["key2"]; 		// obj2 = "value2"（ブラケット指定）

// 値の参照／設定（ブラケット指定）
obj.key1 = "new value1";		// "value1" ⇒ "new value1"（ドット指定）
obj["key2"] = "new value2";		// "value2" ⇒ "new value2"（ブラケット指定）

// 項目の追加
obj.key4 = "value4";			// "key4" : "value4" を追加（ドット指定）
obj["key5"] = "value5";			// "key5" : "value5" を追加（ブラケット指定）

// 項目の削除
delete obj.key1;				// "key1" を削除（ドット指定）
delete obj["key2"];				// "key2" を削除（ブラケット指定）

// 項目の存在確認
const bool = "key3" in obj;		// bool = true（"key3" は存在）

(2) 配列リテラル

配列リテラルは、複数の値を持った配列オブジェクト（Array オブジェクト）です。配列リテラルの記述は、ブラケット（[ ]）を使用し次の型式で記述します。

配列オブジェクトには、0 から始まるインデックス（添字）に対応した値を保持しています。


const オブジェクト名 = [値, 値, 値];				// 配列リテラルの定義
const 変数名 = オブジェクト名[インデックス値];		// 値の参照
オブジェクト名[インデックス値] = 値;				// 値の設定

配列リテラルの主要なアクセス例は、以下の通りです。

存在しないインデックスをアクセスした場合は、undefined が返却されます。undefined は、要素数を超えたアクセスの場合以外に、配列の途中で値が設定されていない項目にアクセスした場合にも返却されます。
push、pop、unshift、shift、reverse、sort、splice は、破壊的メソッドです。

要素数を取得【length】


// 配列（obj1）の要素数を num に格納
const obj1 = [ "HTML", "CSS", "JavaScript" ];	// 配列
const num = obj1.length;				// num = 3

要素数を変更【length】


// 配列（obj1）の要素数を変更要素数（num1）に変更
const obj1 = [];						// 配列（空配列）
const num1 = 5;							// 変更要素数
obj.length = num;						// 要素数を設定

末尾に要素を追加【push】


// 配列（obj1）の末尾に要素（obj2）を追加し追加後の配列の要素数（length）を num に格納
let obj1 = [ "HTML", "CSS" ];			// 配列
const obj2 = "JavaScript";				// 要素
const num = obj1.push(obj2);			// obj1 = [ "HTML", "CSS", "JavaScript" ] ⇒ num = 3

末尾に要素を追加【length使用】


// 配列（obj1）の末尾に要素（obj2）を追加
const obj1 = [ "HTML", "CSS" ];			// 配列
const obj2 = "JavaScript";				// 要素
obj1[obj1.length] = obj2;				// obj1 = [ "HTML", "CSS", "JavaScript" ]

末尾の要素を削除【pop】


// 配列（obj1）の末尾から要素を削除し削除した末尾の値を obj に格納
const obj1 = [ "HTML", "CSS", "JavaScript" ]	// 配列
const obj = obj1.pop();					// obj1 = [ "HTML", "CSS" ] ⇒ obj = "JavaScript"

先頭に要素を追加【unshift】


// 配列（obj1）の先頭に要素（obj2）を追加し追加後の配列リテラルの要素数（length）を num に格納
const obj1 = [ "HTML", "CSS" ];			// 配列
const obj2 = "JavaScript";				// 要素
const num = obj1.unshift(obj2);			// obj1 = [ "JavaScript", "HTML", "CSS" ] ⇒ num = 3

先頭から要素を削除【shift】


// 配列（obj1）の先頭から要素を削除し削除した先頭の値を obj に格納
const obj1 = [ "HTML", "CSS", "JavaScript" ]	// 配列
const obj = obj1.shift();				// obj1 = [ "CSS", "JavaScript" ] ⇒ obj = "HTML"

並びを反転【reverse】


// 配列（obj1）を反転し結果を obj に格納
const obj1 = [ "HTML", "CSS", "JavaScript" ];	// 配列
const obj = obj1.reverse();				// obj = [ "JavaScript", "CSS", "HTML" ]

要素を昇順に並べ替え【sort / toSorted】


// 配列（obj1）を UTF-16 コードの昇順に並べ替え
// 並び変えた結果を obj に格納（obj1 と obj は同じ値）
// 数値は、文字列に変換された後に並べ替えを実施
// 元の配列（obj1）の要素を変更させない場合は、toSorted() を使用
const obj1 = [ "HTML", "CSS", "JavaScript" ]	// 配列
const obj = obj1.sort();				// obj1 = ['CSS', 'HTML', 'JavaScript'] ⇒ obj = ['CSS', 'HTML', 'JavaScript']

要素を降順で並べ替え【sort / toSorted】


// 配列（obj1）を UTF-16 コードの降順に並べ替え
// 並び変えた結果を obj に格納（obj1 と obj は同じ値）
// 元の配列（obj1）の要素を変更させない場合は、toSorted() を使用
// 並び替え順を指定する場合は、比較関数（fCompare）を指定
// 比較関数（fCompare）の戻り値は、以下の値を設定
//  正の値（> 0） : a を b の後に並べる
//  負の値（< 0） : a を b の前に並べる
//  ゼロ（=== 0） : a と b の並び替えは行わない
const obj1 = [ "HTML", "CSS", "JavaScript" ]	// 配列
const obj = obj1.sort(fCompare);		// obj1 = ['JavaScript', 'HTML', 'CSS'] ⇒ obj = ['JavaScript', 'HTML', 'CSS']
function fCompare(a, b) {				// 比較関数
	const a_s = a.toUpperCase();		// 小文字、大文字を無視
	const b_s = b.toUpperCase();		// 小文字、大文字を無視
	if (a_s < b_s) {
		return 1;						// a を b の後に並べる
	}
	else {
		return -1;						// a を b の前に並べる
	}
	return 0;							// 並び替えは行わない
}

オブジェクトが配列かの判定【isArray】


// オブジェクト（obj1）が配列を判定し結果（true / false）を bool に格納
const obj1 = [ "HTML", "CSS", "JavaScript" ];	// オブジェクト（配列）
const bool = Array.isArray(obj1); 		// bool = true

指定位置の要素の存在確認【hasOwnProperty】


// 配列（obj1）の検査位置（num1）に要素が存在しているかを判定し結果（true / false）を bool に格納
const obj1 = [ "HTML", "CSS", "JavaScript" ]	// 配列
const num1 = 3;							// 要素位置
const bool = obj1.hasOwnProperty(num1);	// bool = false

要素検索（先頭から）【indexOf】


// 配列（obj1）の先頭から検索値（obj2）を検索し位置を num に格納
// 検索値（obj2）がない時は -1 を num に格納
const obj1 = [ "HTML", "CSS", "JavaScript" ]	// 配列
const obj2 = "CSS";						// 検索値
const num = obj1.indexOf(obj2);			// num = 1

要素検索（最終から）【lastIndexOf】


// 配列（obj1）の最終から検索値（obj2）を検索し位置を num に格納
// 検索値（obj2）がない時は -1 を num に格納
const obj1 = [ "HTML", "CSS", "JavaScript" ]	// 配列
const obj2 = "HTML";					// 検索値
const num = obj1.lastIndexOf(obj2);		// num = 0

指定位置の要素を削除【splice】


// 配列（obj1）の開始位置（num1）から要素数（num2）の要素を削除
// 削除した分は詰められ、削除した要素を含む配列を obj に格納
const obj1 = [ "HTML", "CSS", "JavaScript" ];	// 配列
const num1 = 0;							// 開始位置
const num2 = 1;							// 要素数
const obj = obj1.splice(num1, num2);	// obj1 = [ "CSS", "JavaScript" ] ⇒ obj = [ "HTML" ]

指定位置の要素を削除後に配列を挿入【splice】


// 配列（obj1）の開始位置（num1）から要素数（num2）の要素を削除し配列（obj2）を挿入
const obj1 = [ "HTML", "CSS" ];			// 配列
const obj2 = [ "JavaScript", "jQuery" ];	// 追加配列
const num1 = 0;							// 開始位置
const num2 = 1;							// 要素数
obj1.splice(num1, num2, ...obj2);		// obj1 = ['JavaScript', 'jQuery', 'CSS']

指定位置の要素を取得【slice】


// 配列（obj1）の開始位置（num1）から終了位置（num2）の範囲の要素を取り出し obj に格納
// 開始位置（num1）は、0 からはじまり、終了位置（num2）は、位置に 1 を加えた値になります。
// 終了位置（num2）を省略すると末尾が終了位置になります
// 開始位置にマイナス値を指定すると末尾から数えた位置になります
const obj1 = [ "HTML", "CSS", "JavaScript" ];	// 配列
const num1 = 1;							// 開始位置
const num2 = 3;							// 修了位置
const obj = obj1.slice(num1, num2);		// obj = ['CSS', 'JavaScript']

配列と配列を連結【concat】


// 配列1（obj1）と配列2（obj2）を連結して obj に格納
// obj2は、配列だけでなく任意の値でも指定可能です
const obj1 = [ "HTML", "CSS" ];			// 配列1
const obj2 = [ "JavaScript", "jQuery" ];	// 配列2
const obj = obj1.concat(obj2);			// obj = [ "HTML", "CSS", "JavaScript", "jQuery" ]

配列を展開して新しい配列を生成【...】


// 要素 1（obj1）と要素 3（obj3）の間に配列（obj2）を展開して新しい配列（obj）を生成
const obj1 = "HTML";					// 要素
const obj2 = [ "JavaScriptL", "jQuery" ];	// 配列
const obj3 = "CSS";						// 要素
const obj = [ obj1, ...obj2, obj3];		// obj = [ "HTML", "JavaScript", "jQuery", "CSS" ]

配列の要素数分のコールバック関数を呼び出し（アロー関数）【forEach】


// 配列（obj1）の先頭要素から順にコールバック関数に渡し反復処理を実行
// コールバック関数の引数は、値（element）、インデックス値（index）、オブジェクト値（array）が設定
// インデックス値（index）とオブジェクト値（array）は省略可
const obj1 = [ "HTML", "CSS", "JavaScript" ];	// 配列
obj1.forEach((element, index, array) => {	// コールバック関数呼び出し
	console.log("element = " + element);
});
// コンソール出力
// element = HTML
// element = CSS
// element = JavaScript

配列の要素数分のコールバック関数を呼び出し（インラインコールバック関数）【forEach】


// 配列リテラル（obj1）の先頭要素から順にコールバック関数に渡し反復処理を実行
// コールバック関数の引数は、値（element）、インデックス値（index）、オブジェクト値（array）が設定
// インデックス値（index）とオブジェクト値（array）は省略可
const obj1 = [ "HTML", "CSS", "JavaScript" ];	// 配列
obj1.forEach(function(element, index, array) {	// コールバック関数呼び出し
	console.log("element = " + element);
});
// コンソール出力
// element = HTML
// element = CSS
// element = JavaScript

配列の要素数分のコールバック関数を呼び出し返却値で新しい配列を生成【map】


// 配列（obj1）の要素を先頭から順にコールバック関数に渡しコールバック関数の返却値で新しい配列（obj）を生成
// コールバック関数の引数は、値（element）、インデックス値（index）、オブジェクト値（array）が設定
// インデックス値（index）とオブジェクト値（array）は省略可
const obj1 = [ "HTML", "CSS", "JavaScript" ];	// 配列
const obj = obj1.map((element, index, array) => {
	return index + ":" + element;
});										// obj = [ '0:HTML', '1:CSS', '2:JavaScript' ]

配列の要素数分のコールバック関数を呼び出し返却値でフィルタリング【filter】


// 配列（obj1）の要素を先頭から順にコールバック関数に渡し true を返却した要素だけの新しい配列（obj）を生成
// コールバック関数の引数は、値（element）、インデックス値（index）、オブジェクト値（array）が設定
// インデックス値（index）とオブジェクト値（array）は省略可
const obj1 = [ "HTML", "CSS", "JavaScript" ];	// 配列
const obj = obj1.filter((element, index, array) => {
	if (element.length <= 4) {
		return true;					// 要素の文字数が 4 文字以下の場合は true を返却
	}
	else {
		return false;					// 要素の文字数が 4 文字を超える場合は false を返却
	}
});										// obj = [ 'HTML', 'CSS' ]

配列の要素数分のコールバック関数を呼び出し累積値を計算【reduce】


// 累積値を初期値（num1）に設定後に配列（obj1）の要素を先頭から順にコールバック関数に渡し計算した累積値を返却
// コールバック関数の引数は、累積値（value）、値（element）、インデックス値（index）、オブジェクト値（array）が設定
// インデックス値（index）とオブジェクト値（array）は省略可
const obj1 = [ "HTML", "CSS", "JavaScript" ];	// 配列
const num1 = 0;							// 初期値
const num = obj1.reduce((value, element, index, array) => {
	return value + element.length		// 累積値に要素の文字数を加えて返却
}, num1);								// num = 17

(3) 正規表現リテラル

正規表現リテラルは、正規表現値をリテラルで定義します。正規表現リテラルの記述は、スラッシュ（/）で正規表現のパターン文字列を囲んで記述します。正規表現のパターン内では、+ やバックスラッシュ（\）からはじまる特殊文字が特別な意味を持ちます。また、パターン文字列の後ろにオプションが指定でき検索時の条件設定を行うことも可能です。

また、RegExp オブジェクトのコンストラクタを使用することも定義が可能です。正規表現リテラルはパフォーマンスが良いですが、正規表現パターンが動的に変化する場合やパターン内で変数を使う場合などは、パフォーマンスが低下するので RegExp オブジェクトのコンストラクタを使用する方が良いです。

正規表現の記述方法については、個別の説明サイトや書籍を参照してください。。


const オブジェクト名 = /正規表現のパターン文字列/オプション;					// 正規表現リテラル
const オブジェクト名 = new RegExp('正規表現のパターン文字列', 'オプション');	// RegExp オブジェクトのコンストラクタの呼び出し

正規表現リテラルの使用例


const objRegExp = /\d+/;

上記の例では、1 文字以上の数字にマッチする正規表現のリテラル値を示します。

(4) ラッパーオブジェクト

ラッパーオブジェクトは、プリミティブ型の値をオブジェクトとして表現するオブジェクトです。プリミティブ型の型式により、数値は Number 関数、文字列は String 関数、真偽値は Boolean 関数を用いて作成します。この各関数をコンストラクタ関数といいます。ラッパーオブジェクトを作成するためには、new 演算子と対応するコンストラクタ関数を使用して作成します。


const オブジェクト名 = new Numaric(数値);
const オブジェクト名 = new String(文字列);
const オブジェクト名 = new Boolean(真偽値);

ラッパーオブジェクトの使用例


const objNumeric = new Numaric(1.234);
const objString = new String("value");
const objBoolean = new Boolean(123);

上記の例で objNumeric や objString は、ラッパーオブジェクトなので typeof 演算子の結果は object になります。また、オブジェクトであるため length プロパティなどが使用可能になります。しかし、明示的にラッパーオブジェクトを使う理由はありません。JavaScript では、プリミティブ型のデータに対してもオブジェクトのように参照できる仕組みがあります。プリミティブ型のデータのプロパティへのアクセスが発生すると、対応するラッパーオブジェクトへ暗黙的に変換してからプロパティへのアクセスが発生します。ここでは、プリミティブ型のデータであってもオブジェクトのようにプロパティやメソッドの使用が可能であることを理解してください。

L12.2.5 演算子

JavaScript で演算を行う時の演算子は、以下の通りです。

(1) 算術演算子

	演算子	使用例	意味
加算(足し算)	+	a + b	a に b を加える
減算(引き算)	-	a - b	a から b を引く
乗算(掛け算)	*	a * b	a と b を掛ける
除算(割り算)	/	a / b	a を b で割る
剰余(割り算の余り)	%	a % b	a と b の剰余を求める
べき乗(n乗)	**	a ** b	a の b乗を求める

演算子が複数あったりカッコを付けた演算もできます。
演算の優先順位は、「カッコ → べき乗 → 乗算/除算/剰余 → 加算/減算」の順になります。

(2) 文字演算子

	演算子	使用例	意味
結合	+	"abc" + a	"abc" と a を結合する

型の異なる値を演算した場合は、同じ型になるように暗黙的な型変換をしてから演算します。

(3) 比較演算子

	演算子	使用例	意味
等価	==	a == b	a と b は等しい
不等価	!=	a != b	a と b は等しくない
厳密等価	===	a === b	a と b は型を含めて等しい
厳密不等価	!==	a !== b	a と b は型を含めて等しくない
大きい	>	a > b	a は b より大きい
以上	>=	a >= b	a は b 以上
小さい	<	a < b	a は b より小さい
以下	<=	a <= b	a は b 以下

厳密等価と厳密不透過を除いて、型の異なる値を演算した場合は、同じ型になるように暗黙的な型変換をしてから演算します。

(4) 論理演算子

	演算子	使用例	意味
論理積	&&	a && b	a と b の両方の条件に当てはまる（AND）
論理和	\|\|	a \|\| b	a と b のどちらかの条件に当てはまる（OR）
論理否定	!	!a	a ではない（NOT）

(5) インクリメント/デクリメント演算子

	演算子	使用例	意味
前置インクリメント	++	++a	a に +1 して値を返す
後置インクリメント	++	a++	a の値を返した後に +1 する
前置デクリメント	--	--a	a から -1 して値を返す
後置デクリメント	--	a--	a の値を返した後に -1 する

(6) ビット演算子

	演算子	使用例	意味
ビット論理積	&	a & b	a と b のビット単位の論理積（AND）を返す
ビット論理和	\|	a \| b	a とは b のビット論理和（OR）を返す
ビット排他的論理和	^	a ^ b	a と b のビット排他論理和（XOR）を返す
ビット否定	~	~a	a のビット否定（NOT）を返す
左シフト	<<	a << b	a を左に b ビットシフト
右シフト	>>	a >> b	a を右に b ビットシフト
ゼロ詰め右シフト	>>>	a >>> b	a を右に b ビットシフト

ビット演算子は、数値を符号付き32ビット整数として扱います。一番左のビットは符号を表し、0 の場合は正、1 の場合は負の値であることを示します。
ビット論理積は、両方のビットが 1 の場合に 1 となり、それ以外は、0 になります。
ビット論理和は、どちらか片方のビットが 1 の場合に 1 となり、両方とも 0 の場合に 0 になります。
ビット排他的論理和は、両方のビットが異なるなら 1 になり、同じなら 0 になります。
ビット否定は、ビットを反転した値になります。これは、1 の補数として知られている値と同じです。
左シフトでは、あふれたビットは破棄され、 0 のビットを右から詰めます。
右シフトでは、あふれたビットは破棄され、左端のビットを左から詰めます。
ゼロ詰め右シフトでは、あふれたビットは破棄され、0 のビットを左から詰めます。

L12.2.6 条件分岐と反復処理

JavaScript で処理を記述する時に重要となる条件分岐と反復処理の記述方法は、以下の通りです。

(1) 条件分岐（if / else）

条件によって処理を分岐する時は、if と else を使用します。


// 条件の真判定
if (条件式1) {
	// 条件式1 が真の時の処理
}

// 条件の真偽判定
if (条件式2) {
	// 条件式2 が真の時の処理
}
else {
	// 条件式2 が偽の時の処理
}

// 複数の条件判定
if (条件式3 ) {
	// 条件式3 が真の時の処理
}
else if (条件式4) {
	// 条件式4 が真の時の処理
}
else if (条件式5) {
	// 条件式5 が真の時の処理
}
else {
	// 条件式3、条件式4、条件式5 に該当しない時の処理
}

// 複合条件判定（単独行での記述）
if (条件式6 && 条件式7) {
		// 条件式6 と条件式7 が、どちらも真の時の処理
	}
}

// 複合条件判定（複数行での記述）
if (条件式6) {
	if (条件式7) {
		// 条件式6 と条件式7 が、どちらも真の時の処理
	}
}

条件分岐（if / else）の使用例は、以下の通りです。

条件分岐（if / else）の使用例


// 条件の真判定
let age = 25;							// 年齢設定
if (age < 20) {
	alert("20 歳未満");					// 20 歳未満の処理（実行しない）
}

// 条件の真偽判定
let age = 25;							// 年齢設定
if (age < 20) {
	alert("20 歳未満");					// 20 歳未満の処理
}
else {
	alert("20 歳以上");					// 20 歳以上の処理（ここを実行）
}

// 複数の条件判定
let age = 25;							// 年齢設定
if (age < 20) {
	alert("20 歳未満");					// 20 歳未満の処理
}
else if (age < 30) {
	alert("20 歳以上で 30 歳未満");		// 20 歳以上で 30 歳未満の処理（ここを実行）
}
else {
	alert("30 歳以上");					// 30 歳以上の処理
}

// 複合条件判定（単独行での記述）
let age = 25;							// 年齢設定
if ((age >= 20) && (age < 30)) {
	alert("20 歳以上で 30 歳未満");		// 20 歳以上で 30 歳未満の処理（ここを実行）
}

// 複合条件判定（複数行での記述）
let age = 25;							// 年齢設定
if (age >= 20) {
	if (age < 30) {
		alert("20 歳以上で 30 歳未満");	// 20 歳以上で 30 歳未満の処理（ここを実行）
	}
}

(2) 条件分岐（switch / case）

式の評価結果が値によって行う処理を並べて記述する時は、switch と case を使用します。


switch (式) {
	case ラベル1:
		// 式の評価結果がラベル1 と一致する時の処理
		// break がない場合は、条件に関係なく後続する case 節を実行
	case ラベル2:
		// 式の評価結果がラベル2 と一致する時の処理
		break;
	case ラベル3:
		// 式の評価結果がラベル3 と一致する時の処理
		break;
	default:
		// 式の評価結果が、どのラベルとも一致しない時の処理
		break;
}
// break の後は、ここから実行

条件分岐（switch / case）の使用例は、以下の通りです。

条件分岐（switch / case）の使用例


let lang = "CSS";						// 条件値の設定
switch(lang) {
	case "HTML":
		alert("HTML時の処理");			// HTML時の処理
		break;
	case "CSS":
		alert("CSS時の処理");			// CSSL時の処理（ここを実行）
		break;
	case "JavaScript":
		alert("JavaScript時の処理");	// JavaScript時の処理
		break;
	default:
		alert("その他の処理");			// その他の処理
		break;
}

(3) 反復処理（while）

条件が真の間繰り返す場合は、while を使用します。

反復処理（while）は、最初から条件式が偽だった場合は、なにも実行しないで終了します。
処理の途中で反復処理を終了させる場合は、break を使用します。
処理の途中で反復処理の条件式を評価させる場合は、continue を使用します。


while (条件式) {
	// 反復内の処理
}

反復処理（while）の使用例は、以下の通りです。

反復処理（while）の使用例


// 1 から 10 までの合計を求める処理
let a = 0;								// 累積値を初期化（0）
let i = 1;								// 繰り返しカウンタを初期化（1）
while (i <= 10) {						// 繰り返しカウンタが 10 以下の間繰り返し
	a = a + i;							// 累積値に現在の繰り返しカウンタを加算
	i++;								// 繰り返しカウンタに 1 を加算
}
alert(a);								// 結果を表示

(4) 反復処理（do / while）

条件が真の間繰り返す場合は、do / while を使用します。do / while は、while とほとんど同様ですが条件式の判定順序が反復内の処理を実行後になります。

反復処理（do / while）は、最初から条件式が偽だった場合でも反復内の処理を 1 回は実行されます。
処理の途中で反復処理を終了させる場合は、break を使用します。
処理の途中で反復処理の条件式を評価させる場合は、continue を使用します。


do {
	// 反復内の処理
} while (条件式) ;

反復処理（do / while）の使用例は、以下の通りです。

反復処理（do / while）の使用例


// 1 から 10 までの合計を求める処理
let a = 0;								// 累積値を初期化（0）
let i = 1;								// 繰り返しカウンタを初期化（1）
do {
	a = a + i;							// 累積値に現在の繰り返しカウンタを加算
	i++;								// 繰り返しカウンタに 1 を加算
} while (i <= 10); 						// 繰り返しカウンタが 10 以下の間繰り返し
alert(a);								// 結果を表示

(5) 反復処理（for）

反復条件を指定して繰り返す場合は、for を使用します。

処理の途中で反復処理を終了させる場合は、break を使用します。
処理の途中で反復処理の条件式を評価させる場合は、continue を使用します。


for (初期値; 条件式; 加算式) {
	// 反復内の処理
}

反復処理（for）の使用例は、以下の通りです。

反復処理（for）の使用例


// 1 から 10 までの合計を求める処理
let a = 0;								// 累積値を初期化（0）
for (let i = 1; i <= 10; i++) {
	a = a + i;							// 累積値に現在の繰り返しカウンタを加算
}
alert(a);								// 結果を表示

(6) 反復処理（for / in）

オブジェクトリテラルのプロパティに対して繰り返す場合は、for と in を使用します。


// オブジェクトリテラルに格納されているプロパティの数分の繰り返しを実施
for (変数 in オブジェクトリテラル) {	// 変数にプロパティ（キー）が順に設定
	// 反復内の処理
}

反復処理（for / in）の使用例は、以下の通りです。

反復処理（for / in）の使用例


const obj = {							// オブジェクトリテラルを定義
	"key1" : "value1",
	"key2" : "value2",
	"key3" : "value3"
};
// オブジェクト（obj）の項目を順に表示
for (const key in obj) {				// オブジェクトリテラルに格納されているキーを順に key に設定
	alert(key + " = " + obj[key]);		// キーと値を表示
}

(7) 反復処理（for / of）

配列オブジェクトの繰り返しを行う場合は、for と of を使用します。

JavaScript では、文字列（String オブジェクト）も配列になっていますので、for / of を使用することで文字列から 1文字ずつ取得することができます。


// 配列オブジェクトに格納されている項目数分の繰り返しを実施
for (変数 of 配列オブジェクト) {		// 変数に項目値を順に設定
	// 反復内の処理
}

反復処理（for / of）の使用例は、以下の通りです。

反復処理（for / of）の使用例


const array = ["HTML", "CSS", "JavScript"];
for (const value of array) {			// 配列オブジェクトに格納されている値を順に value に設定
	alert("value = " + value);			// 値を表示
}

L12.2.7 関数

関数は、ある一連の手続きを処理としてまとめて機能として使用可能にします。関数を使用することで同じ処理を何回も記述するのではなく関数を呼び出すことで処理の記述を簡素化できます。JavaScript では、関数もオブジェクトの一つです。

関数名は、半角のアルファベット、アンダースコア（_）、ダラー（$）、数字を組み合わせた名前が使用できます。
関数名は、数字から始めることはできません。
関数名は、大文字と小文字が区別されます。name と NAME は、別の関数として扱われます。
関数名は、あらかじめ定義されている予約語を関数名に使用できることはできません。予約語については、後述の予約語一覧を参照してください。
関数名は、JavaScript の仕様では、全角文字（漢字など）も使用可能ですが環境に依存する部分も発生しますので全角文字の使用はお勧めしません。
仮引数は、関数呼び出しの時に渡された値が入る変数であり、複数ある場合は、カンマ（,）で区切って指定します。
関数宣言での仮引数と関数呼び出し時の引数の数が合わない場合は、引数が不足している場合は、undefined が設定され、引数が多い場合は、あふれた引数は無視されます。
関数の戻り値は、関数を呼び出した呼び出し元に返される値を指定します。
関数の戻り値を返す必要がない場合は、return を省略できます。return を省略した場合は、戻り値に undefined が返されます。

(1) 関数宣言と関数呼び出し

関数を宣言するには、function を使用します。関数の宣言と呼び出し型式は、以下の通りです。


// 関数宣言
function 関数名(仮引数1, 仮引数2) {
	// 関数内の処理
	return 関数の戻り値;
}

// 関数呼び出し
const 関数の結果 = 関数名(引数1, 引数2);

// 関数宣言（関数呼び出し時に引数を省略した場合のデフォルト値を設定）
function 関数名(仮引数1 = デフォルト値1, 仮引数2 = デフォルト値2) {
	// 関数内の処理
	return 関数の戻り値;
}

// 関数宣言（仮引数の個数が可変の可変長引数で定義）
function 関数名(...仮引数リスト) {
	// 仮引数リストは、可変長の引数を配列オブジェクトとして格納します
	// 関数内の処理
	return 関数の戻り値;
}

// 関数宣言（固定の仮引数と可変の可変長引数を組み合わせて定義）
function 関数名(仮引数1, 仮引数2, ...仮引数リスト) {
	// 固定の仮引数1 と仮引数2 に加えて可変長の引数を仮引数リストに配列オブジェクトとして格納します
	// 関数内の処理
	return 関数の戻り値;
}

// アロー関数（Arrow Function）での関数宣言（匿名関数を定義）
// 仮引数が 1つの時は、カッコを省略可能
const 変数名 = (仮引数1, 仮引数2) => {
	// 関数内の処理
	return 関数の戻り値;
}

関数の使用例は、以下の通りです。

関数の使用例


// 指定された値を 2倍して返却する関数
function double(num) {
	return num * 2;
}
console.log(double(10));				// 10 を 2倍してコンソールに表示

// 引数のデフォルト値を設定した関数
function func1(arg1 = "HTML", arg2 = "CSS") {
	return arg1 + ":" + arg2;
}
console.log(func1("CSS", "HTML"));		// コンソール表示 ⇒ "CSS:HTML"
console.log(func1());					// コンソール表示 ⇒ "HTML:CSS"

// 引数の数が可変長の関数
function func2(	...arg) {
	for (value of arg) {
		console.log(value);				// 引数の数分をコンソールに表示
	}
}
func2("CSS", "HTML", "JavaScript");
// コンソール表示結果
// HTML
// CSS
// JavaScript

// インラインの関数
setInterval(function() {
	console.log("1秒単位の表示");		// 1秒単位にメッセージ表示
}, 1000);

L12.2.8 予約語

予約語は、JavaScrpt の言語仕様として特別な意味を持つ単語を示します。予約語は、変数名や関数名として使用することはできません。

予約語一覧


// 予約語一覧（ECMAScriptで規定）
await
break
case
catch
class
const
continue
debugger
default
delete
do
else
enum
export
extends
false
finally
for
function
if
import
in
instanceof
new
null
return
super
switch
this
throw
true
try
typeof
var
void
while
with
yield

// strict mode で予約語として登録
let
static
implements
interface
package
private
protected
public

// 将来の予約語として登録
enum

L12.2.9 JavaScript の記述場所

JavaScript は、使用用途によって記述する場所が異なります。HTML 内に JavaScript を記述する場合は、script タグを使用します。

HTML の body 部に記述
HTML の head 部に記述
外部のファイルに記述

(1) JavaScript 記述例

HTML（l12-javascript-01.html）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptサンプル</title>
<style>
body {
	margin: 0;
}
.container {
	padding: 0 10px;
	border: #ccc 1px solid;
}
</style>
<script>
function func() {
	document.write('HTMLのhead部に書いた関数から出力しました。');
}
</script>
</head>
<body>
	<div class="container">
		<h1>JavaScriptサンプル</h1>
		<h2>[1] HTMLのbody部に直接記述</h2>
		<p>
			<script>
				document.write('HTMLのbody部から出力しました。');
			</script>
		</p>
		<h2>[2] head部に書いた関数に記述</h2>
		<p>
			<script>
				func();
			</script>
		</p>
		<h2>[3] 外部のJavaScriptファイルに記述</h2>
		<p>
			<script src="js/l12-javascript-01.js"></script>
		</p>
	</div>
</body>
</html>

JavScript（js/javascript-01.js）



document.write('外部（l12-javascript-01.js）から出力しました。');

(2) 表示結果

L12.2.10 JavaScript の記述例

JavaScript の主要な記述例は、以下の通りです。

JavaScriptの記述例


// HTML に文字列を書き出し
document.write("文字列");

// div 要素の取得
item1 = document.getElementsByTagName("div");

// id 名が box の要素の取得
item1 = document.getElementById("box");

// class 名が box の要素の取得
item1 = document.getElementsByClassName("box");

// name 属性が box の要素の取得
item1 = document.getElementsByName("box");

// body 要素の最後に「<div class="xxx">コンテンツ</div>」のコンテンツを追加
value1 = document.createElement("div");
value1.className = "xxx";
value1.textContent = "コンテンツ";
document.body.appendChild(value1);

// class 名が box の HTML を「<div class="xxx">コンテンツ</div>」に書き換える
value1 = document.querySelectorAll(".box");
for (i = 0, len = value1.length; i < len; i++) {
	value1[i].innerHTML = '<div class="xxx">コンテンツ</div>';
}

// jQuery で生成した jQuery オブジェクトから DOM オブジェクトを取り出す
value1 = $('<div class="xxx">コンテンツ</div>');
vakue2 = value1.get(0);
value2.innerHTML = "書き換えコンテンツ";

L12.2.11 JavaScript のサンプル

(1) 日付と時間を表示

JavaScript で現在の日付と時間を表示します。

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptで日付と時刻を表示</title>
<style>
body {
	margin: 0;
}
.container {
	padding: 0 10px;
	border: #ccc 1px solid;
}
p {
	width: 500px;
	background-color: #888;
	font-size: 40px;
	line-height: 2;
	color: #fff;
	text-align: center;
}
</style>
</head>
<body>
	<div class="container">
		<h1>現在の日付と時刻を表示します。</h1>
		<p>
			<script>
				var dd = new Date();
				document.write(dd.toLocaleString());
			</script>
		</p>
	</div>
</body>
</html>

※リロード（再描画）して確認してください。

リロード

(2) 日付と時間を表示（自動更新）

JavaScript で現在の日付と時間を表示します。また、日付と時刻は自動で更新します。

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptで日付と時刻を表示（自動更新）</title>
<style>
body {
	margin: 0;
}
.container {
	padding: 0 10px;
	border: #ccc 1px solid;
}
p {
	width: 500px;
	background-color: #888;
	font-size: 40px;
	line-height: 2;
	color: #fff;
	text-align: center;
}
</style>
<script>
window.onload = function() {
	setInterval(function() {
		var dd = new Date();
		document.getElementById("datetime").innerHTML = dd.toLocaleString();
	}, 1000);
}
</script>
</head>
<body>
	<div class="container">
		<h1>現在の日付と時刻を表示します。（自動更新）</h1>
		<p id="datetime">
			<script>
				var dd = new Date();
				document.write(dd.toLocaleString());
			</script>
		</p>
	</div>
</body>
</html>

※リロード（再描画）して確認してください。

リロード

(3) 時刻に応じたメッセージを表示

JavaScript で時刻に応じた挨拶メッセージを表示します。

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptでご挨拶</title>
<style>
html {
	font-size: 16px;
}
body {
	margin: 0;
}
.container {
	padding: 40px;
	border: #ccc 1px solid;
}
p span {
	font-weight: bold;
	color: #d0233b;
}
</style>
</head>
<body>
	<div class="container">
		<h1>レストランのWebサイトだと思ってください。</h1>
		<h2>表示する時間によってご挨拶のメッセージが変わります。</h2>
		<dl>
			<dt>00時～07時</dt><dd>7時よりモーニングセットを提供します。<br>ぜひ、ご来店ください。</dd>
			<dt>07時～11時</dt><dd>モーニングセットを提供しています。<br>モーニングセットの提供は11時までとなります。</dd>
			<dt>11時～14時</dt><dd>お得なランチセットを提供中です。<br>ランチセットの提供は14時までとなります。</dd>
			<dt>14時～18時</dt><dd>18時よりディナーセットを提供します。<br>ぜひ、ご来店ください。</dd>
			<dt>18時～24時</dt><dd>ディナーセット提供中です。<br>ラストオーダー23時、閉店24時となります。</dd>
		</dl>
		<h3>【ご挨拶】</h3>
		<p>
			<span>
				<script>
					var nt = new Date();
					var hr = nt.getHours();
					var mn = nt.getMinutes();
					document.write('ただいま、' + hr + '時' + mn + '分です。<br>');
					if (hr < 7) {
						document.write('7時よりモーニングセットを提供します。<br>ぜひ、ご来店ください。');
					}
					else if (hr < 11) {
						document.write('モーニングセットを提供しています。<br>モーニングセットの提供は11時までとなります。');
					}
					else if (hr < 14) {
						document.write('お得なランチセットを提供中です。<br>ランチセットの提供は14時までとなります。');
					}
					else if (hr < 18) {
						document.write('18時よりディナーセットを提供します。<br>ぜひ、ご来店ください。');
					}
					else {
						document.write('ディナーセット提供中です。<br>ラストオーダー23時、閉店24時となります。');
					}
				</script>
			</span>
		</p>
		<h3>【ご挨拶（テスト用）】</h3>
		<p>
			<span>
				<script>
					var nt = new Date();
					var hr = nt.getHours();
					var mn = nt.getMinutes();
					hr = Math.floor(Math.random() * 24);
					document.write('テスト用に時間を' + hr + '時に変更しました。<br><br>');
					document.write('ただいま、' + hr + '時' + mn + '分です。<br>');
					if (hr < 7) {
						document.write('7時よりモーニングセットを提供します。<br>ぜひ、ご来店ください。');
					}
					else if (hr < 11) {
						document.write('モーニングセットを提供しています。<br>モーニングセットの提供は11時までとなります。');
					}
					else if (hr < 14) {
						document.write('お得なランチセットを提供中です。<br>ランチセットの提供は14時までとなります。');
					}
					else if (hr < 18) {
						document.write('18時よりディナーセットを提供します。<br>ぜひ、ご来店ください。');
					}
					else {
						document.write('ディナーセット提供中です。<br>ラストオーダー23時、閉店24時となります。');
					}
				</script>
			</span>
		</p>
	</div>
</body>
</html>

※リロード（再描画）して確認してください。

リロード

(4) 時刻に応じたメッセージを表示（関数を使用）

JavaScript で時刻に応じた挨拶メッセージを表示します。上記のサンプルと表示型式は同じですがメッセージ出力部分を関数化して JavaScript の記述を簡略化しました。

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptでご挨拶</title>
<script>
function Greeting(hr, mn) {
	document.write('ただいま、' + hr + '時' + mn + '分です。<br>');
	if (hr < 7) {
		document.write('7時よりモーニングセットを提供します。<br>ぜひ、ご来店ください。');
	}
	else if (hr < 11) {
		document.write('モーニングセットを提供しています。<br>モーニングセットの提供は11時までとなります。');
	}
	else if (hr < 14) {
		document.write('お得なランチセットを提供中です。<br>ランチセットの提供は14時までとなります。');
	}
	else if (hr < 18) {
		document.write('18時よりディナーセットを提供します。<br>ぜひ、ご来店ください。');
	}
	else {
		document.write('ディナーセット提供中です。<br>ラストオーダー23時、閉店24時となります。');
	}
}
</script>
<style>
html {
	font-size: 16px;
}
body {
	margin: 0;
}
.container {
	padding: 40px;
	border: #ccc 1px solid;
}
p span {
	font-weight: bold;
	color: #d0233b;
}
</style>
</head>
<body>
	<div class="container">
		<h1>レストランのWebサイトだと思ってください。</h1>
		<h2>表示する時間によってご挨拶のメッセージが変わります。</h2>
		<dl>
			<dt>00時～07時</dt><dd>7時よりモーニングセットを提供します。<br>ぜひ、ご来店ください。</dd>
			<dt>07時～11時</dt><dd>モーニングセットを提供しています。<br>モーニングセットの提供は11時までとなります。</dd>
			<dt>11時～14時</dt><dd>お得なランチセットを提供中です。<br>ランチセットの提供は14時までとなります。</dd>
			<dt>14時～18時</dt><dd>18時よりディナーセットを提供します。<br>ぜひ、ご来店ください。</dd>
			<dt>18時～24時</dt><dd>ディナーセット提供中です。<br>ラストオーダー23時、閉店24時となります。</dd>
		</dl>
		<h3>【ご挨拶】</h3>
		<p>
			<span>
				<script>
					var nt = new Date();
					var hr = nt.getHours();
					var mn = nt.getMinutes();
					Greeting(hr, mn);
				</script>
			</span>
		</p>
		<h3>【ご挨拶（テスト用）】</h3>
		<p>
			<span>
				<script>
					var nt = new Date();
					var hr = nt.getHours();
					var mn = nt.getMinutes();
					hr = Math.floor(Math.random() * 24);
					document.write('テスト用に時間を' + hr + '時に変更しました。<br><br>');
					Greeting(hr, mn);
				</script>
			</span>
		</p>
	</div>
</body>
</html>

※リロード（再描画）して確認してください。

リロード

(5) 写真をランダムに表示

表示のたびに JavaScript で 10 枚の写真をランダムに表示します。

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptでランダムに写真を表示</title>
<style>
body {
	margin: 0;
}
.container {
	padding: 0 10px 10px 10px;
	border: #ccc 1px solid;
}
img {
	width: 100%;
	max-width: 768px;
}
</style>
</head>
<body>
	<div class="container">
		<h1>10枚の写真をランダムに表示します。</h1>
		<script>
			FileName = 'images/javascript-' + ('0' + Math.floor(Math.random() * 10)).slice(-2) + '.jpg';
			document.write('<h2>ファイル名：' + FileName + '</h2>');
			document.write('<img src="' + FileName + '" alt="サンプル画像">');
		</script>
	</div>
</body>
</html>

※リロード（再描画）して確認してください。

リロード

PAGE
TOP

Lesson-13 JavaScript を記述しましょう

目次

L12.2 JavaScript 基本仕様

L12.2.1 文とコメント

(1) 文

(2) コメント

L12.2.2 変数と宣言

(1) const

(2) let

(3) var

(4) 変数宣言の例

L12.2.3 データ型（プリミティブ型）

(1) 数値

(2) 長整数

(3) 文字列

(4) 真偽値

(5) undefined

(6) null

(7) シンボル

L12.2.4 データ型（オブジェクト）

(1) オブジェクトリテラル

(2) 配列リテラル

(3) 正規表現リテラル

(4) ラッパーオブジェクト

L12.2.5 演算子

(1) 算術演算子

(2) 文字演算子

(3) 比較演算子

(4) 論理演算子

(5) インクリメント/デクリメント演算子

(6) ビット演算子

L12.2.6 条件分岐と反復処理

(1) 条件分岐（if / else）

(2) 条件分岐（switch / case）

(3) 反復処理（while）

(4) 反復処理（do / while）

(5) 反復処理（for）

(6) 反復処理（for / in）

(7) 反復処理（for / of）

L12.2.7 関数

(1) 関数宣言と関数呼び出し

L12.2.8 予約語

L12.2.9 JavaScript の記述場所

(1) JavaScript 記述例

(2) 表示結果

L12.2.10 JavaScript の記述例

L12.2.11 JavaScript のサンプル

(1) 日付と時間を表示

(2) 日付と時間を表示（自動更新）

(3) 時刻に応じたメッセージを表示

(4) 時刻に応じたメッセージを表示（関数を使用）

(5) 写真をランダムに表示

Lesson-13
JavaScript を記述しましょう