備忘録的な感じです。初心者ですので間違っている箇所があるかもしれません。
お手柔らかにお願いいたします。
JavaScriptとは
イベント発生時にWEBページの遷移をせずにWEBページのコンテンツを動的に変更することができるプログラミング言語。
ブラウザの開発者ツールのコンソール画面で動作確認をして問題無い場合は実装する。
JavaScript MDN
JavaScriptの適用方法
HTMLの<body>要素内（</body>の直前）に<script>タグを使用してJavaScriptを記述する。
1個のHTMLファイルにのみ適用させたい場合はこの方法を用いる。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <body>要素内（</body>の直前）に<script>タグを使用してJavaScriptを記述する。-->
<script>
alert("HELLO");
console.log("HELLO");
</script>
</body>
</html>
JavaScriptファイルを作成してHTMLの<body>要素内（</body>の直前）で<script>タグを使用して読み込む。
複数のHTMLファイルに共通で適用させたい場合はこの方法を用いる。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- HTMLの<body>要素内（</body>の直前）で<script>タグを使用して読み込む。-->
<script src="js/sample.js"></script>
</body>
</html>
sample.js
"use strict";
alert("HELLO");
console.log("HELLO");
</body>の直前に記述した場合はページの読み込みが速くなる。
先に読み込みたい画像や関数がある場合は<head>要素内に記述する。
何かを表示する場合は<body>要素内の実際の表示位置に記述する。
変数宣言
const name = "山田太郎";
let age = 25;
constで変数宣言をした場合は値を再度代入することはできない。
letで変数宣言をした場合は値を再度代入することができる。
厳密等価演算子
厳密等価演算子は型の違いも比較する。
5 === 5; // true
5 === "5"; // false
5 !== 5; // false
制御構文
if文
let score = 750;
if (score >= 600) {
console.log("合格");
} else {
console.log("不合格");
}
while文
let i = 0;
while (i < 10) {
console.log(i + "回目");
i++;
}
for文
for (let i = 0; i < 10; i++) {
console.log(i + "回目");
}
break文
for (let i = 0; i < 10; i++) {
if (i === 5) {
break; // ループを終了する。
}
console.log(i + "回目");
}
continue文
for (let i = 0; i < 10; i++) {
if (i === 5) {
continue; // 現在の反復処理をスキップする。
}
console.log(i + "回目");
}
配列
配列
- 配列宣言
データ型がバラバラの配列も宣言することができる。
let numbers = [5, 10, 15, 20, 25];
let numbers = new Array(5, 10, 15, 20, 25);
- 配列の要素を取得する。
let numbers = [5, 10, 15, 20, 25];
console.log("2番目の要素：" + numbers[2]);
- for文
let numbers = [5, 10, 15, 20, 25];
for (let i = 0; i < numbers.length; i++) {
j = i + 1;
console.log(j + "番目の要素：" + numbers[i]);
}
- for-of文
let numbers = [5, 10, 15, 20, 25];
let i = 1;
for (let number of numbers) {
console.log(i + "番目の要素：" + number);
i++;
}
連想配列
キーと値のペアでデータを管理する配列。
- 連想配列宣言
let profile = {
name: "山田太郎",
age: 25,
gender: "男性",
address: "東京都"
}
- 連想配列の要素を取得する。
let profile = {
name: "山田太郎",
age: 25,
gender: "男性",
address: "東京都"
}
// キーは「''」または「""」で囲む。数字の場合も同様。
let name = profile["name"];
// 下記の記述方法でも取得することができる。
let name = profile.name;
- 連想配列の要素に代入（上書き）する。
let profile = {
name: "山田太郎",
age: 25,
gender: "男性",
address: "東京都"
}
profile["address"] = "京都府";
profile.address = "京都府";
関数
関数宣言
関数宣言の前に関数を呼び出すことができる（関数の巻き上げ）。
console.log(add(5, 10)); //「15」と出力される。
function add(a, b) {
return a + b;
}
console.log(add(5, 10)); //「15」と出力される。
関数式
匿名関数を変数に代入して宣言する。
関数式の宣言の前に関数式を呼び出すことはできない（巻き上げはNG）。
console.log(add(5, 10)); // エラーが発生する。
const add = function(a, b) {
return a + b;
}
console.log(add(5, 10)); //「15」と出力される。
アロー関数式
関数式をシンプルに書くための構文。
「function」を使用せずに「=>（アロー）」を使用して関数を宣言する。
console.log(add(5, 10)); // エラーが発生する。
const add = (a, b) => {
return a + b;
}
console.log(add(5, 10)); //「15」と出力される。
アロー関数式の省略記法
処理が1行の場合は「{}」と「return」も省略することができる。
console.log(add(5, 10)); // エラーが発生する。
const add = (a, b) => a + b;
console.log(add(5, 10)); //「15」と出力される。
連想配列の値に関数式を宣言する
let profile = {
name: "山田太郎",
age: 25,
gender: "男性",
address: "東京都",
selfIntroduction: function () {
console.log("私の名前は" + this.name + "です。");
}
}
console.log(profile["name"]); //「山田太郎」と出力される。
console.log(profile.name); //「山田太郎」と出力される。
console.log(profile["selfIntroduction"]()); //「私の名前は山田太郎です。」と出力される。
console.log(profile.selfIntroduction()); //「私の名前は山田太郎です。」と出力される。
変数のスコープ
varを使用した変数宣言に関する注意点
-
var、const、letのキーワードを省略した場合はglobalThisに対するプロパティ宣言として認識される。 -
varを使用して関数の外で変数宣言をした場合はグローバル変数になる。 -
varを使用して関数の中で変数宣言をした場合は関数スコープの変数になる。 -
varを使用してブロックの中で変数宣言をした場合は関数スコープの変数になる。
方針
基本はconstで変数宣言をして、再代入が必要な場合のみletで変数宣言をする。
テンプレートリテラル
テンプレートリテラルを使用した場合は文字列連結をする必要が無くなる。
const name = "山田太郎";
const age = 25;
console.log(name + "の年齢は" + age + "歳です。");
console.log(`${name}の年齢は${age}歳です。`);