◆letとconstの違い

◆データ型の特徴

・数値をあらわすデータ型。
・「'(クォーテーション)」で囲んではいけない。「文字列」として認識される。

・文字列をあらわすデータ型。
・文字列を「'(シングルクォーテーション)」「"(ダブルクォーテーション)」で囲む。
・文字列を「''」の中の「" "」、「" "」の中の「''」は単なる文字列として扱われる。
	"私の名前は'アリス'です。"　→　私の名前は'アリス'です。

・真偽値（論理値）のみの値。
・「true（真）」と「false（偽）」の2つのみ。
・「'(クォーテーション)」で囲むと文字列型となるので注意。
・全ての値は真値(true)と偽値(false)に変換できる。
・偽値になるものはほとんどない。null, undefined, 数字の「0」,空の文字列「''」のみ。

・「null」の値のみ。
・値として存在はするが「空っぽ」であることを表す値。

・「Underfined」の値のみ。
・存在しないことを表す値。

◆算術演算子

・＋	足し算
・－	引き算
・*	掛け算
・/	割り算
・%	余りを計算（17 % 5  → 2）
・**	累乗を計算（2 ** 4  → 16）

◆比較演算子

・< >	　大きい、小さい場合は「true」
・<= >=	　以上、以下の場合は「true」
・==	　等しい場合は「true」
・!=	　等しくない場合は「true」
・===	　データ型を含めて厳密に等しい場合は「true」（1 === '1'  → false）
・!==	　データ型を含めて厳密に等しくない場合は「true」

◆インクリメント演算子（++）

・変数＋＋	数値に「１」を足す。
	let count = 10;
	count＋＋;
・「a＋＋」は「a = a ＋ 1」と同じ。

◆加算代入（+＝）

・左辺の値に右辺の値を足した結果を左辺に再代入する。
・「a ＋＝ b」は「a = a ＋ b」と同じ。

◆論理積演算子（&&）と論理和演算子（||）

・条件式A && 条件式B
・２つの条件式を被演算子（オペランド）として、ともに「true」のときに「true」を返す。
	const a = 5;
	console.log(a > 1 && a < 9);	→	「true」
	console.log(a > 1 && a < 3);	→	「false」

・条件式A || 条件式B
・２つの条件式を被演算子（オペランド）として、どちらか１つの条件式が「true」であれば「true」を返す。
	const b = 10;
	console.log(b < 4 || b > 9);	→	「true」

◆テンプレートリテラル（“）

・文字列を「（バックティック）」で囲む。
・文字列の中に変数などを挿入できる。
	const name = 'Alice';
	const text = `私の名前は${name}です。`);
・改行をそのまま使用できる。

◆配列の操作

・配列.length;

・配列.push(追加する要素);
	arr.push('Bob');

・配列.pop;
	const last = arr.pop();

・配列.includes(要素)
	const check = arr.includes('リンゴ');
・結果は「true」または「false」の真偽値になる。

・配列.jopin(区切り文字)
	const arr = ['読書', '料理', 'キャンプ'];
	const a = interests.join('と');
	consol.log(a);		→「読書と料理とキャンプ」

・配列.split(区切り文字)
	const string = '読書&料理&キャンプ';
	const a = string.split('&');
	consol.log(a);		→「['読書', '料理', 'キャンプ']」

◆配列の繰り返し処理

■const fruits = ['りんご', 'みかん', 'バナナ'];
　for (let i = 0; i < fruits.length; i++) {
			console.log(fruits[i]);
		} 

・自動的に配列の要素数の回数だけ繰り返し処理を行う。
・繰り返し処理のたびに変数には配列の要素が順番に格納されるので、各要素へのアクセスが簡単に行える。
・for文のように「配列[インデックス]」で各要素にアクセスする必要がない。
■for (変数 of 配列) {
	処理;
　}
		const fruits = ['りんご', 'みかん', 'バナナ'];
		for (const fruit of fruits) {
			console.log(fruit);
		}
 

・「配列.forEach()」の「()」の中に関数を記述して、関数の引数として配列の要素を指定した名前で繰り返し処理を実行する。
・指定する関数は関数名をつけて呼び出しこともできるが、多くの場合、無名関数・アロー関数で利用することが多い。

