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

Lesson-12
JavaScript/jQuery で処理しましょう

L12.1 はじめに

L12.1.1 概要

動きのある Web ページや Web ページで計算などの処理を行う場合は、JavaScript や jQuery や個別のライブラリィなどを使用します。
JavaScript の処理部は、ブラウザに内蔵されていますので JacaScript のコードを書くだけで使用可能です。
jQuery の処理部は、JavaScript で記述されており使用するためには、jQuery の処理部を導入する必要があります。
個別ライブラリィは、個別機能に特化した機能提供を行うもので JavaScript を直接呼び出しているものと、jQuery の機能を使用しているものがあります。個別ライブラリィを使用するためには、個別ライブラリィの処理部（必要に応じて個別ライブラリィの CSS や画像ファイルなどを含む）を導入する必要があります。

L12.1.2 アプリケーションと各機能の関係

(1) アプリケーション

Web ページで動きを出す場合や計算などの処理を行う場合は、JavaScript や jQuery で処理を記述したり個別ライブラリィなどの呼び出しを行います。
実現する機能によって記述方法が異なりますので、本サイトの Web パーツ（WebParts）ページなどを参考にして記述を行ってください。

(2) 個別ライブラリィ

個別機能に特化した機能提供を行うライブラリィです。
実装する機能によって使用するライブラリィが異なりますので、本サイトの Web パーツ（WebParts）ページや個別ライブラリィの公式サイト、ネット上の参考サイトなどを参考にして使用してください。
個別ライブラリィを使用する場合は、個別ライブラリィをダウンロードしてサイト内に配置する方法と CDN サイトを使用する方法があります。CDN については、下記の参考事項を参照してください。
個別ライブラリィには、jQuery を使用するものと、JavaScript を直接使用するものがあります。jQuery を使用するものはjQueryの実装が必要になりますので忘れずに jQuery の導入を行ってください。

(3) jQuery

jQuery は、JavaScript コードをより容易に記述できるようにするために設計された JavaScript ライブラリです。
jQuery は、JavaScript を使用して機能実現を行っていますので jQuery の機能は、JavaScript を呼び出すことで実現可能ですが、jQuery を使用することで処理の記述が簡易化されます。
jQuery は、以下の特徴を持ちます。
- ブラウザの違いを意識せずに処理を記述できます。
- HTML 文書（DOM：Document Object Model）に簡単にアクセスできます。
- Ajax 処理（サーバーとの非同期通信）が簡単に記述できます。
jQuery の詳細については、関連図書や関連サイトを参照してください。

(4) JavaScript

JavaScript は、Web ページの操作機能を提供します。JavaScript を使用することで Web ページに動きを与えたり算術などの処理を行うことが可能になります。
JavaScript の処理部は、ブラウザに内蔵されているので JavaScript のコードを記述するだけで使用可能です。
JavaScript はスクリプト言語のひとつであり Netscape Communications 社によって開発されたプログラミング言語ですが、標準化され現在ではほとんどのブラウザの標準スクリプト言語として使用されています。JavaScript の言語仕様は、ECMAScript として標準化されています。
JavaScript はクライアント（ブラウザ）のスクリプト言語として発展して来ましたが近年ではサーバーサイドでも稼働するものもあります。
JavaScript の詳細については、関連図書や関連サイトを参照してください。

L12.1.3 JavaScript/jQuery の動作確認

JavaScript や jQuery の動作確認には、Chrome の検証ツールを使用するのが便利です。

Chrome の検証ツールを起動してコンソール画面を開くことで JavaScript や jQuery のコードを入力して動作を確認することができます。
jQuery の動作を確認するためには、HTML の script 要素を使用して、jQuery 本体の読み込みを行っておく必要があります。
console.log(...) を使用することで、指定した変数などをコンソール画面に表示することができます。
alert(...) を使用することで、指定した変数などをダイヤログボックスに表示することができます。

L12.1.4 参考情報

(1) CDN（Content Delivery Network）について

jQuery や個別ライブラリィを使用する場合は、ダウンロードしてサイト内に配置する方法と CDN（Content Delivery Network）を使用して配置する方法があります。CDN の特徴と使用方法は、以下の通りです。

CDN を使用すると jQuery や個別ライブラリィを使用する時に指定されたURLを記述するだけで使用できますのでダウンロードしてサイト内に配置する作業が不要になります。
CDN では、jQuery や個別ライブラリィのダウンロードが高速で大容量のサーバーから行われますので高速に実行されると同時に自サイトのサーバー負荷を軽減させることができます。
CDN を使用する場合は、ネットの検索で「（使用する機能名） CDN」と検索して表示されたコードを Web ページ内に記述してください。例えば、jQuery の CDNは、「jQuery CDN」と検索します。

L12.1.5 じゃんけんアプリーション

JavaScript、jQuery、PHP（参考）の言語仕様や動作環境の違いを理解するために各環境で動作する「じゃんけんアプリケーション」を用意しました。ソースコードは類似していますが特徴的な部分に相違があります。各アプリケーションのソースコードで相違点を確認してください。

(1) JavaScript 版

JavaScript で作成した「じゃんけんアプリケーション」です。JavaScript の基本機能を使用して作成しています。

リロード　別画面で表示

ソースコード表示

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>じゃんけん</title>
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.container {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	border: 1px #fff solid;
}
.container h1 {
	font-size: 28px;
	text-align: center;
}
.senntaku {
	display: flex;
}
.senntaku div {
	width: calc(100% / 3);
	line-height: 100px;
	margin: 10px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	background: blue;
	color: white;
	border-radius: 10px;
}
.senntaku div:hover {
	opacity: 0.6;
	cursor: pointer;
}
.kekka {
	padding: 0 20px;
	font-size: 1.4rem;
}
</style>
<script>
function jyanken(anata) {
	let watashi;
	let hantei;
	const cnvRand = [ "グー", "グー", "チョキ", "パー" ];
	const kekka_anata = document.getElementById('kekka-anata');
	const kekka_watashi = document.getElementById('kekka-watashi');
	const kekka_hantei = document.getElementById('kekka-hantei');

	watashi = cnvRand[ Math.ceil(Math.random() * 3) ];
	if (anata == watashi) {
		hantei = "引き分け";
	}
	else if ((anata == "グー") && (watashi == "パー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "グー") && (watashi == "チョキ")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "グー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "パー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "グー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "チョキ")) {
		hantei = "私の勝ち";
	}
	kekka_anata.textContent = anata;
	kekka_watashi.textContent = watashi;
	kekka_hantei.textContent = hantei;
}
</script>
</head>
<body>
	<div class="container">
		<h1>じゃんけん<br>（JavaScript版）</h1>
		<div class="senntaku">
			<div onclick="jyanken('グー');">グー</div>
			<div onclick="jyanken('チョキ');">チョキ</div>
			<div onclick="jyanken('パー');">パー</div>
		</div>
		<p class="kekka">
			あなたは、<span id="kekka-anata">？</span> で、私は、<span id="kekka-watashi">？</span> なので、<span id="kekka-hantei">？</span>です。
		</p>
	</div>
</body>
</html>

(2) jQuery 版（その1）

jQuery で作成した「じゃんけんアプリケーション」です。JavaScript のアプリーションと比較して、じゃんけん結果を HTML 部分に設定する部分を jQuery を使って設定するようにしました。

リロード　別画面で表示

