JavaScriptの基本知識をゼロから学ぶハンズオン学習

  1. JavaScriptでHelloWorldを表示してみよう
    1. 1. HelloWorldを表示してみよう
      1. 1-1. JavaScriptファイルの作成
      2. 1-2. コーディング
    2. 2. コメントアウト
  2. 演算
    1. 1. 四算演算子
    2. 2. 複合代入演算子
    3. 3. 比較演算子
    4. 4. 論理演算子
    5. 5. 単項演算子（インクリメント、デクリメント）
  3. 変数
    1. 1. 変数
      1. 1-1. 変数とは
      2. 1-2. 変数の定義
      3. 1-3. 代入
      4. 1-4. 文字列の代入
    2. 2. データ型
    3. 3. 変数の命名規則
    4. 4. var
    5. 5. 定数
      1. 5-1. 定数と変数の違い
      2. 5-2. 定数の定義
  4. テキストの扱い
    1. 1. テンプレートリテラル
      1. 1-1. 変数
      2. 1-2. 式
      3. 1-3. 複数行の文字列
  5. 配列
    1. 1. 配列の定義
    2. 2. 配列の要素を取得
      1. 2-1. 配列の要素を全て取得
      2. 2-2. 配列の指定した要素を取得
    3. 3. 配列の要素を変更する
    4. 4. 配列に要素を追加
      1. 4-1. 配列の先頭に要素を追加
      2. 4-2. 配列の末尾に要素を追加
    5. 5. 配列の要素を削除
      1. 5-1. 配列の先頭要素を削除
      2. 5-2. 配列の末尾要素を削除
      3. 5-3. 配列の指定した要素を削除
    6. 6. 配列要素を順に取得
    7. 7. 配列内の各要素ごとに対して処理を行う
    8. 8. 配列の中から絞り出された要素だけを抽出
    9. 9. 文字列を条件により分割し、それぞれを配列に格納
    10. 10. 配列の要素をひとつの文字列にする
  6. オブジェクト
    1. 1. オブジェクトとは
    2. 2. オブジェクトの定義
    3. 3. オブジェクトの取得
  7. JavaScriptの組み込み関数
    1. 1. データ型を取得するtypeof
    2. 2. 浮動小数点を丸めるtoFixed()メソッド
    3. 3. 文字列型から数値型へ変換するNumber()メソッド
    4. 4. 数値型から文字列型へ変換するString()メソッド
    5. 5. 文字列の長さを調べるlengthプロパティ
    6. 6. 文字列内の特定の文字を取得する
    7. 7. 文字列内の特定の文字列を取得する
    8. 8. 文字列に特定の文字列が含まれているか判定する
      1. 8-1. includes()メソッド
      2. 8-2. startsWith()メソッド
      3. 8-3. endsWith()メソッド
    9. 9. 文字列内の特定の文字列の位置を取得する
    10. 10. 大文字小文字の変換
      1. 10-1. 大文字から小文字へ変換
      2. 10-2. 小文字から大文字へ変換
    11. 11. 文字列の一部を書き換える
  8. 条件分岐
    1. 1. 条件分岐とは
    2. 2. if文
      1. 2-1. if-else文
      2. 3. else if文
      3. 4. if文のネスト
    3. 3. switch文
    4. 4. 三項演算子
  9. 繰り返し処理
    1. 1. 繰り返し処理とは
    2. 2. for文
      1. 2-1. for文
      2. 2-2. for文のネスト
    3. 3. while文 と do-while文
      1. 3-1. while文
      2. 3-2. do-while文
    4. 5. for…in文
    5. 6. for…of文
    6. 7. break文
    7. 8. continue文
    8. 9. ラベル
      1. 9-1. ラベルの定義
      2. 9-2. ラベルの呼び出し
      3. 9-3. 例文
  10. 関数
    1. 1. 関数とは
    2. 2. 関数の定義
    3. 3. 関数の呼び出し
    4. 4. デフォルト引数
    5. 5. 無名関数
      1. 5-1. 無名関数の定義
      2. 5-2. 関数の中に無名関数を使用
      3. 5-3. 無名関数の即時関数
    6. 6. アロー関数
  11. イベント
    1. 1. イベントとは
  12. オブジェクト
    1. 1. オブジェクトとは