■アロー関数を使った例
配列名.forEach((各配列の要素) => {
	処理;
});
		const animals = ['猫', '牛', 'トラ', 'うさぎ'];
		animals.forEach((animal) => {
			console.log(animal);
		} 

■関数名（関数式）を使った例
const 関数名 = (各配列の要素) => {
	処理;
}
配列名.forEach(関数名);
		const animals = ['猫', '牛', 'トラ', 'うさぎ'];
		const showAnimals = (animal) => {
			console.log(animal);
		} 
		animals.forEach(showAnimals);

◆関数宣言

■function 関数名() {
	処理;
　} 

■function 関数名(仮引数１, 仮引数２, 仮引数３) {
	処理;
　} 

・戻り値が設定されている関数を呼び出す場合、変数に代入して使うことが多い。
■function 関数名() {
	処理;
	return 戻り値;
　} 
		function pi() {
			return 3.14;
		}
		const a = pi();　//関数piを呼び出して、戻り値を「a」に代入する
		console.log(a);

■function double(number) {
	const result = number * 2;
	return result;
　} 
　const a = dowble(10);
　console.log(a);

■function double(number) {
	return number * 2;
　} 

・デフォルト引数	関数を呼び出す際に引数が引き渡されなかった際に呼び出されるデフォルト値に引数。
■function 関数名(仮引数 = デフォルト値) {
	処理;
　} 
		function hello(name = 'ゲスト') {
			console.log(`こんにちは${name}さん`);
		　}
　		hello();		→　「こんにちはゲストさん」

◆関数の呼び出し

■関数名(); 

■関数名(実引数１, 実引数２, 実引数３);
	function hello(name) {
		consol.log(`こんにちは${name}さん`)
	}
	hello('Bob');

◆アロー関数式

■const 変数名 = (引数１, 引数２, 引数３....) => {
	処理;
　} 
		const sayHello = () => {
			consol.log('こんにちは');
		} 
		sayHello();

・１行で書く場合は、さらに「{}」と「returnキーワード」を省略できる。
■const 変数名 = (引数１, 引数２, 引数３....) => 処理;
		const doSonmething = (a) => a * 2; 　　　←　const doSonmething = (a) => { 
									return a * 2; 　　　
								}

◆プロパティへのアクセス方法

・オブジェクトに「.(ドット)」とプロパティ名を繋げて書く。
		const book = {title; '吾輩は猫である'}
		consol.log(book.title);
		

・オブジェクトに「[](ブラケット)」をつけ、プロパティ名を文字列として書く。
		const book = {title; '吾輩は猫である'}
		consol.log(book['title']);
・ドット表記法と違い、「-(ハイフン)」を使用したていたり、数字から始まるプロパティにアクセスできる。
		○ obj['first-name']
		× obj.first-name
・ドット表記法と違い、変数を使ってプロパティにアクセスできる。
		const book = {title; '吾輩は猫である'}
		consol a = 'title';
		　　○ consol.log(book[a]);
		　　× consol.log(book.a);

・ドット表記法と違い、「-(ハイフン)」を使用したていたり、数字から始まるプロパティにアクセスできる。
		○ obj['first-name']
		× obj.first-name
・ドット表記法と違い、変数を使ってプロパティにアクセスできる。
		const book = {title; '吾輩は猫である'}
		consol a = 'title';
		　　○ consol.log(book[a]);
		　　× consol.log(book.a);

◆標準組み込みオブジェクト（Math）

◆ウィンドウオブジェクト

・アラート文章の表示をする。
・window.alert('文章');   ／　alert('文章');
・「window」は省略可能。

・window.confirm('文章');　／　comfirm('文章');
・ユーザーに「OK」か「キャンセル」かの確認を求めるダイアログを表示する。
・ユーザーがどちらを選択したのかを戻り値として受け取れる。
・戻り値は「OK」なら「true」、「キャンセル」なら「false」のboolean型のためif条件式で利用できる。
		const result = confirm('本当に削除してよいですか？');
		if (result) {
			consol.log('削除しました。');
		} else {
			consol.log('キャンセルしました。');
		}

・指定したミリ秒数が経過した後に任意の関数を実行する。
・ブラウザを閉じるまで処理が続く。
■asetTimeout(関数名, ミリ秒数);
		function delayTask () {
			consol.log('1秒後に実行する')
		}
		setTimeout(delayTask, 1000);
・setTimeout()に渡す関数は関数の名前でなくてはならない。
　関数名の後ろに「()」をつけてしまうと、読み込み時に関数を実行してしまう。
		○ setTimeout(delayTask, 1000);
		× setTimeout(delayTask(), 1000);
・タイマーのキャンセル（clearTimeout）
	・setTimeout()を実行するとタイマーを識別する数字（タイマID）が戻り値として返される。
	・setTimeout()の戻り値をclearTimeout()に渡すと繰り返し処理を中止できる。
		function delayTask () {
			consol.log('1秒ごとに繰り返し実行される')
		}
		const timerId = setInterval(delayTask, 5000);
		clearTimeout(timerId);

・指定したミリ秒数ごとに任意の関数を繰り返し実行する。
■setInterval(関数名, ミリ秒数)
		function delayTask () {
			consol.log('1秒ごとに繰り返し実行する')
		}
		setInterval(delayTask, 1000);
・繰り返しを停止する（clearInterval）
	・setInterval()を実行するとタイマーを識別する数字（タイマID）が戻り値として返される。
	・setInterval()の戻り値をclearInterval()に渡すと予約実行をキャンセルできる。
		function delayTask () {
			consol.log('1秒ごとに繰り返し実行される')
		}
		const timerId = setInterval(delayTask, 1000);
		clearInterval(timerId);	

◆ウィンドウオブジェクトの種類

◆要素の指定

■document.querySelector('CSSセレクタ')
		const element = document.querySelector('.sample');
・引数で指定したCSSセレクタの条件に複数の要素がマッチした場合は最初にマッチした要素を取得する。
・どの要素もマッチしない場合は「null」が返される。
・指定されたHTML要素を取得する。
		consol.log(document.querySelector('.sample'));
		　　⇒　「<div class = "sample">Text</div>」

■document.querySelectorAll('CSSセレクタ')
		const elements = document.querySelectorAll('.sample');
・引数で指定したCSSセレクタの条件にマッチしたすべての要素を取得する。
・複数の要素を取得するため、戻り値は「NodeList」という特殊な配列形式のデータで返される。
・NodeListはlengthプロパティで配列内の数を取得できる。
		const elements = document.querySelectorAll('.sample');
		consol.log(elements.length));
		　　⇒　「3」
