Webデザイン学科
授業資料

• 変数
• 要素の取得
• 条件分岐（if 文）
• 配列
• オブジェクト
• 多次元配列
• イベントの登録（addEventListener）
• 要素の追加
• class の操作
• jQuery-each メソッド
• 関数
• git 用語集
• 参考サイト

ブログやドキュメントなどに分かりやすく、自分でまとめておきましょう。
自分で纏めることで、理解が深まるとともに、忘れた時に探しやすくなります。

変数

//再宣言なし、再代入可
let 変数名 = 〜;

//再宣言なし、再代入なし、オブジェクトの操作可
const 変数名 = 〜;

//再宣言・再代入可 ※使わない
var 変数名 = 〜;

要素の取得

//#idや.class、タグなどで取得。
let emList3 = document.querySelector('selectors');

//あるIDをもったElementを取得
let em1 = window.document.getElementById('div1');

//あるタグ（div）の全Elementを配列で取得※複数形
let emList1 = document.getElementsByTagName('div');

//あるclass（someClass）をもった全Elementを配列で取得※複数形
let emList2 = document.getElementsByClassName('someClass');

//例) 属性を取得する
let em1 = document.getElementById('div1');
let id1 = em1.getAttribute('id');
//例) 内部のHTMLを取得する
let html1 = em1.innerHTML;

//jQuery
$('selector');

//あるIDをもったElementを取得
$('#id');

//あるタグ（div）の全Elementを配列で取得
$('div');

//あるclass（someClass）をもった全Elementを配列で取得
$('.someClass');

//例) 属性を取得する
$('#div1').attr('id');
//例) 内部のHTMLを取得する
let html1 = $('#div1').html();

条件分岐

if 文は、指定された条件が真（truthy）ならば文を実行します。
条件が偽（falsy）なら、もう一方の文を実行することができます。

if (x > 50) {
	/* 何かを行う */
} else if (x > 5) {
	/* 何かを行う */
} else {
	/* 何かを行う */
}

配列

[要素名,要素名,要素名,要素名]

// new 演算子で定義 ※()の中に配列の要素数を設定できる。
let 配列名（変数）= new Array();

// 配列リテラルで定義
let 配列名（変数）= [];

//要素の取得
console.log(配列名[添字]);

for 文で取得

配列は、for 文もしくは for…of 文でループして取得します。
for (初期化式; 継続条件式; 増減式){ 繰り返す処理の内容 }

let fruits = ['りんご', 'みかん', 'いちご'];

for (let i = 0; i < fruits.length; i++) {
	console.log(fruits[i]);
}

for…of 文で取得

for( let 変数 of 配列名 ){ 繰り返す処理の内容 }

let fruits = ['りんご', 'みかん', 'いちご'];

for (let fruit of fruits) {
	console.log(fruit);
}

//変数を配列にして、取得した配列部分をarray.entries()にするとindex（添字）が取得できる。
for (let [index, fruit] of fruits.entries()) {
	console.log(fruit);
	console.log(index);
}

Array.forEach 文

Array.forEach メソッドは配列の全要素に対して関数を実行することができます。

const fruits = ['りんご', 'みかん', 'いちご'];
fruits.forEach((element, index, array) => {
	console.log(element, index, array);
});

//りんご 0 ['りんご', 'みかん', 'いちご'], みかん 1 ['りんご', 'みかん', 'いちご'], いちご 2 ['りんご', 'みかん', 'いちご']

オブジェクト

{プロパティ名：プロパティ値,プロパティ名：プロパティ値,...}
※連想配列、ハッシュなどともいうが、区別するため JavaScript ではオブジェクトという。

let fruits = { apple: 'りんご', mikan: 'みかん', strawbery: 'いちご' };

//りんご
cosole.log(fruits.apple);
cosole.log(fruits['apple']);
//[ ]で取得する場合は、プロパティ名にクォテーション

JSON

オブジェクトの記法を利用したものが、JSON（JavaScript Object Notation）とよぶ。

//jsonの書き方 { "キー" : "値" }
{ "名前": "鈴木一郎" }

• キー値がダブルクォーテーションで囲われている必要がある。
• さらにデータ部が文字列の場合は文字列にもダブルクォーテーションが必要。
• 最後に;もつけない。

for…in 文

オブジェクトのプロパティを取得する場合は、for…in 文を利用する。
for(let 変数 in オブジェクト名){ 繰り返す処理の内容 }

let fruits = { apple: 'りんご', mikan: 'みかん', strawbery: 'いちご' };

for (let fruit in fruits) {
	console.log(fruit);
}

多次元配列

配列内に配列、配列内にオブジェクトなどネスト（入れ子）になったデータ。ループで取得する場合は、同様に入れ子にする。

let fruitslocal = [
	{ apple: '青森', mikan: '愛媛', strawberry: '三重', grape: '山梨' },
	{ apple: '福岡', mikan: '静岡', strawberry: '愛知', grape: '群馬' },
	{ apple: '高知', mikan: '宮崎', strawberry: '北海道', grape: '岩手' }
];

//県名を全部表示する場合
for (let i = 0; i < fruitslocal.length; i++) {
	for (let fruit in fruitslocal[i]) {
		console.log(fruitslocal[i][fruit]);
	}
}