ソースコード表示

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>じゃんけん</title>
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.container {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	border: 1px #fff solid;
}
.container h1 {
	font-size: 28px;
	text-align: center;
}
.senntaku {
	display: flex;
}
.senntaku div {
	width: calc(100% / 3);
	line-height: 100px;
	margin: 10px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	background: red;
	color: white;
	border-radius: 10px;
}
.senntaku div:hover {
	opacity: 0.6;
	cursor: pointer;
}
.kekka {
	padding: 0 20px;
	font-size: 1.4rem;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function jyanken(anata) {
	let watashi;
	let hantei;
	const cnvRand = [ "グー", "グー", "チョキ", "パー" ];

	watashi = cnvRand[ Math.ceil(Math.random() * 3) ];
	if (anata == watashi) {
		hantei = "引き分け";
	}
	else if ((anata == "グー") && (watashi == "パー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "グー") && (watashi == "チョキ")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "グー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "パー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "グー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "チョキ")) {
		hantei = "私の勝ち";
	}
	/* 結果の設定を jQuery を用いて実施 */
	$("#kekka-anata").text(anata);
	$("#kekka-watashi").text(watashi);
	$("#kekka-hantei").text(hantei);
}
</script>
</head>
<body>
	<div class="container">
		<h1>じゃんけん<br>（jQuery版-1）</h1>
		<div class="senntaku">
			<div onclick="jyanken('グー');">グー</div>
			<div onclick="jyanken('チョキ');">チョキ</div>
			<div onclick="jyanken('パー');">パー</div>
		</div>
		<p class="kekka">
			あなたは、<span id="kekka-anata">？</span> で、私は、<span id="kekka-watashi">？</span> なので、<span id="kekka-hantei">？</span>です。
		</p>
	</div>
</body>
</html>

(3) jQuery 版（その2）

jQuery で作成した「じゃんけんアプリケーション」です。jQuery 版（その1）と比較してイベントの発生タイミング（グー、チョキ、パーのボタン押下タイミング）を jQuery を使用して取得するようにしました。

リロード　別画面で表示

ソースコード表示

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>じゃんけん</title>
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.container {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	border: 1px #fff solid;
}
.container h1 {
	font-size: 28px;
	text-align: center;
}
.senntaku {
	display: flex;
}
.senntaku div {
	width: calc(100% / 3);
	line-height: 100px;
	margin: 10px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	background: red;
	color: white;
	border-radius: 10px;
}
.senntaku div:hover {
	opacity: 0.6;
	cursor: pointer;
}
.kekka {
	padding: 0 20px;
	font-size: 1.4rem;
}
</style>
</head>
<body>
	<div class="container">
		<h1>じゃんけん<br>（jQuery版-2）</h1>
		<div class="senntaku">
			<div id="goo">グー</div>
			<div id="cyoki">チョキ</div>
			<div id="par">パー</div>
		</div>
		<p class="kekka">
			あなたは、<span id="kekka-anata">？</span> で、私は、<span id="kekka-watashi">？</span> なので、<span id="kekka-hantei">？</span>です。
		</p>
	</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
/* イベント発生タイミングを jQuery を用いて実施 */
$("#goo").click(function(){ jyanken("グー"); });
$("#cyoki").click(function(){ jyanken("チョキ"); });
$("#par").click(function(){ jyanken("パー"); });
function jyanken(anata) {
	let watashi;
	let hantei;
	const cnvRand = [ "グー", "グー", "チョキ", "パー" ];

	watashi = cnvRand[ Math.ceil(Math.random() * 3) ];
	if (anata == watashi) {
		hantei = "引き分け";
	}
	else if ((anata == "グー") && (watashi == "パー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "グー") && (watashi == "チョキ")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "グー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "パー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "グー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "チョキ")) {
		hantei = "私の勝ち";
	}
	$("#kekka-anata").text(anata);
	$("#kekka-watashi").text(watashi);
	$("#kekka-hantei").text(hantei);
}
</script>
</body>
</html>

(4) jQuery 版（その3）

jQuery で作成した「じゃんけんアプリケーション」です。jQuery 版（その2）と比較してイベントの発生タイミング（グー、チョキ、パーのボタン押下タイミング）の取得を統合しました。

リロード　別画面で表示

ソースコード表示

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>じゃんけん</title>
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.container {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	border: 1px #fff solid;
}
.container h1 {
	font-size: 28px;
	text-align: center;
}
.senntaku {
	display: flex;
}
.senntaku div {
	width: calc(100% / 3);
	line-height: 100px;
	margin: 10px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	background: red;
	color: white;
	border-radius: 10px;
}
.senntaku div:hover {
	opacity: 0.6;
	cursor: pointer;
}
.kekka {
	padding: 0 20px;
	font-size: 1.4rem;
}
</style>
</head>
<body>
	<div class="container">
		<h1>じゃんけん<br>（jQuery版-3）</h1>
		<div class="senntaku">
			<div>グー</div>
			<div>チョキ</div>
			<div>パー</div>
		</div>
		<p class="kekka">
			あなたは、<span id="kekka-anata">？</span> で、私は、<span id="kekka-watashi">？</span> なので、<span id="kekka-hantei">？</span>です。
		</p>
	</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
/* イベント発生タイミングを統合し jQuery を用いて実施 */
$("div.senntaku div").click(function(){ jyanken($(this).text()); });
function jyanken(anata) {
	let watashi;
	let hantei;
	const cnvRand = [ "グー", "グー", "チョキ", "パー" ];

	watashi = cnvRand[ Math.ceil(Math.random() * 3) ];
	if (anata == watashi) {
		hantei = "引き分け";
	}
	else if ((anata == "グー") && (watashi == "パー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "グー") && (watashi == "チョキ")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "グー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "パー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "グー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "チョキ")) {
		hantei = "私の勝ち";
	}
	$("#kekka-anata").text(anata);
	$("#kekka-watashi").text(watashi);
	$("#kekka-hantei").text(hantei);
}
</script>
</body>
</html>

(5) jQuery 版（その4）

jQuery で作成した「じゃんけんアプリケーション」です。jQuery 版（その3）と比較して結果表示部分にフェードイン効果を加えました。

リロード　別画面で表示

ソースコード表示

ソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>じゃんけん</title>
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.container {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	border: 1px #fff solid;
}
.container h1 {
	font-size: 28px;
	text-align: center;
}
.senntaku {
	display: flex;
}
.senntaku div {
	width: calc(100% / 3);
	line-height: 100px;
	margin: 10px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	background: red;
	color: white;
	border-radius: 10px;
}
.senntaku div:hover {
	opacity: 0.6;
	cursor: pointer;
}
.kekka {
	padding: 0 20px;
	font-size: 1.4rem;
}
</style>
</head>
<body>
	<div class="container">
		<h1>じゃんけん<br>（jQuery版-4）</h1>
		<div class="senntaku">
			<div>グー</div>
			<div>チョキ</div>
			<div>パー</div>
		</div>
		<p class="kekka">
			あなたは、<span id="kekka-anata">？</span> で、私は、<span id="kekka-watashi">？</span> なので、<span id="kekka-hantei">？</span>です。
		</p>
	</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("div.senntaku div").click(function(){ jyanken($(this).text()); });
function jyanken(anata) {
	let watashi;
	let hantei;
	const cnvRand = [ "グー", "グー", "チョキ", "パー" ];

	watashi = cnvRand[ Math.ceil(Math.random() * 3) ];
	if (anata == watashi) {
		hantei = "引き分け";
	}
	else if ((anata == "グー") && (watashi == "パー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "グー") && (watashi == "チョキ")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "グー")) {
		hantei = "私の勝ち";
	}
	else if ((anata == "チョキ") && (watashi == "パー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "グー")) {
		hantei = "あなたの勝ち";
	}
	else if ((anata == "パー") && (watashi == "チョキ")) {
		hantei = "私の勝ち";
	}
	$("#kekka-anata").text(anata);
	$("#kekka-watashi").text(watashi);
	$("#kekka-hantei").text(hantei);
	/* 結果表示をフェードイン */
	$(".kekka").hide();
	$(".kekka").fadeIn(1500);

}
</script>
</body>
</html>

(6) PHP 版（参考）

PHP（サーバーサイドスクリプト）で作成した「じゃんけんアプリケーション」です。他の処理と比較するために参考として掲載します。

リロード　別画面で表示

ソースコード表示

ソースコード


<?php

const cnvRand = [ "グー", "チョキ", "パー" ];

if ((isset($_POST["goo"]) && $_POST["goo"])) {
	$anata = "グー";
}
else if ((isset($_POST["cyoki"]) && $_POST["cyoki"])) {
	$anata = "チョキ";
}
else if ((isset($_POST["par"]) && $_POST["par"])) {
	$anata = "パー";
}
else {
	$anata = "";
}

if ($anata == "") {
	$anata = "？";
	$watashi = "？";
	$hantei = "？";
}
else {
	$watashi = cnvRand[rand(0, 2)];
	if ($anata == $watashi) {
		$hantei = "引き分け";
	}
	else if (($anata == "グー") && ($watashi == "パー")) {
		$hantei = "私の勝ち";
	}
	else if (($anata == "グー") && ($watashi == "チョキ")) {
		$hantei = "あなたの勝ち";
	}
	else if (($anata == "チョキ") && ($watashi == "グー")) {
		$hantei = "私の勝ち";
	}
	else if (($anata == "チョキ") && ($watashi == "パー")) {
		$hantei = "あなたの勝ち";
	}
	else if (($anata == "パー") && ($watashi == "グー")) {
		$hantei = "あなたの勝ち";
	}
	else if (($anata == "パー") && ($watashi == "チョキ")) {
		$hantei = "私の勝ち";
	}
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>じゃんけん</title>
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.container {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
	padding: 20px 0;
	border: 1px #fff solid;
}
.container h1 {
	font-size: 28px;
	text-align: center;
}
.senntaku {
	display: flex;
}
.senntaku button {
	width: calc(100% / 3);
	line-height: 100px;
	margin: 10px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	background: green;
	color: white;
	border: none;
	border-radius: 10px;
}
.senntaku button:hover {
	opacity: 0.6;
	cursor: pointer;
}
.kekka {
	padding: 0 20px;
	font-size: 1.4rem;
}
</style>
</head>
<body>
	<div class="container">
		<h1>じゃんけん<br>（PHP版）</h1>
		<form id="form" class="senntaku" method="post">
			<button name="goo" type="submit" value="グー">グー</button>
			<button name="cyoki" type="submit" value="チョキ">チョキ</button>
			<button name="par" type="submit" value="パー">パー</button>
		</form>
		<p class="kekka">
			あなたは、<?php echo $anata; ?> で、私は、<?php echo $watashi; ?> なので、<?php echo $hantei; ?>です。
		</p>
	</div>
</body>
</html>

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 のコード体系を採用しています。
文字列内に特殊な文字を記述する場合は、エスケープシーケンスとして記述する必要があります。エスケープシーケンスは、バックスラッシュと特定の文字を組み合わせて記述します。

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

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

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

文字列のアクセス例


// 文字列1 と文字列2 を結合し変数に格納
const 変数 = 文字列1 + 文字列2;

// 文字列の文字数を変数に格納
const 変数 = 文字列.length;

// 文字列の先頭から検索文字列を検索し最初に現れた位置（0 から始まるインデックス値）を変数に格納
// 検索文字列がみつからない場合は、-1 が返却されます
const 変数 = 文字列.indexOf(検索文字列);

// 文字列の末尾から検索文字列を検索し最初に現れた位置（0 から始まるインデックス値）を変数に格納
// 検索文字列がみつからない場合は、-1 が返却されます
const 変数 = 文字列.lastIndexOf(検索文字列);

// 文字列内で最初に現れた検索文字列を置換文字列に置き換えて変数に格納
const 変数 = 文字列.replace(検索文字列, 置換文字列);

// 文字列内の全ての検索文字列を置換文字列に置き換えて変数に格納
const 変数 = 文字列.replaceAll(検索文字列, 置換文字列);

// 文字列の先頭が検索文字かの真偽値（true/false）を変数に格納
const 変数 = 文字列.startsWith(検索文字列);

// 文字列の末尾が検索文字かの真偽値（true/false）を変数に格納
const 変数 = 文字列.endsWith(検索文字列);

// 文字列に検索文字が含まれているかの真偽値を変数に格納
const 変数 = 文字列.includes(検索文字列);

// 配列から指定範囲の要素を取り出し
// 開始文字位置は、0 から始まり、終了文字位置は、文字位置 + 1 を指定します
// 終了文字位置を省略すると末尾が終了位置になります
// 開始文字位置、終了文字位置にマイナス値を指定すると末尾から数えた位置になります
// 第一引数が第二引数より大きい場合は、空文字が返却されます
const オブジェクト名 = オブジェクト名.slice(開始文字位置, 終了文字位置);

// 配列から指定範囲の要素を取り出し
// 開始文字位置は、0 から始まり、終了文字位置は、文字位置 + 1 を指定します
// 終了文字位置を省略すると末尾が終了位置になります
// 開始文字位置、終了文字位置にマイナス値を指定すると 0 として扱われます
// 第一引数が第二引数より大きい場合は、第一引数と第二引数をひっくり返して処理します
const オブジェクト名 = オブジェクト名.substring(開始文字位置, 終了文字位置);

// 配列から指定範囲の要素を取り出し
// 開始文字位置は、0 から始まります
// 文字数を省略すると末尾までが対象になります
const オブジェクト名 = オブジェクト名.substr(開始文字位置, 文字数);

// 文字列からインデックス値の位置の文字を取り出し変換値に変換し変数に格納
// charCodeAt は、インデックス値の文字コードを取得します
// toString は、変換値に変換します
// 変換値は、16 進数に変換する時は 16 を指定し、変換値を省略すると 10 進数になります
const 変数 = 文字列.charCodeAt(インデックス値).toString(変換値);

// 文字コードを文字列に変換し変数に格納
const 変数 = String.fromCharCode(文字コード1, 文字コード2, 文字コード3);

// 文字列を区切り文字で分解し配列をオブジェクト名に格納
// 区切り文字に正規表現で「/\s+/」と指定すると 1文字以上のスペースが区切り文字になります
const オブジェクト名 = 文字列.split(区切り文字);

// オブジェクト名の配列要素を結合文字で結合し変数に格納
const 変数 = オブジェクト名.join(結合文字);

(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を指定し、値にはプリミティブ型の値やオブジェクトなどを指定することができます。


const オブジェクト名 = {
	キー名 : 値,
	キー名 : 値,
	キー名 : 値
};

const 変数名 = オブジェクト名.キー名;		// プロパティの参照（ドット参照）
const 変数名 = オブジェクト名["キー名"] 	// プロパティの参照（ブラケット参照）
オブジェクト名.キー名 = 値; 				// オブジェクトに項目を追加
delete オブジェクト名.キー名;				// オブジェクトから項目を削除
const bool = "キー名" in オブジェクト名;	// プロパティの存在確認（true / falseが返却）

オブジェクトリテラルの使用例


const obj = {
	"key1" : "value1",
	"key2" : "value2",
	"key3" : "value3"
};

const value1 = obj.key1;		// プロパティの参照（"value1" が返却）
const value2 = obj["key2"]; 	// プロパティの参照（"value2" が返却）
obj.key4 = "value4";			// オブジェクトに "key4" : "value4" を追加
delete obj.key1;				// オブジェクトから "key1" を削除
const bool = "key3" in obj;		// プロパティの存在確認（true が返却）

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

(2) 配列リテラル

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


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

配列リテラルのアクセス例


// 要素数の参照
const 要素数 = オブジェクト名.length;

// 要素数の設定
オブジェクト名.length = 要素数;

// 配列の末尾に要素を追加
// 追加後の配列の length が返却されます
const 変数名 = オブジェクト名.push(値); 

// 配列の末尾から要素を削除
// 削除した末尾の値が返却されます
const 変数名 = オブジェクト名.pop();

// 配列の先頭に要素を追加
// 追加後の配列の length が返却されます
const 変数名 = オブジェクト名.unshift(値);

// 配列の先頭から要素を削除
// 削除した先頭の値が返却されます
const 変数名 = オブジェクト名.shift();

// 配列を反転
// 反転した配列が返却されます
const オブジェクト名 = オブジェクト名.reverse();

// 配列を UTF-16 コードの昇順ソート
// ソートした配列が返却されます
const オブジェクト名 = オブジェクト名.sort();

// オブジェクトが配列かの判定
// true または false が返却されます
const 真偽値名 = Array.isArray(オブジェクト名); 

// 指定したインデックスの位置に要素が存在しているかの判定
// true または false が返却されます
const 真偽値名 = オブジェクト名.hasOwnProperty(インデックス値);

// 配列の先頭から検索値を検索しインデックスを返却
// 対象がない時は -1 が返却されます
const インデックス値名 = オブジェクト名.indexOf(検索値);

// 配列の最終から検索値を検索しインデックスを返却
// 対象がない時は -1 が返却されます
const インデックス値名 = オブジェクト名.lastIndexOf(検索値);

// 配列のインデックス値から要素数分の要素を削除
// 削除した分は詰められ、削除した要素を含む配列が返却されます
const オブジェクト名 = オブジェクト名.splice(インデックス値, 要素数);

// 配列のインデックス値から要素数の要素を削除し追加する要素を追加
オブジェクト名.splice(インデックス値, 要素数, ...追加する要素);

// 配列から指定範囲の要素を取り出し
// 開始インデックス値は、0 からはじまり、終了インデックス値を省略すると末尾が終了位置になります
// 開始インデックス位置にマイナス値を指定すると末尾から数えた位置になります
const オブジェクト名 = オブジェクト名.slice(開始インデックス値, 終了インデックス値);

// オブジェクト名2とオブジェクト名3を結合して、新しいオブジェクト名1を生成
// オブジェクト名3は、配列だけでなく、任意の値でも指定可能です
const オブジェクト名1 = オブジェクト名2.concat(オブジェクト名3);

// 配列生成時にオブジェクト名2を指定した場所に展開して、新しいオブジェクト名1を生成
const オブジェクト名1 = [値, 値, ...オブジェクト名2, 値, 値];

// 配列の要素を先頭から順にコールバック関数に渡し反復処理を実行
オブジェクト名.forEach((値, インデックス値, オブジェクト値) => {
	// 引数に値、インデックス値、オブジェクト値を設定しコールバック関数を呼び出し
	// 値には、配列の値を設定
	// インデックス値には、値に該当するインデックス値を設定（省略可）
	// オブジェクト値には、対象のオブジェクトを設定（省略可）
});

// 配列の要素を先頭から順にコールバック関数に渡し反復処理を実行（上記と意味は同じ）
オブジェクト名.forEach(function(値, インデックス値, オブジェクト値) {
	// コールバック関数処理
	// 引数に値、インデックス値、オブジェクト値を設定しコールバック関数を呼び出し
	// 値には、配列の値を設定
	// インデックス値には、値に該当するインデックス値を設定（省略可）
	// オブジェクト値には、対象のオブジェクトを設定（省略可）
});

// 配列の要素を先頭から順にコールバック関数に渡しコールバック関数の返却値で新しい配列を生成
オブジェクト名 = オブジェクト名.map((値, インデックス値, オブジェクト値) => {
	// コールバック関数処理
	// 引数に値、インデックス値、オブジェクト値を設定しコールバック関数を呼び出し
	// 値には、配列の値を設定
	// インデックス値には、値に該当するインデックス値を設定（省略可）
	// オブジェクト値には、対象のオブジェクトを設定（省略可）
	return 返却値;
});

// 配列の要素を先頭から順にコールバック関数に渡し true を返却した要素だけの新しい配列を生成
オブジェクト名 = オブジェクト名.filter((値, インデックス値, オブジェクト値) => {
	// コールバック関数処理
	// 引数に値、インデックス値、オブジェクト値を設定しコールバック関数を呼び出し
	// 値には、配列の値を設定
	// インデックス値には、値に該当するインデックス値を設定（省略可）
	// オブジェクト値には、対象のオブジェクトを設定（省略可）
	return 返却値;			// true を返却した要素だけを新しい配列に設定
});

// 配列の要素を先頭から順にコールバック関数に渡し計算した累積値を返却
変数 = オブジェクト名.reduce((累積値, 値, インデックス値, オブジェクト値) => {
	// コールバック関数処理
	// 引数に累積値、値、インデックス値、オブジェクト値を設定しコールバック関数を呼び出し
	// 累積値には、計算した累積値を設定
	// 値には、配列の値を設定
	// インデックス値には、値に該当するインデックス値を設定（省略可）
	// オブジェクト値には、対象のオブジェクトを設定（省略可）
	return 計算した累積値;
}, 累積値の初期値);

// 2次元配列の定義と参照
const オブジェクト名 = [ [値, 値, 値], [値, 値, 値], [値, 値, 値] ];
const 変数名 = オブジェクト名[インデックス値][インデックス値];

配列リテラルの使用例


const objArray = ["value1", "value2", "value3"];

count = objArray.length;				// 配列要素数の取得（3）
value1 = objArray[0];					// 要素の取得（"value1"）

配列オブジェクトには、0 から始まるインデックス（添字）に対応した値を保持しています。
存在しないインデックスをアクセスした場合は、undefined が返却されます。undefined は、要素数を超えたアクセスの場合以外に、配列の途中で値が設定されていない項目にアクセスした場合にも返却されます。
push、pop、unshift、shift、reverse、sort、splice は、破壊的メソッドです。

(3) 正規表現リテラル

正規表現リテラルは、正規表現値をリテラルで定義します。正規表現リテラルの記述は、スラッシュ（/）で正規表現のパターン文字列を囲んで記述します。正規表現のパターン内では、+ やバックスラッシュ（\）からはじまる特殊文字が特別な意味を持ちますが、ここでは説明を省略します。


const オブジェクト名 = /正規表現のパターン文字列/;

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


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) {
	if (条件式7) {
		// 条件式6と条件式7が、どちらも真の時の処理
	}
}

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


let a = 10;
if (a > 5) {
	a = a - 5;		// こちらを実行する
}
else {
	a = a - 5;		// こちらは実行しない
}

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

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


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

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


let value1 = "c";
let value2;
switch(value1) {
	case "a":
		value2 = 1;
		break;
	case "b":
		value2 = 2;
		break;
	case "c":		// value1 には、"c" が代入されているのでこれが該当する
		value2 = 3;
		break;
	default:
		value2 = 9;
		break;
}

(3) 反復処理（while）

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


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

反復処理（while）の使用例


// a を 0、i を 1 で初期化し、i が 10 以下の間、i を +1 して繰り返す
let a = 0;
let i = 1;
while (i <= 10) {
	a = a + i;		// 1 から 10 までを加算
	i++;
}

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

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

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


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

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


// a を 0、i を 1 で初期化し、i が 10 以下の間、i を +1 して繰り返す
let a = 0;
let i = 1;
do {
	a = a + i;		// 1 から 10 までを加算
	i++;
} while (i <= 10);

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

(5) 反復処理（for）

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


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

反復処理（for）の使用例


let a = 0;
// i を 1 で初期化し、i が 10 以下の間、i を +1 して繰り返す
for (i = 1; i <= 10; i++) {
	a = a + i;		// 1 から 10 までを加算
}

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

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

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


// オブジェクトに格納されているプロパティの数分の繰り返しを実施
for (プロパティ in オブジェクト) {
	// 反復内の処理
}

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


const obj = {
	"a" : 1,
	"b" : 2,
	"c" : 3
};
for (const key in obj) {		// オブジェクトに格納されているキーを順に key に設定
	const value = obj[key];		// オブジェクトの key に該当する値を value に設定
}

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

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


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

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


let s = "";
const array = ["a", "b", "c"];
for (const value of array) {	// 配列オブジェクトに格納されている値を順に value に設定
	s = s + value;				// "abc" を生成
}

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

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 関数の戻り値;
}

関数のアクセス例


// 配列オブジェクトを展開して関数を呼び出し
function 関数名(仮引数1, 仮引数2, 仮引数3) {
	// 関数内の処理
	return 関数の戻り値;
}

const 配列オブジェクト = [値1, 値2, 値3];
const 関数の結果 = 関数名(...配列オブジェクト);		// これは、下記の記述方法と同じ意味
const 関数の結果 = 関数名(配列オブジェクト[0], 配列オブジェクト[1], 配列オブジェクト[2] );

// 関数式での関数宣言（関数を値として格納）
const 変数名 = function(仮引数1, 仮引数2) {
	// 関数内の処理
	return 関数の戻り値;
}

関数の使用例


// 指定された値を 2倍して返却する関数の宣言
function double(num) {
	return num * 2;
}

const ans = double(10);		// 10 を 2倍して ans に格納

L12.2.8 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.9 JavaScript の記述例

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

記述例


// 文字列の書き出し
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);				// 「div = $div[0]」でも可
value2.innerHTML = "書き換えコンテンツ";

L12.2.10 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>

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

リロード

L12.3 jQuery 基本仕様

L12.3.1 事前準備

(1) jQuery のダウンロードと読み込み

jQuery を使用する場合は、jQuery の読み込みが必要です。jQuery の読み込みは、head タグ内または body タグ内に記述することができますが jQuery を使用したスクリプト（JavaScript）の前に記述する必要があります。
jQuery の読み込みは、jQuery をダウンロードして自サイト内に配置する方法と CDN を使用する方法があります。CDN を使用することでダウンロードの手間を減らすと同時に自サーバーの負荷軽減や読み込み速度の高速化を行うことができます。
jQuery をダウンロードする場合は、以下の手順で行ってください。
1. Query の公式サイト（jQuery（英語サイト）（https://jquery.com/））を表示します。
2. 「Download jQuery」をクリックします。
3. 「Download the compressed, production jQuery x.x.x」を右クリックして「名前を付けてリンク先を保存...」を指定します。
jQuery には、compressed（圧縮版）と uncompressed（非圧縮版）があります。処理内容は同じですが以下の違いがあります。
- compressed（圧縮版）
  - コメントやスペース、タブなどを取り除いてファイルサイズを最小限にしたものです。
  - ファイルサイズが小さいのでページ読み込みの負荷が減少されます。
- uncompressed（非圧縮版）
  - コメントやスペース、タブなどが入っておりソースコードを調べる（参照する）のに適しています。
  - ファイルサイズが大きいいのでページ読み込みの負荷がかかります。

(2) jQuery 読み込み例（自サイト内に配置）

jQuery をダウンロードして自サイト内に配置する場合は、以下の記述を行います。

一般的に外部の JavaScript ファイルは、「js」フォルダ配下に格納します。
script タグは、head タグ内に記述する場合と body タグ内に記述する場合があります。
機能指示用 JavaScript は、外部ファイルに記述されることもあります。

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>（Webサイトタイトル）</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/（必要に応じて関連ライブラリィ用CSSを指定）" type="text/css">

<!-- 記述例 [1]：head タグ内に記述 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/（必要に応じて関連ライブラリィを指定）"></script>
<script>
（機能指示用 JavaScript を記述）
</script>
</head>

<body>
（表示する文書タグを記述）

<!-- 記述例 [2]：bodyタグ内に記述 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/（必要に応じて関連ライブラリィを指定）"></script>
<script>
（機能指示用 JavaScript を記述）
</script>
</body>
</html>

(3) jQuery 読み込み例（CDN を使用）

CDN を使用する場合は、以下の記述を行います。本例では、Google の CDN を使用しています。

script タグは、head タグ内に記述する場合と body タグ内に記述する場合があります。
機能指示用 JavaScript は、外部ファイルに記述されることもあります。

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>（Webサイトタイトル）</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/（必要に応じて関連ライブラリィ用CSSを指定）" type="text/css">

<!-- 記述例 [1]：head タグ内に記述 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/（必要に応じて関連ライブラリィを指定）"></script>
<script>
（機能指示用 JavaScript を記述）
</script>
</head>

<body>
（表示する文書タグを記述）

<!-- 記述例 [2]：bodyタグ内に記述 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/（必要に応じて関連ライブラリィを指定）"></script>
<script>
（機能指示用 JavaScript を記述）
</script>
</body>
</html>

L12.3.2 jQuery 記述型式

(1) jQuery の呼び出し

jQuery を呼び出し時は、JavaScript 内で以下の記述を行います。


// jQuery の記述型式
$(...)
jQuery(...) 							// 上記と同じ意味

// ... の部分は記述するものによって意味が異なります。
$(セレクタ, コンテキスト)
$(エレメント)
$(配列エレメント)
$(オブジェクト)
$(jQuery オブジェクト)
$()

// jQuery 記述の例
// セレクタ（対象要素）にイベント（何か）があったら アクション（処理）する
$(セレクタ).on("イベント", (function() { アクション });
$(セレクタ).イベント(function() { アクション });

// #id1 がクリックされたら #id2 の "CSS に color: red" を指定
$("#id1").on("click", function(){ $("#id2").css("color", "red"); });
$("#id1").click(function(){ $("#id2").css("color", "red"); });

L12.3.3 セレクタ

主要なセレクタの記述方法は、以下の通りです。

記述型式	使用例	意味
全ての要素	$("*")	全ての要素
型指定	$("div")	div 要素
id 指定	$("#id1")	#id1 の要素
class 指定	$(".class1")	.class1 の要素
子孫結合指定	$("#id1 div")	#id1 名配下の div 要素
直下の子指定	$("#id1 > div")	#id1 名直下の div 要素
最初の子指定	$("p:first-child")	最初の p 要素
最後の子指定	$("p:last-child")	最後の p 要素
n 番目の子指定	$("p:nth-child(2)")	2 番目の p 要素
属性指定1	$("a[href]")	href 属性が指定されている a 要素
属性指定2	$("[name='name1']")	name 属性が name1 の要素
属性指定3	$("[href='#fref1']")	href 属性が #ref1 の要素
属性指定4	$("[href!='#fref1']")	href 属性が #ref1 以外の要素
n 番目指定	$("p:eq(2)")	3 番目の p 要素（最初は 0）
奇数番目指定	$("tr:odd")	奇数番目の tr 要素
偶数番目指定	$("tr:even")	偶数番目の tr 要素
複数指定	$(".class1,.class2,.class3")	.class1 と .class2 と .class3 の要素

L12.3.4 トラバースメソッド

要素の複数選択や絞り込みを行うトラバースの記述方法は、以下の通りです。

記述型式	使用例	意味
親要素指定	$("#id1").parent()	#id1 の親要素
先祖要素指定	$("#id1").parents()	#id1 の先祖要素
もっとも近い先祖要素指定	$("li.class1").closest("ul")	.class1 が指定されている li のもっとも近い ul 要素
子要素指定	$(".class1").children("p")	.class1 の子要素の p 要素
小孫要素指定	$(".class1").find("p")	.class1 の子孫要素の p 要素
前の兄弟要素指定	$(".class1").prev()	.class1 の前の兄弟要素
後ろの兄弟要素指定	$(".class1").next()	.class1 の後ろの兄弟要素
前の全ての兄弟要素指定	$(".class1").prevAll()	.class1 の前の全ての兄弟要素
後ろの全ての兄弟要素指定	$(".class1").nextAll()	.class1 の後ろの全ての兄弟要素
合致する要素指定	$(".class1").filter(".class2")	.class1 の中から .class2 に合致する要素
合致しない要素指定	$(".class1").not(".class2")	.class1 の中から .class2 に合致しない要素
最初の要素指定	$(".class1").first()	.class1 の最初の要素
最後の要素指定	$(".class1").last()	.class1 の最後の要素
最初から n 番目の要素指定	$(".class1").eq(2)	.class1 の中で最初から 3 番目の要素（最初は 0）
最後から n 番目の要素指定	$(".class1").eq(-2)	.class1 の中で最後から 2 番目の要素（最後は -1）
指定範囲の要素指定	$(".class1").slice(0, 3)	.class1 の中の 0, 1, 2 番目の要素（最初は 0 ／最後は -1／第 2 引数は未満値を指定）
加えた要素指定	$(".class1").add(".class2")	.class1 に .class2 を加えた要素
操作する前の要素指定	$(".class1").next().css("color", "red").end().css("color", "blue")	.class1 の次の要素の文字色を赤、操作前の要素の文字色を青に設定（操作は .next() や .find() が対象）
合致する要素の検査	$(".class1").is(".class2")	.class1 の中に .class2 に合致する要素があるかを検査し true / false を返却

L12.3.5 イベント

イベント発生時の処理の記述方法は、以下の通りです。


要素.on(イベント名, セレクタ, データ, 関数)

イベント名は、処理するイベント種別を指定します。イベント種別の後ろにピリオド（.）を付けてネームスペースを指定することができます。以下は、主要なイベント種別です。

change
フォーム部品の状態に変化があった時

click
要素がクリックされた時

forcus
要素にフォーカスがあたった時

blur
要素のフォーカルが外れた時

load
ドキュメントが読み込まれた後

resize
ウィンドウサイズが変化した時

scroll
画面がスクロールした時

keypress
キーボードのキーが押されている時（継続的に発生）

keydown
キーボードのキーが押された時（最初だけ発生）

keyup
キーボードのキーが離された時

mousedown
マウスボタンが押された時

mouseup
マウスボタンが離された時

mouseenter
マウスが入ってきた時

mouseleave
マウスが外れた時

mousemove
要素内でマウスが移動された時

submit
フォームが送信された時

error
何らかのJavaScriptエラーが発生した時
セレクタは、要素の内でさらに指定した要素だけを絞り込む時に指定します。
データは、処理関数に任意のデータを渡したい時に指定します。
関数は、イベント発生時に処理する関数を指定します。関数には、イベント情報が格納されているオブジェクトが引数として渡されます。以下は、主要なイベントオブジェクト内容です。

obj.type
change や click などのイベント種別を示します。

obj.target
イベントが発生した要素を示します。イベントハンドラを設定した要素または子要素になります。this と obj.target を比較することで、イベントが要素で発生したか子要素で発生したかを識別することができます。

obj.data
イベント設定時に指定したデータを示します。

obj.pageX
マウスイベントが発生したページ上のX位置を示します。

obj.pageY
マウスイベントが発生したページ上のY位置を示します。

obj.which
キーボードイベントの場合はキーコードが、マウスイベントの場合はボタン種別（1：左ボタン、2：中ボタン、3：右ボタン）を示します。

obj.result
他のイベントハンドラから返却された値（undefined 以外のもの）し示します。

obj.namespace
イベントのネームスペースを示します。

obj.timeStamp
イベントの発生時刻を示します。時刻は、1970年1月1日0時0分0秒(GMT)からの秒数で示されます。

記述例


// ボタンがクリックされた場合の処理
$("button").on("click", function() {
	// ボタンがクリックされた時の処理
})

// ボタンにマウスが侵入したかクリックされた場合の処理
$("button").on("click mouseenter", function() {
	// ボタンにマウスが侵入したかクリックされた時の処理
})

// 処理関数にデータ渡す場合の処理（data プロパティで参照）
$("#one").on("click", {name: "太郎"}, showText);
$("#two").on("click", {name: "花子"}, showText);

function showText(e) {
	console.log(e.data.name + "です。");
}

// 子要素に発生するイベントの処理（下記の HTML を想定）
// 	<ul>
// 		<li>リスト1<li>
// 		<li>リスト2<li>
// 		<li>リスト3<li>
// 	</ul>
// ul に対する 1 つのイベントで済みます。
// li 要素の個数が動的に変化しても対応可能です。
$("ul").on("click", "li", function() {
	// li 要素がクリックされた時の処理
})

// オンマウス／オフマウスの処理
$("button").on({
	"mouseenter": function() {
		// マウスが入って来た時の処理
	},
	"mouseleave": function() {
		// マウスが離れていった時の処理
	}
})

// click イベント処理の削除
$("button").off("click");

L12.3.6 属性・値

HTML の属性や値の参照や設定を行う場合の記述方法は、以下の通りです。

要素.attr(属性): 属性の参照
要素.attr(属性, 値): 属性に値の設定
要素.attr(属性リスト): 複数属性に値の設定
要素.removeAttr(属性): 属性の削除（空白で区切って複数の指定可）
要素.prop(プロパティ): JavaScript プロパティの参照
要素.prop(プロパティ, 値): JavaScript プロパティの設定
要素.prop(プロパティリスト)): 複数 JavaScript プロパティの設定
要素.removeProp(プロパティ): JavaScript プロパティの削除
要素.html(値): HTML 文字列の参照・設定
要素.text(値): 文字列の参照・設定
要素.val(値): フォーム要素の参照・設定
要素.addClass(値): 要素にクラス名の追加
要素.removeClass(値): 要素からクラス名の削除
要素.hasClass(値): 要素にクラス名があるかの検査し true / false を返却
要素.toggleClass(値): 要素にクラス名がある場合は削除し、ない場合は追加

記述例


// 属性の値を参照
value1 = $("img.img1").attr("src");

// 属性に値を設定
$("img.img1").attr("src", "images/photo1.jpg");

// 複数の属性に値を設定
$("img.img1").attr({
	src: "images/photo1.jpg",
	width: "100",
	height: "100"
});

// 属性の削除
$("img.img1").removeAttr("width height");

// attr と prop の違い（href 属性）（以下の HTML を想定）
// 	<a id="id1" href="#jump1">Jump Label</a>
value1 = $("#id1").attr("href");		// "#jump1" を返却
value1 = $("#id1").prop("href");		// "http://sample.com/index.html#jump1" を返却

// attr と prop の違い（checked 属性）（以下の HTML を想定）
// 	<input id="id1" type="checkbox" checked>
value1 = $("#id1").attr("checked");		// "checked" を返却
value1 = $("#id1").prop("checked");		// true を返却

// HTML 文字列を参照（以下の HTML を想定）
// 	<p id="id1"><b>Text1</b></p>
value1 = $("#id1").html();				// "<b>Text1</b>" を返却

// HTML 文字列を設定（以下の HTML を想定）
// 	<p id="id1"><b>Text1</b></p>
$("#id1").html("<i>Text2</i>");			// "<p id="id1"><i>Text2</i></p>" に変更

// 文字列を参照（以下の HTML を想定）
// 	<p id="id1"><b>Text1</b></p>
value1 = $("#id1").text();				// "Text1" を返却

// 文字列を設定（以下の HTML を想定）
// 	<p id="id1"><b>Text1</b></p>
$("#id1").text("<i>Text2</i>");			// "<p id="id1">&lt;i&gt;Text2&lt;/i&gt;</p>" に変更

// フォーム要素の値の参照
value1 = $("input#id1").val();

// フォーム要素の値の設定
$("input#id1").val("value1");

// フォーム要素（checkbox、radio ボタン）の参照
value1 = $("input[name='color1']:checked").val();

// フォーム要素（checkbox、radio ボタン）の設定（配列を使用）
$("input[name='color1']").val(["Check1"]);

// クラス名の追加
$("#id1").addClass("class1");

// クラス名の削除
$("#id1").removeClass("class1");

// クラス名があるかの検査
value1 $("#id1").hasClass("class1");	// class1 がある場合は true ない場合は false を返却

// クラス名の設定の反転
$("#id1").toggleClass("class1");		// class1 がある場合は削除し、ない場合は追加

L12.3.7 スタイルシート

スタイルシートの参照や設定を行う場合の記述方法は、以下の通りです。

要素.css(プロパティ): CSS のプロパティの値を参照
要素.css(プロパティ, 値): CSS のプロパティに値を設定
要素.css(プロパティリスト): CSS の複数プロパティに値を設定
要素.width(): 要素の横幅（パディングを含まない）を参照
要素.width(値): 要素の横幅（パディングを含まない）を設定
要素.innerWidth(): 要素の横幅（パディングを含む）を参照
要素.innerWidth(値): 要素の横幅（パディングを含む）を設定
要素.outerWidth(): 要素の横幅（ボーダーを含む）を参照
要素.outerWidth(値): 要素の横幅（ボーダーを含む）を設定
要素.outerWidth(true): 要素の横幅（マージンを含む）を参照
要素.height(): 要素の高さ（パディングを含まない）を参照
要素.height(値): 要素の高さ（パディングを含まない）を設定
要素.innerHeight(): 要素の高さ（パディングを含む）を参照
要素.innerHeight(値): 要素の高さ（パディングを含む）を設定
要素.outerHeight(): 要素の高さ（ボーダーを含む）を参照
要素.outerHeight(値): 要素の高さ（ボーダーを含む）を設定
要素.outerHeight(true): 要素の高さ（マージンを含む）を参照
要素.offset(): 要素の画面上の縦位置、横位置を参照
要素.offset(値): 要素の画面上の縦位置、横位置を設定
要素.position(): 要素の親要素からの相対位置を参照
要素.scrollTop(): 要素の縦方向のスクロール位置を参照
要素.scrollTop(値): 要素の縦方向のスクロール位置を設定
要素.scrollLeft(): 要素の横方向のスクロール位置を参照
要素.scrollLeft(値): 要素の横方向のスクロール位置を設定

記述例


// CSS のプロパティの値の参照
value1 = $("#id1").css("color");		// #id1 の color プロパティの値を value1 に格納

// CSS のプロパティの値の設定
$("#id1").css("color", "red");			// #id1 の color プロパティに red を設定

// 要素の横幅（パディングを含まない）を参照
value1 = $("#id1").width();				// #id1 の横幅を value1 に格納

// 要素の横幅（パディングを含まない）を設定
$("#id1").width(200);

// 要素の横幅（パディングを含む）を参照
value1 = $("#id1").innerWidth();

// 要素の横幅（ボーダーを含む）を参照
value1 = $("#id1").outerWidth();

// 要素の横幅（マージンを含む）を参照
value1 = $("#id1").outerWidth(true);

// 要素の高さ（パディングを含まない）を参照
value1 = $("#id1").height();

// 要素の画面上の位置を参照
value1 = $("#id1").offset();			// #id1 の画面上の位置（value1.top：縦位置、value1.left：横位置）を参照

// 要素の画面上の位置を設定
$("#id1").offset({						// #id1 の画面上の位置（縦位置：200、横位置：100）を設定
	top: 200,
	left: 100
});

// 要素の親要素からの相対位置を参照
value1 = $("#id1").position();			// #id1 の親要素からの相対位置（value1.top：縦位置、value1.left：横位置）を参照

// 要素の縦方向のスクロール位置を参照
value1 = $("#id1").scrollTop();			// #id1 の縦方向のスクロール位置を参照

// 要素の横方向のスクロール位置を参照
value1 = $("#id1").scrollLeft();		// #id1 の横方向のスクロール位置を参照

L12.3.8 エフェクト

要素に効果を与える場合の記述方法は、以下の通りです。

要素.show([d][,e][,c]): 要素を表示にします。
要素.hide([d][,e][,c]): 要素を非表示にします。
要素.toggle([d][,e][,c]): 要素の表示／非表示を切り替えます。
要素.fadeIn([d][,e][,c]): 要素をフェードインします。
要素.fadeOut([d][,e][,c]): 要素をフェードアウトします。
要素.fadeTo(d, o[,e][,c]): 要素の透明度を徐々に変化させます。
要素.fadeToggle([d][,e][,c]): 要素がフェードインされていればフェードアウトし、フェードアウトされていればフェードインします。
要素.slideUp([d][,e][,c]): 要素をスライドアップします。
要素.slideDown([d][,e][,c]): 要素をスライドダウンします。
要素.slideToggle([d][,e][,c]): 要素がスライドアップされていればスライドダウンし、スライドダウンされていればスライドアップします。
要素.animete(p[,d][,e][,c]): 要素にアニメーション効果を適用します。

引数の意味は、以下の通りです。

カッコ（[...]）の引数は、カンマ（,）を含めて省略可能です。
d（duration）は、変化に要する時間をミリ秒単位で指定します。"fast"、"normal"、"slow" での指定も可能です。省略時は、400ms になります。
e（easing）は、変化速度の種別を指定します。"linear" はリニア、"swing" は最初ゆっくりで後半は早く変化します。省略時には "swing" になります。
c（complete）は、アニメーション完了時に呼び出す関数を指定します。
o（opacity）は、透明度を指定します。1.0 で完全表示、0.0 で完全透明を指定します。
p（properties）は、アニメーション完了後のプロパティを指定します。
d（duration）、e（easing）、c（complete）は、リスト型式の引数で指定することも可能であり、この時は、以下の値も指定可能です。

queue
アニメーション効果の開始をキューイングするか否かを true / false で指定します。

specialEasing
e（easing）をプロパティ別に指定します。

step
アニメーション実行中に定期的に呼び出される関数を指定します。

progress
アニメーション実行中に定期的に呼び出される関数を指定します。

記述例


// 要素を表示
$("#id1").show();

// 要素を非表示
$("#id1").hide();

// 要素の表示／非表示を切り替え
$("#id1").toggle();

// 要素をフェードイン
$("#id1").fadeIn();

// 要素をフェードアウト
$("#id1").fadeOut();

// 要素の透明度を変化
$("#id1").fadeTo("normal", 0.2);

// 要素のフェードイン／フェードアウトを切り替え
$("#id1").fadeToggle();

// 要素をスライドアップ
$("#id1").slideUp();

// 要素をスライドダウン
$("#id1").slideDown();

// 要素のスライドアップ／スライドダウンを切り替え
$("#id1").slideToggle();

// 要素のアニメーション効果を実施
$("#id1").animate({
	opacity: 0,
	width: "200px",
	height: "100px"
});

// 要素のアニメーション効果を実施（相対サイズ指定）
$("#id1").animate({
	opacity: 0,
	width: "+=100",
	height: "-=50"
});

// 要素のアニメーション効果を実施（基本属性を配列エレメントで指定）
$("#id1").animate({
	opacity: 0,
	width: "200px",
	height: "100px"
}, {
	duration: 1000,
	easing: 'linear',
	complete: function() { alert("Complete!");
});

L12.3.9 DOM 操作

DOM（Document Object Model）操作の記述方法は、以下の通りです。

要素.prepend(c[,c]): 要素の先頭にコンテンツ（c）を追加します。
要素.prependTo(t): 要素をターゲット（t）の先頭に追加します。（上記と同じ）
要素.append(c[,c]): 要素の末尾にコンテンツ（c）を追加します。
要素.appendTo(t): 要素をターゲット（t）の末尾に追加します。（上記と同じ）
要素.before(c[,c]): 要素の直前にコンテンツ（c）を追加します。
要素.insertBefore(t): 要素をターゲット（t）の直前に追加します。（上記と同じ）
要素.after(c[,c]): 要素の直後にコンテンツ（c）を追加します。
要素.insertAfter(t): 要素をターゲット（t）の直後に追加します。（上記と同じ）
要素.wrap(w): 要素をラッピングエレメント（w）で囲みます。
要素.wrapAll(w): 要素集合をラッピングエレメント（w）で囲みます。
要素.wrapInner(w): 要素のコンテンツをラッピングエレメント（w）で囲みます。
要素.replaceAll(t): ターゲット（t）を要素で置き換えます。
要素.replaceWith(c): 要素をコンテンツ（c）で置き換えます。
要素.remove([s]): 要素を削除します。セレクタ（s）に ":contains('文字列')" を指定すると文字列を含む要素だけを削除することができます。
要素.detach([s]): 要素を削除します。セレクタ（s）に ":contains('文字列')" を指定すると文字列を含む要素だけを削除することができます。remove は完全に削除されますが detach は、jQuery の要素として残り、再度挿入することができます。
要素.empty(): 要素の子孫要素をすべて削除します。
要素.unwrap(): 要素の親要素を削除します。

引数の意味は、以下の通りです。

カッコ（[...]）の引数は、カンマ（,）を含めて省略可能です。
c（Content／コンテンツ）は、"<b>コンテンツ</b>" のように記述します。
t（Target／ターゲット）は、"div" のように記述します。
w（Wrapping Element／ラッピングエレメント）は、"<div class='box' />" のように記述します。
s（Selector／セレクタ）は、"p" のように記述します。

記述例


// 要素の先頭にコンテンツを追加
// <p>...</p> → <p><b>コンテンツ</b>...</p>
$("p").prepend("<b>コンテンツ</b>");
$("<b>コンテンツ</b>").prependTo("p");

// 要素の末尾にコンテンツを追加
// <p>...</p> → <p>...<b>コンテンツ</b></p>
$("p").append("<b>コンテンツ</b>");
$("<b>コンテンツ</b>").appendTo("p");

// 要素の直前にコンテンツを追加
// <p>...</p> → <b>コンテンツ</b><p>...</p>
$("p").before("<b>コンテンツ</b>");
$("<b>コンテンツ</b>").insertBefore("p");

// 要素の直後にコンテンツを追加
// <p>...</p> → <p>...</p><b>コンテンツ</b>
$("p").after("<b>コンテンツ</b>");
$("<b>コンテンツ</b>").insertAfter("p");

// 要素をラッピングエレメントで囲む
// <p>...</p><p>...</p> → 
// <div class='class1'><p>...</p></div><div class='class1'><p>...</p></div>
$("p").wrap("<div class='class1' />");

// 要素集合をラッピングエレメントで囲む
// <p>...</p><p>...</p> → 
// <div class='class1'><p>...</p><p>...</p></div>
$("p").wrapAll("<div class='class1' />");

// 要素のコンテンツをラッピングエレメントで囲む
// <p>...</p> → <p><b class='class1'>...</b></p>
$("p").wrapInner("<b class='class1' />");

// ターゲットを要素で置き換え
// <div class='class1'>...</div> → <div class='class2'>コンテンツ</div>
$("<div class='class2'>コンテンツ</div>").replaceAll("div.class1");
$("div.class1").replaceWith("<div class='class2'>コンテンツ</div>");

// 要素の中からセレクタに合致する要素を削除
// セレクタを省略すると、すべての要素を削除します。
// remove は、削除に対して、detach は、jQuery 要素として残ります
// <div><p>...</p></div> → （削除）
$("div").remove();
$("div").detach();

// 要素の子孫要素をすべて削除
// <div><p><b>...</b></p></div> → <div></div>
$("div").empty();

// 要素の親要素を削除
// セレクタを省略すると、すべての要素を削除します
// <div><p>...</p></div> → <p>...</p>
$("p").unwrap("div");

L12.3.10 その他

その他の機能の記述方法は、以下の通りです。

要素.each(関数): 要素群に対して関数を実行します。
要素.get(インデックス): jQuery 要素群を JavaScript 要素群に変換します。
要素.toArray(): jQuery 要素群を JavaScript 配列に変換します。
要素.index(): 要素群の中でセレクタに合致する要素のインデックスを返します。
要素.data(値): 要素にデータ（key: value）を設定します。
要素.removeData(): 要素のデータを削除します。

記述例


// 要素群に対して関数の実行
$("div").each(function() {
	// 要素単位の処理
	alert($(this).html());
});

// jQuery 要素群を JavaScript 要素群に変換
obj = $("div").get();					// すべての要素を変換
obj = $("div").toArray();				// すべての要素を変換
obj = $("div").get(index);				// 指定した位置（0から）の要素を変換

// 要素のインデックス値を返却
value1 = $("#id1").index();				// インデックス値は 0 からの値

// 要素にデータ（key=data）を設定
$("#id1").data("key1", "data1");

// 要素にデータ（key=data）を設定（複数）
$("#id1").data({ "key1": "data1", "key2": "data2" });

// 要素のデータ（key=data）から値の取得
value1 = $("#id1").data("key1");		// "data1"

// 要素のデータ（key=data）からすべての値の取得
value1 = $("#id1").data();				// { "key1": "data1", "key2": "data2" }

// 要素からデータを削除
$("#id1").removeData("key1");

// 要素からデータを削除（複数）
$("#id1").removeData("key1", "key2");

// 要素からデータを削除（全て）
$("#id1").removeData();

L12.3.11 ユーティリティ

ユーティリティの機能の記述方法は、以下の通りです。

$.data(エレメント, キー, 値): エレメントにデータ（key: data）を設定します。
$.data(エレメント,): エレメントのデータ（key: data）を参照します。
$.trim(文字列): 文字列の前後のホワイトスペースを除去します。
$.parseJSON(値): 値を JSON と解釈してオブジェクトに変換します。
$.parseXML(値): 値を XML と解釈してオブジェクトに変換します。
$.parseHTML(値): 値を HTML と解釈して配列に変換します。
$.each(値, 関数): 値（配列やオブジェクト）の属性をひとつづつ処理します。
$.grep(値, 関数): 値（配列）から条件に合致するものを抜き出します。
$.unique(値): 値（DOM 要素の配列）から重複した要素を排除しソートします。

記述例


// document エレメントにデータ（key: data）を設定
$.data(docement, "key", "data");

// document エレメントにデータ（key）を参照
value1 = $.data(docement, "key");

// 文字列の前後のホワイトスペースを除去
value1 = $.trim("     abc     ");

// JSON のオブジェクトに変換・参照
// 変数名と値はダブルクォーテーション（"）で囲む必要あり
value1 = '{ "name":"tarou", "age":"20" }';
obj1 = $.parseJSON(value1);
value2 = obj1.name;
value3 = obj1.age;

// XML のオブジェクトに変換・参照
value1 = '<xml><name>tarou</name><age>20</age></xml>';
obj1 = $.parseXML(value1);
value2 = $(obj1).find("name").text();
value3 = $(obj1).find("age").text();

// HTML の配列に変換・参照
value1 = '<div class="name">tarou</div><div class="age">20</div>';
html1 = $.parseHTML(value1);
value2 = html[0];
value3 = html[1];

// 配列をひとつずつ処理
var array = [ "Red", "Green", "Blue" ];
$.each(array, function(index, val) {
	// 配列の項目単位の処理
	// index に配列のインデックス値、val に配列の値
	console.log(index + ":" + val);		// 0:Red, 1:Green, 2:Blue
});

// オブジェクトの属性をひとつずつ処理
var params = { height: "100px", width: "100px" };
$.each(params, function(key, val) {
	// オブジェクトの属性単位の処理
	// key に属性の key、val に属性の値
	console.log(key + "=" + val);		// height=100px, width:100px
});

// 配列から条件に合致するものを抜き出し
value1 = [ "sun", "mon", "tue", "wed", "thu", "fri", "sat" ];
value2 = $.grep(value1, function(value, index) {
	// 配列の項目単位の処理
	// value に配列の値、index に配列のインデックス値
	// 抜き出す場合は、true を返却、それ以外の場合は、false を返却
	// 引数に false を指定すると返却値の true と false の扱いが反転
	// 例：$.grep(value1, function(value, index) { ... }, false);
	return (value.match(/u/));
});

// DOM 要素の配列から重複した要素を排除しソート
// 以下の HTML を想定
// <div id="a" class="blue"></div>
// <div id="b" class="blue red"></div>
// <div id="c" class="blue red"></div>
// <div id="d" class="red"></div>
value1 = $(".blue").get();				// a, b, c
value2 = $(".red").get();				// b, c, d
value3 = value1.concat(value2);			// a, b, c, b, c, d
value4 = $.unique(value3);				// a, b, c, d

PAGE
TOP

Lesson-12 JavaScript/jQuery で処理しましょう

目次

L12.1 はじめに

L12.1.1 概要

L12.1.2 アプリケーションと各機能の関係

(1) アプリケーション

(2) 個別ライブラリィ

(3) jQuery

(4) JavaScript

L12.1.3 JavaScript/jQuery の動作確認

L12.1.4 参考情報

(1) CDN（Content Delivery Network）について

L12.1.5 じゃんけんアプリーション

(1) JavaScript 版

(2) jQuery 版（その1）

(3) jQuery 版（その2）

(4) jQuery 版（その3）

(5) jQuery 版（その4）

(6) PHP 版（参考）

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 JavaScript の記述場所

(1) JavaScript 記述例

(2) 表示結果

L12.2.9 JavaScript の記述例

L12.2.10 JavaScript のサンプル

(1) 日付と時間を表示

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

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

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

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

L12.3 jQuery 基本仕様

L12.3.1 事前準備

(1) jQuery のダウンロードと読み込み

(2) jQuery 読み込み例（自サイト内に配置）

(3) jQuery 読み込み例（CDN を使用）

L12.3.2 jQuery 記述型式

(1) jQuery の呼び出し

L12.3.3 セレクタ

L12.3.4 トラバースメソッド

L12.3.5 イベント

L12.3.6 属性・値

L12.3.7 スタイルシート

Lesson-12
JavaScript/jQuery で処理しましょう