・インデックスで指定した要素にアクセスする。
		const elements = document.querySelectorAll('.sample');
		consol.log(elements[0]));
		　　⇒　「<div class = "sample">Text1</div>」
・取得したすべての要素にそれぞれアクセスする。
		const elements = document.querySelectorAll('.sample');
		foe (const erement of elements) = {
			consol.log(element);
		}
		　　⇒　「<div class = "sample">Text1</div>」
			「<div class = "sample">Text2</div>」
			「<div class = "sample">Text3</div>」

■document.getElementById('ID名')
		const element = getElementsByClassName('name');
・引数にID名を指定して、HTML要素を一つ取得するメソッド。
・querySelector()メソッドとは違い、引数にはセレクターではなくID名のみを指定する（「#」は付けない）。

■document.getElementsByClassName('クラス名')
		const element = getElementsByClassName('name');
・引数にクラス名を指定して、合致するすべてのHTML要素を取得するメソッド。
・querySelectorAll()メソッドとは違い、引数にはセレクターではなくクラス名のみを指定する（「.」は付けない）。
・複数の要素を取得するため、戻り値は「HTMLCollection」という特殊な配列形式のデータで返される。
・配列の各要素を処理するにはfor文を使う。forEach()メソッドは存在しない。
		const elements = document.getElementsByClassName('sample');
		foe (let i = 0; i < elements.length; i++ ) = {
			consol.log(element[i]);
		}
		　　⇒　「<div class = "sample">Text1</div>」
			「<div class = "sample">Text2</div>」
			「<div class = "sample">Text3</div>」

◆要素の作成・追加

