JS(JavaScript)の書き方基本まとめ

作成:2019.06.29 05:00 更新:2021-02-10T14:01:24Z

JavaScriptの基本的な書き方をまとめました。JavaScript特有の構文や、他言語との違いを主にまとめています。

忘れたときの読み直しように使ってください。

HTMLへの実装方法

HTML内に直接実装する方法

HTML内に直接JavaScriptを実装する場合、bodyの終了タグ</body>の直前に<script>タグを記載し、その中にコードを書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>JavaScript基本まとめ</title>
</head>
<body>
	...
	<script type="text/javascript">
		// ここにコードを書く
	</script>
</body>
</html>

</body>の直前とする理由は、HTMLの読み込み順にあります。HTMLは先頭から順に読み込まれ、順に処理されます。JavaScriptからHTML内の要素を操作する場合、操作する要素が先に読み込まれている必要があります。そのため、bodyの終了タグ</body>の直前であれば、HTMLの要素はすべて読み込まれていることになります。

外部JSファイルを参照する方法

外部のJavaScriptファイルを参照する場合は、src属性で指定します。

HTMLもJavaScriptも基本的にUTF-8の文字コードを使いますが、文字コードと異なる場合もあるので、文字コードは指定していた方が無難です。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>JavaScript基本まとめ</title>
</head>
<body>
	...
	<!-- 外部JavaScriptの読み込み -->
	<script src="js/main.js" charset="utf-8"></script>
</body>
</html>

JSファイルのひな型

以下がJavaScriptファイルのひな型です。

use strictをつけて厳密なエラーチェックを行います。

全体を即時関数でラップしているのは、複数のJavaScriptファイルを使用している場合を考慮しているためです。即時関数でラップせずに、use strictをつけた場合、それ以降のJavaScriptにもuse strictが適用されます。仮に厳密なエラーチェックしていないJavaScriptファイルを使用していた場合に、エラーが見つかり実行されないということを防ぐためです。

(function() {
	'use strict';
	
	// ここにコードを書く
})();

変数、データ型

変数の宣言

3種類ありますが、基本的にletとconstを使った方が良いです。

var value1;		// 再宣言可能。letを使った方が良い。
let value2;		// 再宣言不可。ブロックスコープ。
const VALUE3;	// 再宣言不可。代入不可。

オブジェクトの利用

オブジェクトを利用するにはnew演算子でインスタンスを生成して利用します。

// let <変数名> = new <オブジェクト名>();
let obj = new Object();

データ型（基本型）

基本型には以下の種類があります。基本型の変数には直接値が格納されます。

データ型	概要
数値型(number)	整数や小数を表す。
文字列型(string)	文字列を表す。
真偽値(boolean)	真偽値(true/false)を表す。
シンボル(symbol)	シンボルを表す。
特殊型	null/undefined

データ型（参照型）

参照型には以下の種類があります。参照型の変数には格納先への参照が格納されます。

データ型	概要
配列(array)	データの集合。各要素には0から始まるインデックスで参照する。
オブジェクト(object)	データの集合。各要素にはキー（名前）で参照する。
関数(function)	関数。一連の処理のかたまり。

リテラル

JavaScriptのコード中に数値や文字列の表現方法です。

let val16 = 0x1A;	// 16進数
let val10 = 10;		// 10進数
let val8 = 0o7;		// 8進数
let val2 = 0b21;	// 2進数

let val = 100.8;	// 浮動小数点数
let pi = 3.14e5		// 浮動小数点数

let str1 = "文字列";		// 文字列
let str2 = `文字列`;		// シングルクオーテーションも可
let str3 = `"文字列"`;	// ダブルクォーテーションを囲う
let str4 = "\u3042";	// ユニコード直接指定

let array = [`ja`, `en`];	// 配列
let object = {				// オブジェクトリテラル
	name : "なまえ",
	age : 15,
	hello : function() {
		return "hello!";
	}
}

テンプレート文字列