JavaScriptでHelloWorldを表示してみよう

1. HelloWorldを表示してみよう
2. コメントアウト

1. HelloWorldを表示してみよう

1-1. JavaScriptファイルの作成

「HelloWorld」を表示するために、まずフォルダとファイルを作成します。

① 「新しいフォルダ」を押下します。
ここではフォルダ名を、「src」とします。

② srcフォルダを選択した状態で、「新しいファイル」を押下します。

③ ファイル名を「HelloWorld.js」とします。
今回はJavaScriptのファイルを作成したいため、拡張子を「.js」とします。

④ しかし、これだけではコンソールに「HelloWorld」を表示できません。
そこでこのJavaScriptファイルを読み込むHTMLファイルを用意します。
②と同じように新しいファイルを押下し、「index.html」というHTMLファイルを作成します。

1-2. コーディング

コンソールに表示するには、「console.log()」を使用します。

console.log(コンソールに表示したい内容);

HelloWorldを表示します。

console.log("HelloWorld");

次に、index.htmlをコーディングしていきます。

<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
	<h1>Hello HTML</h1>
</body>
</html>

このHTMLファイルをブラウザに表示してみます。

HTMLファイルの内容が表示されました。
しかし、JSファイルがまだこのHTMLファイルに読み込まれていないため、読み込むコードを追加します。

<script src="JSファイル"></script>

では、HTMLにHelloWorld.jsを読み込むコードを追加します。

<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
	<h1>Hello HTML</h1>
        <script src="HelloWorld.js"></script>  //追加
</body>
</html>

デベロッパーツールを起動します。

Consoleに、JCファイルに記述した「HelloWorld」が表示されました。

2. コメントアウト

コメントアウトしたい行に「/* */」や「//」を付与すると、その行は処理されません。

console.log("HelloWorld");

/*
console.log("HelloJavaScript");
 */

// console.log("JavaScript");

演算

1. 四算演算子
2. 複合代入演算子
3. 比較演算子
4. 論理演算子
5. 単項演算子（インクリメント、デクリメント）

1. 四算演算子

JavaScriptの演算子には、以下のものがあります。

演算の種類演算子の記号記述例
加算+2 + 1
減算–2 – 1
乗算*2 * 1
除算/2 / 1
剰余%2 % 1
べき乗**2 ** 2

例文

// 加算
console.log(3+1);  // 4

// 減算
console.log(3-1);  // 2

// 乗算
console.log(3*2);  // 6

// 除算
console.log(3/2);  // 1.5

// 剰余
console.log(3%2);  // 1

2. 複合代入演算子

JavaScriptにおける主な代入演算は、以下のとおりです。

複合代入演算子記述例該当する演算
+=a += 1;a = a + 1;
-=a -= 1;a = a – 1;
*=a *= 2;a = a * 2;
/=a /= 2;a = a / 2;
%=a %= 2;a = a % 2;

3. 比較演算子

比較演算子は、ある値と別の値を比較し、その結果をtrueまたはfalseで返します。
主な比較演算子は以下のとおりです。

比較演算子概要
a === baとbが同じのとき、true
a !== baとbが同じのとき、false
a < baがbより小さいとき、true
a <= baがb以下のとき、true
a > baがbより大きいとき、true
a >= baがb以上のとき、true

4. 論理演算子

論理演算子とは、ある値と別の値を「および」や「または」で評価し、その結果をtrueまたはfalseで返します。
主な論理演算子は以下のとおりです。

論理演算子概要
a && baとbが両方trueのとき、全体の評価結果がtrueとなる
a || baとbの少なくともどちらか１つがtrueのとき、全体の評価結果がtrueとなる
!aaがtrueのとき、評価結果がfalseとなる

5. 単項演算子（インクリメント、デクリメント）

変数に1を足す、もしくは引くだけの処理を行う際、変数の前後どちらかに「++」を付けた処理をインクリメント、変数の前後どちらかに「–」を付けた処理をデクリメントといいます。

インクリメント

$変数名++;

デクリメント

$変数名--;

変数

1. 変数
2. データ型
3. 変数の命名規則
4. var
5. 定数

1. 変数

1-1. 変数とは