・document.createElement('タグの名前');
		const element = document.createElement('p');
		console.log(element);　　⇒　「<p></p>」
・引数にタグ名を指定するして要素を生成するメソッド。
・.createElement()メソッドを使って要素を生成しても画面上には何も現れない。
・append()メソッドなどを使ってHTMLに追加することではじめてDOM上の要素として扱うことができる。
・InnerHTMLプロパティで中身のHTMLを追加したり、classListプロパティでクラスを操作したりできる。

・const 定数名 = new Image();
		const container = document.createElement('.container');
		for (let i = 0; i < 10; i++) {
			const img = new Image();
			img.src = `images/photo-${i}.jpg`;
			container.appendChild(img);
		}
・img要素を生成するメソッド。
・「src」プロパティで画像ファイルの参照元を追加する。
・「new Image();」は「document.createElement('img');」と同じ処理である。
・append()メソッドなどを使ってHTMLに追加することではじめてDOM上の要素として扱うことができる。

・親要素.insertAdjacentHTML('挿入位置', 文字列);
		const container = document.querySelector('.container');
		const newBox = `<div class="new-box box">.new-box要素</div>`;
		setTimeout(() => {
			container.insertAdjastHTML('afterbegin', newBox);
		}, 3000);
・第１引数の位置に第２引数の文字列をHTMLとして挿入するメソッド。
・挿入先の要素は破壊されない。
■挿入位置
	・beforebegin	親要素の直前
	・afterbegin	親要素内の先頭
	・beforeend	親要素内の末尾
	・afterend	親要素の直後

・親要素.append(追加する要素);
		const newElement = document.createElement('p');
		newElement.textContent = '新しく追加しました';
		const content = document.querySelector('.content');
		content.append(newElement);

・親要素.prepend(追加する要素);
		const newElement = document.createElement('p');
		newElement.textContent = '先頭に追加します';
		const content = document.querySelector('.content');
		content.prepend(newElement);

・指定要素.befor(追加する要素);
・指定要素.after(追加する要素);

・削除したい要素.remove();
		const firstElement = document.querySelector('.first');
		firstElement.remove();

・置換したい要素.replaceWith(置き換える要素);
		const newElement = document.createElement('p');
		newElement.textContent = '置き換える要素です';
		const content = document.querySelector('.content');
		content.replaceWith(newElement);

◆要素・属性の変更

■要素.textContent = 'テキスト';
		const p = document.querySelector('p');
		p.textContent = '変更します';
・要素内のテキストの取得や変更を行うプロパティ。
・要素内のテキストを取得する際、HTMLタグは無視される。
		<p id="text">晴れ<soan>(23℃)</span><?div>
				⇒　「晴れ (23℃)」
・textContentにHTMLタグを含んだ文字列を渡しても、文字列としてしか扱われない。
		Element.textContent = '気温は<strong>24℃</strong>の予想です。';
			⇒　「気温は<strong>24℃</strong>の予想です。」

■要素.innerHTML = 'HTML';
		const p = document.querySelector('p');
		p.innerHTML = '気温は<strong>24℃</strong>の予想です。';
			⇒　「気温は24℃の予想です。」
・要素内のHTMLの取得や変更を行うプロパティ。
・テキストだけでなく、タグの書き換えが必要な際に使用する。

・textContent	内容のテキストのみをテキスト形式で取得。
・innerHTML	内容のHTMLコンテンツ（タグ・テキスト・HTML要素自体）を全て取得。

・innerHTML		特定の要素のHTMLコンテンツ全体を置き換えるために使用するプロパティ。
・insertAdjacentHTML	要素に新しいHTMLを追加するためのメソッド。元のコンテンツは保持される。

・要素.属性名 = '変更したい値';
		const img = document.querySelector('img');
		img.width = 300;

・要素.setAttribute('属性名', 値);
		const img = document.querySelector('img');
		img.setAttribute('data-nav-index', i);

・date-任意の名前 = "値";
		<div data-id="100" data-user-name="zaru"></div>

・date-任意の名前 = "値";
		<div class="profile" data-id="100" data-user-name="zaru"></div>

		const element = document.querySelector('.profile');
		consol.log(profile.dataset.id);　　⇒　「100」
		consol.log(profile.dataset.userName);　　⇒　「zaru」