`(バッククォーテーション)でくくった文字列です。文字列内で変数を展開できます。

let age = 15;
let template = `私は${age}歳です。`;

undefinedとnull

undefinedは未定義を表す値です。未定義の変数、値が未定義の変数、未定義のプロパティを参照した際に返される値です。

一方、nullは空であること明示的に表す値です。undefinedとnullは全くの別物です。

let x;
console.log(x);	// undefined
console.log(y); // undefined

let obj = {
	x: 1
};
console.log(obj.y);	// undefined

比較演算子`==`と`===`の違い

JavaScriptで注意が必要な演算子が比較演算子（等価演算子==と等値演算子===）です。等価演算子==はほかの言語と異なり、左辺と右辺の型により比較方法が異なり、左辺と右辺の型が異なる場合には、暗黙的な型変換が行われ比較されます。

＜左辺と右辺の型が同一の場合＞

データ型	比較方法
数値／文字列／論理	値が等しいかどうか。
配列／オブジェクト	参照先が等しいかどうか。
特殊	常にtrueを返す。null==undefinedもtrueを返す。

＜左辺と右辺の型が異なるの場合＞

データ型	比較方法
数値／文字列／論理	数値型に変換したうえで比較する。
配列／オブジェクト	基本型に変換したうえで比較する。

一方、等値演算子===は型が何であれ値が等しいかどうかを判断します。基本的に===を使用した方が良いでしょう。

制御構文

for文

他言語と同じです。

for (let i = 1, sum = 0; i <= 10; i++) {
	sum += i;
}

for…in文

配列やオブジェクトを順に処理する場合に使います。

配列の場合は、インデックスを順に取得して処理をします。

let values = [1, 2, 3];
for (let index in values) {
	if (values[index] % 2 === 0) {
		console.log(`${index} : 偶数`);
	} else {
		console.log(`${index} : 奇数`);
	}
}

オブジェクトの場合は、キーを順に取得して処理をします。

let values = {one:1, two:2, three:3};
for (let key in values) {
	if (values[key] % 2 === 0) {
		console.log(`${key} : 偶数`);
	} else {
		console.log(`${key} : 奇数`);
	}
}

for…of文

for...inと似ていますが、こちらは配列など列挙可能なオブジェクトを順に処理します。for...inはインデックスが列挙されますが、for...ofでは値が列挙される点が異なります。

let values = [1, 2, 3];
for (let val of values) {
	if (val % 2 === 0) {
		console.log(`${val} : 偶数`);
	} else {
		console.log(`${val} : 奇数`);
	}
}

関数

関数の宣言（function文）

基本的な関数の宣言方法はfunction文で宣言する方法です。

function sumValue(x, y) {
	return x + y;
}

let sum = sumValue(1, 2);

関数の宣言（関数リテラル）

次は関数リテラルを用いた宣言方法です。C言語の関数ポインタのように、関数を一種のデータとして扱えます。

let sumValue = function (x, y) {
	return x + y;
}

let sum = sumValue(1, 2);

また、上記例はfunctionの後に関数名がありません。このような関数は無名関数と呼ばれます。

通常、関数リテラルでは関数名はつけませんが、関数名をつけることもできます。（関数名をつけた場合は、関数の外から関数名を指定して呼び出すことはできません。）

関数の宣言（アロー関数）

次はアロー関数を用いた宣言方法です。関数を簡素に記述することができる方法です。

let sumValue = (x, y) => {
	return x + y;
}

let sum = sumValue(1, 2);

上記は関数が一行のため、以下のようにさらに省略することができます。

let sumValue = (x, y) => x + y;

let sum = sumValue(1, 2);

即時関数

JavaScriptでは即時関数と呼ばれる関数があります。即時関数は関数の定義と同時に実行も行う関数のことです。

(function (x, y) {
	return x + y;
})(1,2);

可変長引数

任意の数の引数を受け取れる関数が、可変長引数の関数です。

let sumValue = function(...values) {
	let sum = 0;
	for(let val of values) {
		sum += val;
	}
	return sum;
}

let value1 = sumValue(1, 2);
let value2 = sumValue(1, 2, 3);	// 変数の数が変わってもOK

クラス

クラスの宣言

class Person {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}

	get name() {
		return this._name;
	}
	set name(name) {
		this._name = name;
	}

	get age() {
		return this._age;
	}
	set age(age) {
		this._age = age;
	}
}

let man = new Person('太郎', '35');

HTML要素

idで要素を取得する方法

getElementById()で取得します。指定したidを持つHTML要素を取得します。

let target = document.getElementById('targetId');

取得できなかった場合はnullが返ります。

nameで要素を取得する方法

getElementsByName()で取得します。指定したname属性値を持つHTML要素を取得します。複数の要素を返す可能性があります。

let targets = document.getElementByName('targetName');

タグ名で要素を取得する方法

getElementsByTagName()で取得します。指定したタグ名を持つHTML要素を取得します。複数の要素を返す可能性があります。

let targets = document.getElementByTagName('li');

クラス名で要素を取得する方法

getElementsByClassName()で取得します。指定したクラス名を持つHTML要素を取得します。複数の要素を返す可能性があります。

let targets = document.getElementByClassName('class1');

CSSセレクタで要素を取得する方法

querySelector(), querySelectorAll()で取得します。指定したCSSセレクタであらわされる要素を取得します。

querySelector()は1つの要素を返しますが、querySelectorAll()は複数の要素を返す可能性があります。

let target = document.querySelector('#targetId');
let targets = document.querySelectorAll('.class1');

HTML属性

属性値を取得する

getAttribute()で取得します。指定した属性名の値を取得します。

let target = document.querySelector('#targetId');
let val = target.getAttribute('class');

属性値を設定する

setAttribute()で設定します。指定した属性名の値を設定します。

let target = document.querySelector('#targetId');
let val = target.setAttribute('class', 'active');

CSSスタイル

スタイルを取得する

styleプロパティで取得します。colorなどより詳細なプロパティも取得できます。

let target = document.querySelector('#targetId');
let val = target.style.color;

スタイルを設定する

styleプロパティで設定します。colorなどより詳細なプロパティも設定できます。

let target = document.querySelector('#targetId');
target.style.color = '#ccc';

class属性

先のgetAttributeやsetAttributeでclass属性を変更することは可能です。しかし、class属性は複数のクラスを指定する場合があります。複数のクラスの一部を変更したい場合に便利なのがclassListプロパティです。

let target = document.querySelector('#targetId');
target.classList.add(`highlight`);	// highlightクラスを追加
target.classList.remove(`highlight`);	// highlightクラスを削除
target.classList.toggle(`highlight`);	// highlightクラスが無ければ追加。あれば削除する。

最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。