JavaScriptをProgateでインプットしたので、基本文法を備忘録としてまとめてみた

目次

No	項目
1	変数と定数
2	出力
3	条件分岐(if, switch)
4	繰り返し処理
5	配列
6	オブジェクト
7	関数
8	スコープ
9	クラス

変数と定数

変数は let 変数名;、定数はconst 定数名;で定義する。

例

// 変数の定義
let num = 3;

// 定数の定義
const fruits = "りんご";

出力

コンソール出力はconsole.log();で出力する。

例

let num = 3;
const fruits = "りんご";

console.log(num);
console.log(fruits);
console.log('りんごを3個食べました');

実行結果

3
りんご
りんごを3個食べました

また、変数と定数を文字列の中に含める場合は${name}を使用する。
下記のようにバックコーテーション(`)とテンプレートリテラル(${})を使用する

例

console.log(`${fruits}を${num}個食べました`);

実行結果

りんごを3個食べました

条件分岐

if文
下記のように条件分岐する。セミコロン(;)は不要。

例

let num = 5
if (num == 1) {
    console.log("1です");
  } else if (num == 5){
    console.log("5です");
  } else {
    console.log("上記以外です");
}  //セミコロンは不要

実行結果

5です

※条件式のand, orなどは割愛。

switch文
下記のように条件分岐する。セミコロン(;)は不要。

例

let num = 5
switch (num) {
    case 1:
        console.log("1です");
        break;
   
    case 5:
        console.log("5です");
        break;
   
    default:
        console.log("上記以外です");
        break;
   }  //セミコロンは不要

実行結果

5です

繰り返し処理

while文
下記のように繰り返し処理をする。セミコロン(;)は不要。

例

let num = 0
while (num <= 5) {
    console.log(num);
    num += 1;
}  //セミコロンは不要

実行結果

for文
下記のように繰り返し処理をする。セミコロン(;)は不要。

例

for (let num5 = 0; num5 <= 5; num5++) {
    console.log(num5);
}  //セミコロンは不要

実行結果

配列

変数を複数持った変数は下記のように定義する。
出力の際にインデックスを指定することで任意の値を出力することができる。

例

const animals = ["dog", "cat", "sheep"];
console.log(animals);

// インデックス指定
console.log(animals[0]);
console.log(animals[2]);

実行結果

[ 'dog', 'cat', 'sheep' ]
dog
sheep

配列の応用

配列と繰り返し
配列の値をループさせ、順番に出力させることが可能。

書き方

const animals = ["dog", "cat", "sheep"];
for (let i = 0; i < 3; i++) {
    console.log(animals[i]);
}

実行結果

dog
cat
sheep

配列の要素数
lengthを用いて、配列の要素数を取得できる。

書き方

const animals = ["dog", "cat", "sheep"];
console.log(animals.length);

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

実行結果

3
dog
cat
sheep

オブジェクト

配列と同じく複数のデータをまとめて管理できるものをオブジェクトという。
それぞれの値にプロパティと呼ばれる名前をつけて管理する。
プロパティは{name: 'haru'};と定義し、値の取り出しは定数/変数名.nameで行う。

書き方

const character = {name: 'にんじゃわんこ', age: 14};
console.log(character);

// オブジェクトの値を取り出す
console.log(character.name);

実行結果

3
dog
cat
sheep

オブジェクトの応用

オブジェクトを要素に持つ配列
配列の中にオブジェクトを定義することもできる。

書き方

const characters = [
    {name: "jack", age: 50},
    {name: "haru", age: 20}
];

// オブジェクトの値を取り出す
console.log(characters[0]);
console.log(characters[0].name);
console.log(characters[0].age);
console.log(characters[1]);
console.log(characters[1].name);
console.log(characters[1].age);

実行結果

{name: "jack", age: 50}
jack
50
{name: "haru", age: 20}
haru
20

オブジェクト配列と繰り返し処理

書き方

const characters = [
    { name: "jack", age: 50 },
    { name: "haru", age: 20 },
    { name: "yasu", age: 30 }
];

for (let i = 0; i < characters.length; i++) {
    const character = characters[i];

    console.log("--------------------");
    console.log("名前は" + character.name + "です");
    console.log(character.age + "歳です");
}

実行結果

--------------------
名前はjackです
50歳です
--------------------
名前はharuです
20歳です
--------------------
名前はyasuです
30歳です

関数

処理をまとめた関数は以下のように定義することで扱うことができる。

書き方

const hello = function () {
    console.log("こんにちは！");
    console.log("私の名前はharuです");
}
hello(); // 呼び出し

実行結果

こんにちは！
私の名前はharuです

ちなみにアロー関数で同一表現が可能。

書き方

const hello = () => {
    console.log("こんにちは！");
    console.log("私の名前はharuです");
}
hello(); // 呼び出し

引数
関数に引数を渡すことができる。

書き方

const hello = (name) => {
    console.log(`こんにちは、${name}さん`);
};

hello("jack"); // 引数：jack

実行結果

こんにちは、jackさん

戻り値
関数に戻り値を設定して、呼び出し元に結果を返す。

書き方

num = 100
const half = (num) => {
    return num / 2;  // 戻り値
};

const result = half(num);

console.log(`${num}の半分は${result}です`);

実行結果

100の半分は50です

スコープ

定数や変数の使用できる範囲のことをスコープと呼ぶ。
if文内の処理に入らず抜けた後に変数を使用するとエラーになる。
スコープの扱いに気をつけないとエラーの原因となる。

例

if (true) {
    const blockVar1 = 'myBlockVar1-true'; // これがブロックスコープの変数です
    console.log(blockVar1);
}

クラス

オブジェクトを生成するための設計図(クラス名は基本的に大文字から始める)。
その設計図からオブジェクトを生成すること = インスタンスを生成する。
　→ new Animal(引数ありなし);
インスタンス生成するときに実行したい処理や設定を追加するための機能をコンストラクタと呼ぶ。
　→ constructor(引数ありなし) {}

例

class Animal {
    constructor(name, age) {
        // コンストラクト内でプロパティを設定
        this.name = name;
        this.age = age;
    }
}

const animal = new Animal("haru", 20);

console.log(`名前: ${animal.name}`);
console.log(`年齢: ${animal.age}`);

実行結果

名前: haru
年齢: 20

メソッド
インスタンスの「動作」のようなもので、クラス内で使われる関数のようなもの。
また、メソッド内でメソッドをthis.メソッド();で呼び出すことができる。

例

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

    greet() {
        console.log("こんにちは");
    }

    info() {
        this.greet();  // infoメソッド内でgreetメソッドを呼び出し
        console.log(`名前は${this.name}です`);
        console.log(`${this.age}歳です`);
    }

}

const animal = new Animal("haru", 20);  // インスタンス生成
animal.info();  // Animalクラスのinfoメソッド呼び出し

実行結果

こんにちは
名前はharuです
20歳です

継承
既存のクラスをもとに新しい別のクラスを作成し、既存のクラスの機能を受け継がせることを継承という。
書き方はclass クラス名 extends 既存のクラス名

例

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

    info() {
        console.log(`名前は${this.name}です`);
        console.log(`${this.age}歳です`);
    }
}

class Dog extends Animal {  // Animalを継承
    getHumanAge() {
        return this.age * 7;
    }

}

const dog = new Dog("haru", 20);
dog.info();

実行結果

名前はharuです
20歳です

オーバーライド
親クラスと同じ名前のメソッドを子クラスに定義すると、子クラスのメソッドが優先して使用される。
子クラスのメソッドが親クラスのメソッドを上書きしていることから、オーバーライドと呼ばれる。

例

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

    greet() {
        console.log("こんにちは");
    }

    // ここは呼ばれない
    info() {
        this.greet();
        console.log(`名前は${this.name}です`);
        console.log(`${this.age}歳です`);
    }
}

class Dog extends Animal {
    // ここが呼ばれる
    info() {
        this.greet();
        console.log(`名前は${this.name}です`);
        console.log(`${this.age}歳です`);

        const humanAge = this.getHumanAge();
        console.log(`人間年齢で${humanAge}歳です`);
    }
    getHumanAge() {
        return this.age * 7;
    }
}

const dog = new Dog("レオ", 4);
dog.info();

実行結果

こんにちは
名前はレオです
4歳です
人間年齢で28歳です

※コンストラクタもメソッドと同じように、コンストラクタもオーバーライドすることができる。その際は1行目に「super(引数ありなし);」と記述する必要がある。ここでは割愛。

まとめ

他にもファイル分割やfind/filterメソッド、パッケージ、コーバック関数などあるが、今回は基本的なものをまとめた。

Progateは基本が学べるため、学習が初めての場合はとても効果的であった。
新しく学べたい言語がある場合は、Progateから始めることをおすすめする。
　→ Progate [↗]