・HTMLで「-（ハイフン）」で区切られた単語は、JavaScriptではハイフンを取り除いて、２語目以降の単語の１文字目を大文字に変換する。
		「（HTML）user-name」　⇒　「（JavaScript）userName」

・要素名.src = "値";
		<img id="myImage" />

		const img = document.querySelector('#myImage');
		img.src = 'images/photo_a.jpg';

◆CSSの変更

・要素.style.CSSプロパティ名 = '値';
		const p = document.querySelector('p');
		p.style.fontSize = '36px';
・CSSで「-（ハイフン）」で区切られたCSSプロパティ名は、JavaScriptではハイフンを取り除いて、２語目以降の単語の１文字目を大文字に変換する。
		「（CSS）font-size」　⇒　「（JavaScript）fontSize」

・要素.style.cssText = 'プロパティ１:値１; プロパティ２:値２; プロパティ３:値３;';
・CSSプロパティ名のハイフンもそのまま使用できる。

・要素.classList.add('クラス名１', 'クラス名２', 'クラス名３');
		const element = document.querySelector('p');
		element.classList.add('warning');

・要素.classList.remove('クラス名１', 'クラス名２', 'クラス名３');
		const element = document.querySelector('p');
		element.classList.remove('nomal');
		

・要素.classList.replace('対象クラス名', '置換クラス名');
		const element = document.querySelector('p');
		element.classList.replace('nomal', 'warning');

・要素.classList.toggle('対象クラス名');
		const element = document.querySelector('p');
		element.classList.toggle('nomal');

◆イベントの設定（addEventListener）

■要素.addEventListener('イベント名', 関数名);
		element.addEventListener('click', alertMessage);
・関数名を渡す際に「()」をつけない。「()」をつけるとイベント発生時ではなく、イベント定義時に関数が実行される。
・第２引数で渡した関数は「イベントリスナー」や「イベントハンドラ」と呼ばれる。	

■要素.addEventListener('イベント名', function () {
	関数;
　});

◆イベント発生元の要素へのアクセス

・予め指定した関数の引数としてイベントに関する情報が自動的にオブジェクト形式で渡される。
・イベント発生時に「クリックされた要素」や「入力されたテキスト内容」などの情報を取得できる。
・addEventListener()に登録する関数に引数を設定するだけで受け取ることができる。（引数に使用した「event」で取得）
		button.addEventListener('mouseover', function (event) {
			console.log(event);
		});　　⇒　「Mousevent{isTrusted: true, screenX: 1214, screenY: 650, clientX: 1034, clientY: 485, ...}」

・currentTargetプロパティはイベントが発生した要素を取得する。
・取得内容は「document.querySelector」で取得した場合と同じ状態となる。
	取得内容例：<button type="button">ボタン</button>
・ボタンクリックでボタンのテキストを変更する例
		const button = document.querySelector('button');
		button.addEventListener('click', function (event) {
			const button = event.currentTarget;
			button.textContent = '変更します';
		});

・「currentTarget」は、addEventListenerを設定した要素を取得する。
・「target」は、設定したイベントが発生した要素を取得する。
・通常はcurrentTargetの方が使いやすい。
・buttonタグにspanタグを入れた場合の例（buttonにaddEventListenerを設定）
	<button><span>「span要素」</span>「button要素」</button>
		○「button要素」をクリックした場合
			・currentTarget：<button>要素
			・target：<button>要素
		○「span要素」をクリックした場合
			・currentTarget：<button>要素
			・target：<span>要素

・「event.target.src」でimg要素のsrc属性を取得できる。
・取得したsrc属性の変更
		mainImage.src = event.target.src;

◆mousemove／mousedown／mouseupイベント

・マウスを動かしたときに発生するイベント。
・イベントオブジェクトの「offsetX」と「offsetY」プロパティで画面左上を始点とした座標データを取得できる。
・div要素内でのみマウスの位置情報を検知する例	
		const div = document.querySelector('div');
		div.addEventListener('mousemove', function (event) {
			console.log(`Move : x = ${event.offsetX}, y = ${event.offsetY}`);
		});