イベントの登録

target.addEventListener(type, listener [, useCapture]);でイベントの登録をします。

<!-- クリックイベントの場合 -->
<div class="clickBtn">クリックする</div>
<script>
	let Btn = document.querySelector('.clickBtn');
	Btn.addEventListener('click', function () {
		console.log('クリック');
	});
</script>

要素の追加

後に追加

//appendChildするために、 新しい要素を作成する。
let newElm = document.createElement('p');
let outerElm = document.querySelector('div');
newElm.innerHTML = `コンテンツ`;
outerElm.appendChild(newElm);

前に追加

insertBefore(newNode, referenceNode);

<div id="parentElement">
	<span id="childElement">foo bar</span>
</div>

<script>
	// 挿入する新しいノードを作成する
	let newNode = document.createElement('span');
	newNode.innerHTML = 'hoge';

	// 親ノードの参照を取得する
	let parentDiv = document.querySellector('#parentElement');

	// 開始: 既存の childElement (すべて正しく動作)
	let sp2 = document.getElementById('childElement');
	parentDiv.insertBefore(newNode, sp2);
</script>

Element.append()

Element.append() メソッドは、一連の Node または DOMString オブジェクトを Element のの最後の子の後に挿入します。
DOMString オブジェクトは等価な Text ノードとして挿入されます。
append(...nodesOrDOMStrings)

<div id="parentElement"></div>;

let parentDiv = document.querySelector('#parentElement');
let p = document.createElement('p');
parentDiv.append('Some text', p);

class の操作

Element.classList は読み取り専用のプロパティで、生きた DOMTokenList コレクションでその要素の class 属性を返します。
これを使用してクラスリストを操作することができます。

classList

const elementClasses = elementNodeReference.classList;

DOMTokenList 自体は読み取り専用ですが、 add(), remove(), replace(), toggle() の各メソッドを用いてオブジェクトを変更することはできます。

const div = document.createElement('div');
div.className = 'foo';

// classList API を用いてクラスを削除、追加
div.classList.remove('foo');
div.classList.add('anotherclass');

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// visible が設定されていれば除去し、なければ追加
div.classList.toggle('visible');

// i が 10 未満であるかどうかの条件によって visible を追加または除去
div.classList.toggle('visible', i < 10);

// containsは、存在するかどうかを判定
console.log(div.classList.contains('foo'));

// 複数のクラスを追加または除去
div.classList.add('foo', 'bar', 'baz');
div.classList.remove('foo', 'bar', 'baz');

// スプレッド構文を使用したクラスの追加または除去
const cls = ['foo', 'bar'];
div.classList.add(...cls);
div.classList.remove(...cls);

// "foo" クラスを "bar" クラスで置き換え
div.classList.replace('foo', 'bar');

jQuery class の操作

jQuery の class の操作は、hasClass(), addClass(), removeClass(), toggleClass()でまかなえます。

// クラスを削除、追加
div.removeClass('foo');
div.addClass('anotherclass');

// visible が設定されていれば除去し、なければ追加
div.toggleClass('visible');

// 存在するかどうかを判定
console.log(div.hasClass('foo'));

// 複数のクラスを追加または除去
div.addClass('foo bar baz');
div.removeClass('foo bar baz');

// "foo" クラスを "bar" クラスで置き換え※toggleClassで同じ''内に両方書くと書き換えられる。
div.toggleClass('foo bar');

//でもこちらの方がわかりやすい※別のメソッドで置き換えちゃうけど、他のものも全部削除されます。
div.attr('class', 'bar');

jQuery-each メソッド

each() メソッドは２種類あり、jQuery オブジェクト（DOM の取得）に対して繰り返し処理を行う jQuery.each() メソッドと、引数で指定したオブジェクトに対して繰り返し処理を行う $.each() メソッドがあります。

DOM を操作する場合専用の構文

class やタグなど複数要素が取得できる場合、ループして値を取得操作する。

$(セレクタ).each( function( index, element ){
   // DOMに関する処理
 };

<div id="divArea">
	<p>段落1の文章です</p>
	<p>段落2の文章です</p>
</div>

<script>
	$('#divArea > p').each(function (index, element) {
		console.log(index, $(element).text()); //pタグで囲まれた文字列を出力
	});
	//0,段落1の文章です
	//1,段落2の文章です
</script>

汎用的構文

配列やオブジェクト内の値を繰り返し取得することができる。

//配列の場合
$.each(対象配列, function (index, value) {
	// 各データに関する処理
});

//オブジェクトの場合
$.each(対象オブジェクト, function (key, value) {
	// 各データに関する処理
});

関数

関数宣言

関数定義 (関数宣言や関数定義文 とも呼ばれます) は function キーワードと、それに続く以下の内容で構成されます。

function square(number) {
	return number * number;
}

関数式

関数宣言はすべて構文的な文でしたが、関数は関数式によって作成することもできます。

const square = function (number) {
	return number * number;
};
let x = square(4);
console.log(x);
// x の値は 16 となる

• 関数式 - JavaScript | MDN

Git 用語集

参考サイト

• MDN Web Docs
• 現代の JavaScript チュートリアル
• JavaScript Primer - 迷わないための入門書 #jsprimer
• とほほの JavaScript リファレンス - とほほの WWW 入門