変数とは、数値や文字列などの値を入れるための箱のようなもので、中の値を変更することが可能です。
この変数には、値を１つだけ格納することが可能です。

1-2. 変数の定義

変数を定義するには、let を使用します。
変数の宣言する方法は以下のとおりです。

let 変数名 = 代入する値;

例文

let num = 1;  // 変数numを宣言し、1で初期化

例文

let num = 1;
console.log(num);

出力結果

1-3. 代入

変数に対して値を代入することができ、何度も値を変えることができます。

例文

let num = 1;
console.log(num);

num = 3;
console.log(num);

// let num = 9;  ①

① letで変数名を指定してしまうと、新たな変数を定義するという意味になってしまいます。
そのため、コメントアウトを外すと変数名重複でエラーとなります。

1-4. 文字列の代入

文字列の代入には、文字列を囲む引用符として、単一引用符と二重引用符を使用します。

const single = '単一引用符';
const double = "二重引用符";
const backtick = `逆引用符`;

console.log(single);
console.log(double);
console.log(backtick);

2. データ型

JavaScriptは動的言語のため、変数等の定義時にデータ型を宣言する必要はありません。
しかし、データ型の種類を覚えておく必要があります。
以下のデータ型があります。

データ型概要
数値型数値は 30 のような整数値や、2.456 のような浮動小数点。
引用符は付与しません。
文字列型文字列値を設定する場合、単一引用符 (') または二重引用符 (") で文字を囲みます。
論理型論理型は真偽値です。 
true と false の 2 つの値を持ちます。

3. 変数の命名規則

変数名を命名する時のルールとして、半角アルファベット（a～z、A～Z）、数字、_（アンダーバー）が使用でき、大文字と小文字を区別します。
変数名は自由に付けることができますが、数字や、C言語にあらかじめ定義されている予約語は名前に付けられません。
開発現場では、そのプロジェクトの開発規約に沿って定義しますが、変数名は基本的にはキャメルケースを使用します。

4. var

変数はvarでも定義できます。
しかし、var を使用すると、好きなだけ同じ変数を何度でも宣言することができてしまいます。
そのため、varは使用すべきではありません。
例文

var num = 1;
console.log(num);

num = 3;
console.log(num);

var num = 9;  // エラーが生じず、混乱を招く

5. 定数

5-1. 定数と変数の違い

定数と変数と違いは以下の２点です。

  • 宣言した時点で初期化する必要がある
  • 初期化した後、新しい値を割り当てることはできない

5-2. 定数の定義

定数の定義方法は以下のとおりです。

const 定数名;

例文

// const errVal;  初期化していないため、エラー

const val = 1;
// val = 2;  新しい値を代入しているため、エラー

テキストの扱い

1. テンプレートリテラル

1. テンプレートリテラル

テンプレートリテラルでは、 JavaScript の変数や式を ${ } で囲んで入れることができ、その結果が文字列の中に取り込まれます。
テンプレートリテラルを使用するには「`」を使用します。

1-1. 変数

例文１

const str = "World";
const result = `Hello, ${str}`;
console.log(result); // Hello, World と表示

例文２

const str1 = "World";
const str2 = "Hello, ";
const result = `${str2} ${str1}`;
console.log(result); // "Hello, World"

1-2. 式

例文

const num1 = 1;
const num2 = 2;
const result = `${num1 + num2}`;
console.log(result); // 3と表示

1-3. 複数行の文字列

テンプレートリテラルは、ソースコードの改行を表現することができます。
例文

const str = `今日は天気が良いので公園に出かけました。
しかし、雨が降ってきたので、途中で家に引き返しました。
残念です。。。`;

console.log(str);

配列

1. 配列の定義
2. 配列の要素を取得
3. 配列の要素を変更する
4. 配列に要素を追加
5. 配列の要素を削除
6. 配列要素を順に取得
7. 配列内の各要素ごとに対して処理を行う
8. 配列の中から絞り出された要素だけを抽出
9. 文字列を条件により分割し、それぞれを配列に格納
10. 配列の要素をひとつの文字列にする

1. 配列の定義

配列とは角括弧 ([]) にカンマで区切った複数の値を格納できるオブジェクトです。

let 配列名 = [要素１, 要素２・・・];

例文

const strArray = ["A", "B", "C"];
const intArray = [10, 15, 40];

2. 配列の要素を取得

2-1. 配列の要素を全て取得

配列変数に格納されている要素を全て取得するには、配列名を指定します。
例文

const strArray = ["A", "B", "C"];
console.log(strArray);  // (3)['A','B','C']

2-2. 配列の指定した要素を取得

配列変数に格納されている要素は、添え字を指定することで取得できます。

配列名[要素番号];

例文（1. 配列の定義の例文より）

strArray[0]  //A
strArray[1]  //B
strArray[2]  //C
intArray[0]  //10
intArray[1]  //15
intArray[2]  //40

3. 配列の要素を変更する

配列の要素を変更するには、変更を行う要素の添字を指定し、その値を代入します。

配列名[添字] = 変更を行う値;

例文

const strArray = ["A", "B", "C"];
strArray[0] = "Z";
console.log(strArray);  // Z,B,C

4. 配列に要素を追加

4-1. 配列の先頭に要素を追加

配列の先頭に 1 つ以上の項目を追加するには、unshift()メソッドを使用します。
引数は、複数含めることもできます。

配列名.unshift(追加する要素);

例文

const strArray = ["A", "B", "C"];
strArray.unshift("Z");
console.log(strArray);  // Z,A,B,C

4-2. 配列の末尾に要素を追加

配列の末尾に 1 つ以上の項目を追加するには、push()メソッドを使用します。
引数は、複数含めることもできます。

配列名.push(追加する要素);

例文

const strArray = ["A", "B", "C"];
strArray.push("Z");
console.log(strArray);  // A,B,C,Z

5. 配列の要素を削除

5-1. 配列の先頭要素を削除

配列から最初の項目を削除するには、shift()メソッドを使用します。

配列名.shift();

例文

const strArray = ["A", "B", "C"];
strArray.shift();
console.log(strArray);  // B,C

5-2. 配列の末尾要素を削除

配列から最後の項目を削除するには、pop()メソッドを使用します。

配列名.pop();

例文

const strArray = ["A", "B", "C"];
strArray.pop();
console.log(strArray);  // A,B

5-3. 配列の指定した要素を削除

配列の指定した要素を削除するには、splice()メソッドを使用します。

配列名.splice(要素の開始位置, 要素の終了位置);

例文

const strArray = ["A", "B", "C"];
strArray.splice(1, 1);
console.log(strArray);  // A,C

6. 配列要素を順に取得

配列要素を順に取得するには、for…of文を使用します。
Java言語でいう拡張for文のようなものです。

for(const 取り出した要素を格納する定数 of 配列名){
}

例文

const str = ["A", "B", "C"];

for (const s of str) {
  console.log(s);
}

7. 配列内の各要素ごとに対して処理を行う

配列内の各要素ごとに対して処理を行うには、map() メソッドを使用します。
引数には処理を行う関数を指定します。

配列名.map(処理を行う関数);

例文

function format(str) {
    return `配列strの要素を順に取得${str}`;
  }
  const str = ["A", "B", "C"];
  const result = str.map(format);
  console.log(result);

8. 配列の中から絞り出された要素だけを抽出

元の配列の中でテストに適合する項目のみを含む新しい配列を作成します。
関数が true を返した場合、その項目は新しい配列に追加されます。最後に、この関数は新しい配列を返します。

function isLong(city) {
    return city.length > 2;
  }
  const cities = ["東京", "名古屋", "大阪", "鹿児島"];
  const longer = cities.filter(isLong);
  console.log(longer); // [ "名古屋", "鹿児島" ]

9. 文字列を条件により分割し、それぞれを配列に格納

文字列を条件により分割し、それぞれを配列に格納するには、split()メソッドを使用します。

定数.split(条件);

例文

const data = "A,B,C,D,E";
const cities = data.split(",");  // カンマで区切る
console.log(cities[0]);  // A
console.log(cities[1]);  // B
console.log(cities[2]);  // C
console.log(cities[3]);  // D
console.log(cities[4]);  // E

10. 配列の要素をひとつの文字列にする

配列の要素をひとつの文字列にするには、join()メソッドを使用します。

配列名.join(条件);

例文

const cities = ["A","B","C"];
const data = cities.join(",");
console.log(data);  // A,B,C

オブジェクト

1. オブジェクトとは
2. オブジェクトの定義
3. オブジェクトの取得

1. オブジェクトとは

オブジェクトとは、「複数のプロパティを持つデータのまとまり」です。それぞれのプロパティにはデータが保存されているので、オブジェクトとは、「各種データをひとまとめにして、1つの変数として扱えるデータ」ということもできます。

2. オブジェクトの定義

定義方法は、以下のとおりです。

let オブジェクト名 = { key1 : value1,  key2 : value2,・・・ }

例文

let employee = { 
    name: "Jon",
    age: 20
 }

3. オブジェクトの取得

オブジェクトに格納された情報を取得するには、以下のようにします。

オブジェクト名.key;

例文

employee.name;  //Jon
employee.age;  //20

JavaScriptの組み込み関数

1. データ型を取得するtypeof
2. 浮動小数点を丸めるtoFixed()メソッド
3. 文字列型から数値型へ変換するNumber()メソッド
4. 数値型から文字列型へ変換するString()メソッド
5. 文字列の長さを調べるlengthプロパティ
6. 文字列内の特定の文字を取得する
7. 文字列内の特定の文字列を取得する
8. 文字列に特定の文字列が含まれているか判定する
9. 文字列内の特定の文字列の位置を取得する
10. 大文字小文字の変換
11. 文字列の一部を書き換える

1. データ型を取得するtypeof

データ型を取得するtypeofを使用すると、その変数のデータ型を取得することができます。

typeof 変数名

例文

let val = "11"; // 文字列の11で初期化
console.log(typeof val); // 文字列

val = 11; // 数値の11を代入
console.log(typeof val); // 数値

2. 浮動小数点を丸めるtoFixed()メソッド

toFixed()メソッドの引数に浮動小数点のどのあたりを丸めたいかを指定します。
その結果を変数や定数に代入します。
例文

const num = 0.123456789
console.log(num);  // 0.123456789と表示

const afterNum = num.toFixed(2);  //少数点第２位を指定
console.log(afterNum);  // 0.12と表示

3. 文字列型から数値型へ変換するNumber()メソッド

文字列の数字を数値型へ変換するには、Number()メソッドを使用します。
ここで実践してみます。
例文

let num = "1";
num = num + 2;
console.log(num);  // 12と表示

文字列型の”1″と数値型の２を加算すると、「12」になってしまいます。
そこで、文字列型の”1″を数値型に変換する必要があります。

let num = "1";
num = Number(num) + 2;
console.log(num);  // 3と表示

4. 数値型から文字列型へ変換するString()メソッド

数値型の数字を文字列型へ変換するには、String()メソッドを使用します。
例文

const num = 123;  // number型
const result = String(num);
console.log(typeof result);  // string

5. 文字列の長さを調べるlengthプロパティ

lengthプロパティは、文字列の長さを返します。

定数（または変数）.length;

例文

const str = "ABCDE";
console.log(str.length);   //5と表示

6. 文字列内の特定の文字を取得する

文字列のうちの特定の文字を取得を行うには、配列の要素を取得するように「定数名（または変数名）[取得したい要素の添字]」を使用します。

定数名[取得したい要素の添字];

例文

const str = "ABCDE";
console.log(str[3]);  // Dが表示

なお、lengthプロパティと組み合わせることができます。
0 から始まるので、最後の文字の位置は 5 になり、 length-1 とする必要があります。

const str = "ABCDE";
console.log(str[str.length - 1]);  // Eが表示

7. 文字列内の特定の文字列を取得する

文字列から文字列を抽出するには、 slice()メソッドを使用します。
第１引数に抽出を開始するインデックス、第２引数に抽出を終了するインデックスを指定します。なお、第２引数は省略可能です。

定数.slice(抽出開始インデックス, 抽出終了インデックス)

例文

const str = "ABCDE";
console.log(str.slice(1, 3));  // BC
console.log(str.slice(1));  // BCDE

8. 文字列に特定の文字列が含まれているか判定する

8-1. includes()メソッド

文字列に特定の文字が含まれているか確認するには、includes()メソッドを使用します。
文字列がその部分文字列を含んでいれば true を返し、そうでなければ false を返します。

includes(検索したい文字列)

例文

const str = "ABCDE";
console.log(str.includes("C"));  // true
console.log(str.includes("Z"));  // false

8-2. startsWith()メソッド

文字列が特定の部分文字列で始まるかを確認します。

startsWith(検索したい文字列, 出現が予想される開始点)

例文

const str = "ABCDE";
console.log(str.startsWith("AB"));  // true
console.log(str.startsWith("DE"));  // false

8-3. endsWith()メソッド

文字列が特定の部分文字列で終わるかを確認します。
第２引数に検索する文字列の出現が予想される開始点を指定します。なお、第２引数は省略可能です。

endsWith(検索したい文字列, 出現が予想される開始点)

例文

const str = "ABCDE";
console.log(str.endsWith("AB"));  // false
console.log(str.endsWith("DE"));  // true

9. 文字列内の特定の文字列の位置を取得する

文字列内の特定の文字列の位置を探すには、indexOf()メソッドを使用します。
第１引数に検索したい文字列、第２引数に検索の開始点を指定します。なお、第２引数は省略可能です。
その文字の出現位置を返し、なければ-1を返します。

定数.indexOf(検索したい文字列, 検索の開始点)

例文

const str = "ABCDE";
console.log(str.indexOf("BC"));  // 1
console.log(str.indexOf("Z"));  // -1
console.log(str.indexOf("BC", 3));  // -1
console.log(str.indexOf("BC", 1));  // 1

10. 大文字小文字の変換

10-1. 大文字から小文字へ変換

大文字から小文字へ変換するには、toLowerCase()メソッドを使用します。

定数.toLowerCase()

例文

const str = "AbcDEfg";
console.log(str.toLowerCase());  // abcdefg

10-2. 小文字から大文字へ変換

小文字から大文字へ変換するには、toUpperCase()メソッドを使用します。

定数.toUpperCase()

例文

const str = "AbcDEfg";
console.log(str.toUpperCase());  // ABCDEFG

11. 文字列の一部を書き換える

文字列の一部を書き換えるには、replace()メソッドを使用します。
第１引数に置き換え前、第２引数に置き換え後を指定します。
replace()メソッドは、文字列を変更するのではなく、新しい文字列を返すことに注意が必要です。

定数.replace(書き換え前, 書き換え後)

例文

const str = "ABCDE";
console.log(str.replace("BCD", "ZYX"));  //AZYXE

条件分岐

1. 条件分岐とは
2. if文
3. switch文
4. 三項演算子

1. 条件分岐とは

条件分岐とは、「もし～なら」や「もし～でないなら」とある条件が成り立つかどうかで動作を変えることができます。

2. if文

2-1. if-else文

JavaScriptでは、if文を使用することで実装できます。
条件式は、trueかfalseの結果となるものを指定します。
なお、else以降は省略することも可能です。

if(条件式){
    trueの場合の処理
} else {
    falseの場合の処理
}

3. else if文

else if文は３分岐以上の条件分岐を行いたい場合に使用します。
コードは上から順に評価され、trueとなった時にこのif文を抜けます。
構文は以下のとおりです。

if (条件式1) {
    条件式1がtrueの場合の処理
} else if(条件式2) {
    条件式2がtrueの場合の処理
} else {
    上記の条件式がfalseの場合の処理
}

4. if文のネスト

if文はネストすることもできます。

if(条件式){
    if(条件式){
        trueの場合の処理
    } else {
        falseの場合の処理
    }
} else {
    falseの場合の処理
}

3. switch文

switch文により条件分岐を行うことができます。

switch (式) { //①
  case 値1: //② 値はcaseの値1と同じかをチェック
    処理1; //③
    break; //④
  case 値2: //② 値はcaseの値2と同じかをチェック
    処理2; //③
  case 値3: //② 値はcaseの値3と同じかをチェック
    処理3; //③
    break; //④
  default: //⑤
    上記のcaseに該当しない場合の処理
}

① caseと比較する値を指定します。
② caseはswitchの値と比較され、同じであれば③の処理を行います。
③ ②のcaseで一致（true）した場合、その処理を行います。
④ breakは、そのcaseの処理を抜けます。すなわち、breakに到達しなければ処理を抜けないことを意味するため、case2にはbreakがないため、case3の処理も実行されます。（フォールスルー）
⑤ defaultは、caseに該当しない場合に実行されます。

4. 三項演算子

三項演算子は、以下のように定義できます。

条件 ? trueの場合の処理 : falseの場合の処理;

また、三項演算子はその結果を定数などに格納できます。

const 定数名 = 条件 ? trueの場合の処理 : falseの場合の処理;

例文

const num = 3;
const result = num >= 5 ? "5以上" : "5より小さい";
console.log(result);  //「5より小さい」が表示される

繰り返し処理

1. 繰り返し処理とは
2. for文
3. while文
4. do-while文
5. for…in文
6. for…on文
7. break文
8. continue文
9. ラベル

1. 繰り返し処理とは

１〜１００の数字を表示したい場合、以下のようにすると表示できます。

console.log(1);
console.log(2);
 // 3~99は省略
console.log(100);

しかし、面倒です。
その時にJavaScriptでは繰り返し処理によるfor文またはwhile文を使用します。

2. for文

2-1. for文

for文による繰り返し処理は以下のように定義します。

for (初期化式; 条件式; 更新式) {  //①
  for文の条件式でtrueの際、繰り返される処理 //②
}

① 初期化式には、for文の処理のスタート地点を指定します（最初の一度だけ実行）
　 条件式には、for文による繰り返し処理がどのくらいまで行うかの条件を指定します。
　 更新式には、{ }内の処理を実行したあとに行われます。
② 処理は①の条件式により結果がtrueとなった場合に、実行されます。そのため、①がfalseの場合②の処理は実行されません。

例文

「1. 繰り返し処理とは」で出題した参考コードを、for文に置き換えてみます。

for (let i = 1; i <= 100; i++) {
    console.log(i);
}

1からスタート（int i = 1;）し、100まで処理を繰り返します（i <= 100）。なので、100まではtrueの評価となります。
for文内の処理が終わると、初期化式の数値から1ずつ増えていきます（i++）。
条件式が101となるとfalseの評価となりこのfor文を抜けます。

2-2. for文のネスト

for文もif文と同様にネストすることができます。

for (初期化式; 条件式; 更新式){
    for (初期化式; 条件式; 更新式){
    }
}

3. while文 と do-while文

3-1. while文

while文による繰り返し処理は以下のように定義します。

初期化式 //①
while (条件式) { //②
  while文の条件式でtrueの際、繰り返される処理 //③
  更新式 //④
}

① 初期化式には、while文の処理の最初に、一度だけ実行されます。
② 条件式には、while文による繰り返し処理の条件を指定します。
③ 処理は②の条件式により結果がtrueとなった場合に、実行されます。そのため、②がfalseの場合②の処理は実行されません。
④ 更新式には、{ }内の処理を実行したあとに行われます。

例文

「1. 繰り返し処理とは」で出題した参考コードを、while文に置き換えてみます。

let i = 1;
while (i <= 100) {
    console.log(i);
    i++;
}

3-2. do-while文

do-while文による繰り返し処理は以下のように定義します。

do {
  処理 //①
} while (条件式); //②

① whileの条件式判定より前にdo{ } 内の処理が実行されます。
② ①の処理後に条件式判定を行います。以降の処理はwhile文と同じです。

5. for…in文

オブジェクトにあるすべての列挙可能なプロパティに対し指定された変数を通して反復処理を行います。

for (変数 in オブジェクト名) {
    処理
}

例文

const arr = [3, 5, 7];
arr.str = "STRING";

for (const i in arr) {
  console.log(i);  // "0" "1" "2" "str"
}

プロパティの添字及び、名称が取得できます。値は取得しません。

6. for…of文

反復可能オブジェクトを反復処理するループを生成し、それぞれのプロパティの値に対して実行したい文をともなって作られた反復処理フックを呼び出します。

for (変数 of オブジェクト名) {
    処理
}

例文

const arr = [3, 5, 7];
arr.str = "STRING";  //プロパティ名、値は取得できない

for (const i of arr) {
  console.log(i);  // 3 5 7
}

値を取得できます。プロパティ名は取得できません。

7. break文

break文は処理を抜ける際に使用します。
ループ、switch、ラベル文を使った関連付けを終了させることができます。
例文

for (let i = 1; i <= 100; i++) {
    console.log(i);
    if(i == 50) {
        break;
    }
}

1から100までの繰り返し文ですが、if文の条件式に50となったときに処理を抜けるbreakとしており、繰り返し処理を抜けます。

8. continue文

continue文は、while、do-while、for、label 文を再起動する際に使用されます。
例文

for (let i = 1; i <= 100; i++) {
    if(i % 2 == 0) {
        continue;
    }
    console.log(i);
}

1から100までの繰り返し文ですが、if文の条件式に偶数となったときにスキップを行うcontinueとしております。

9. ラベル

プログラム内の他の場所から参照できる識別子を組み込んだ文が作成できます。
ラベルを break 文や continue 文で使用することができます。

9-1. ラベルの定義

ラベルの定義方法は以下のとおりです。

ラベル名: 処理文;

9-2. ラベルの呼び出し

break文の場合

break ラベル名;

continue文の場合

continue ラベル名;

9-3. 例文

continue文でのラベル

con : for (let i = 1; i <= 100; i++) {
    if(i % 2 == 0) {
        continue con;
    }
    console.log(i);
}

関数

1. 関数とは
2. 関数の定義
3. 関数の呼び出し
4. デフォルト引数
5. 無名関数
6. アロー関数

1. 関数とは

関数とは、計算を行う処理など何度でも再利用可能な処理をまとめたものを定義することができます。

2. 関数の定義

関数の定義には以下のように定義します。

function 関数名(引数1, 引数2,・・・) { //①
    処理
    return 返す値; //②
}

① 引数は省略でき、またカンマで区切って複数指定できます。
　この受け取った引数を使用して関数内の処理に使用していきます。
② returnは戻り値であり、関数の処理結果をこの関数を呼び出した元へ返します。省略可能です。
またreturnは処理制御を戻す意味もあり、このreturn直後にコードを記述すると到達できないコードとなりエラーになります。

例文１

function fun() {
  console.log("関数");
}

例文２

function fun(str) {
  console.log(str);
}

3. 関数の呼び出し

関数は、関数名と引数の数を合わせてることで呼び出せます。

関数名(引数1, 引数2,・・・)

例文１

function fun() {
  console.log("関数");
}

fun();

例文２

function fun(str) {
  console.log(str);
}

fun("関数");

4. デフォルト引数

関数の引数に既定値を設定することもできます。
引数名の後に = をつけ、既定値を指定します。

function 関数名(引数1 = 既定値, 引数2 = 既定値,・・・) {
    処理
}

例文

function fun(str = "既定値") {
  console.log(str);
}

fun("関数");   // 関数
fun();   // 既定値

5. 無名関数

5-1. 無名関数の定義

無名関数とはその名の通り、名前を持たない関数のことです。

(function () {
    処理
});

5-2. 関数の中に無名関数を使用

無名関数は、ある関数が他の関数を引数として受け取ることを想定している場合に多く見られます。この場合、関数の引数はしばしば匿名関数として渡されます。

setTimeout(function() {
  console.log("このメッセージは2秒後に表示されます");
}, 2000);

JavaScriptの組み込み関数であるsetTimeout()メソッド内に無名関数を指定しています。

5-3. 無名関数の即時関数

無名関数を定義と同時に実行する方法です。

例文

(function() {
  console.log("無名関数");
})();  // 無名関数の呼び出し

6. アロー関数

アロー関数は、基本的に無名関数に対して「=>（アロー演算子）」を使用して処理を行います。
function(引数)の代わりに(引数) =>とコーディングします。

const 関数名 = (引数1, 引数2, ...) => {
  return 処理
};

引数を 1 つしか取らない関数の場合、引数を囲む括弧は省略できます。

const 関数名 = 引数 => {
  return 処理
};

関数の中身が return 文の 1 行だけであれば、中括弧と return キーワードを省略して式を暗黙的に返すこともできます。

const 関数名 = (引数1, 引数2, ...) => {
  処理
};

例文

const add = (a, b) => a + b;

console.log(add(2, 3));  // 5

イベント

1. イベントとは

1. イベントとは

オブジェクト

1. オブジェクトとは

1. オブジェクトとは