・マウスボタンのクリック時に発生するイベント。
・mousedownはマウスボタンを押下したとき、mouseupは押下して離したときに発生する。

◆scrollイベント（scrollX／scrollY）

・画面がスクロールするたびに発生するイベント。
・画面全体に関するため「Windowオブジェクト」にイベントを設定する。

・スクロール量は「window.scrollY」プロパティで取得できる。
		window.addEventListener('scroll', () => {
			console.log(`スクロール量は${window.scrollY}pxです`);
		});

■表示されていない部分も含めたページ全体の高さの取得（scrollHeight）
		const pageHeight = document.documentElement.scrollHeight;

■表示されていない部分も含めたページ全体の横幅の取得（scrollWidth）
		const pageWidth = document.documentElement.scrollWidth;

■スクロールバーを含まない表示領域の高さの取得（clientHeight）
		const viewHeight = document.documentElement.clientHeight;

■スクロールバーを含まない表示領域の横幅の取得（clientWidth）
		const viewWidth = document.documentElement.clientWidth;

◆キーフレーム（第１引数）の書き方

・JavaScriptの文法に合わせて、CSSの「-（ハイフン）」が付くプロパティは「-」を除いて大文字表記（キャメル表記法）にする。
		font-size　⇒　fontSize
・値は、基本的には、開始点と終了点の２つを配列方式で指定する。
■animate()メソッドに直接指定
		動かす要素.animate({
			キー（プロパティ名）: ['開始の値', '終了の値'],
		}, 再生時間);
■定数に指定して、animate()メソッドに呼び出す
		const keyframes = {
			キー（プロパティ名）: ['開始の値', '終了の値'],
		};
		動かす要素.animate(keyframes, 再生時間);

・配列の各要素をアニメーションが動作する位置として、キーフレームごとにオブジェクト形式で記述する。
・一度に動く内容が多い場合に分かりやすい。
■配列方式の書式
		const keyframes = [
			{
				プロパティ１: '開始の値',
				プロパティ２: '開始の値',
			},
			{
				プロパティ１: '終了の値',
				プロパティ２: '終了の値',
			}
		];
		動かす要素.animate(keyframes, 再生時間);
■配列方式の書式例
		const keyframes = [
			{ transform: 'rotate(0) scale(1)'},
			{ transform: 'rotate(360deg) scale(0)'},
		];
		text.animate(keyframes, 1000);

・デフォルトでは指定したアニメーションは等間隔のタイもイングで実行される。
・「offset」プロパティを指定すると、任意のタイミングで実行できる。
・値は「0.0（実行開始）」から「1.0（終了時）」までの数値で指定する。
・配列方式で記述する方がタイミングが把握しやすい。
		const keyframes = [
			{ 
				opacity: 1,
				offset: 0.8,　　←　80％のタイミングから開始する
			},
			{ 
				opacity: 0,
				offset: 1,　　←　100％のタイミングで終了する
			},
		];
		text.animate(keyframes, 1000);

◆アニメーション例

const keyframes = {
	opacity: [0, 1],
};
heading..animate(keyframes, 2000);

const keyframes = {
	opacity: [0, 1],
	transrate: ['0 50px', 0],
};
heading..animate(keyframes, 1000);

const keyframes = {
	opacity: [0, 1],
	transrate: ['0 50px', 0],
};
const options = {
	duration: 2000,
	easing: 'ease',
};
heading..animate(keyframes, options);

const keyframes = {
	color: ['#f66', '#fc2', '#0c6', '#0bd'],
};
const options = {
	duration: 8000,
	direction: 'alternate',
	iterations: Infinity,
};
heading..animate(keyframes, options);

h1 {color: #fff;
	display: inline-block;
	background-image: liner-gradient(90deg, #0bd, #0bd 50%, #fff 50%, #fff 100%);
	background-size: 200% 100%;
	padding: .5rem 1rem;
}

const keyframes = {
	color: ['transparent', '#fff'],
	backgroundPosition: ['100% 0 ', '0 0'],
};
const options = {
	duration: 1000,
	easing: 'ease',
};
heading..animate(keyframes, options);