Javascriptを0から勉強した時の備忘録

# はじめに
今回は自分がJavascriptを初めて勉強した際のメモ書きになります。

ある程度Javascriptができる人からすれば簡単すぎると思います。

## 構文メモ

### console.log()について
以下のコマンドで文字を表示できます。

```js
console.log('Hello, World');
```

>Hello, World

###whileループについて
Javascriptではwhile(ブール値){whileブロック}でwhileループができます。
以下のコマンドで1から10まで表示できます。

```js
let number = 1;
while (number <= 10){
    console.log(number);
    number += 1;
}
```

>1
2
3
4
5
6
7
8
9
10



###for文について
for (変数の定義;条件式;変数の更新){forブロック}でforループができます。

以下のコマンドで1から10までを表示できます。

```js
for (let number = 1; number <=10; number +=1){
    console.log(number);
}
```

>1
2
3
4
5
6
7
8
9
10

###forとifの組み合わせ
forとifを組み合わせると、3で割り切れるときにはFizzと言い、5で割り切れる時にはBuzzと言うFizzBuzzゲームも実装できます。10までなので15で割り切れるときは考慮せずに実装します。

```js
for (let number = 1; number <=10; number++){
    if (number % 5 ===0){
        console.log('Buzz');
    }else if(number % 3===0){
        console.log('Fizz');
    }else{
        console.log(number)
    }
}
```

>1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz

Javascriptってイコール三つじゃないとダメなんですよね。

Javascriptのイコールの数について調べてみたら、[こちら](https://qiita.com/PianoScoreJP/items/e43d70ec188c6fed73ed)の記事によくまとめられていました。

どうもイコール三つの時は厳密に比較するけど、イコール二つの時はガバガバな比較のようです。

どうも調べてみるとイコール三つを使うのが良いらしいので、イコール二つは使わないようにしましょう。

###定数と変数について
constで定数を、letで変数を定義できるようです。

```js
const a = 2;
let b = 4;

console.log(a);
console.log(b);
```
>2
4

bは変数であるため他の値で上書きできますが、aは定数であるため他の値で上書きしようとするとエラーをはきます。

###配列について
Javascriptの配列はほとんどpythonのリストです。

```js
const food = ['バナナ', '肉', 'さかな'];
console.log(food);
```

>[ 'バナナ', '肉', 'さかな' ]

インデックス指定して取り出すこともできます。

```js
const food = ['バナナ', '肉', 'さかな'];
console.log(food[0]);
```

>バナナ

インデックス指定した後に値を代入することで配列を更新することもできます。

配列を定数で定義しているのに値を更新できるのは不思議な感じがします。

```js
const food = ['バナナ', '肉', 'さかな'];
food[0] = 'リンゴ';
console.log(food);
```

>[ 'リンゴ', '肉', 'さかな' ]

配列のlength変数には配列の長さが入っています。

```js
const food = ['バナナ', '肉', 'さかな'];
console.log(food.length)
```

>3

pythonのように配列を直接for文に渡すことはできないので、lengthを条件にインデックス指定することで配列の中身を取り出すことになります。

```js
const food = ['バナナ', '肉', 'さかな'];

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

>バナナ
肉
さかな

###オブジェクトについて
Javascriptのオブジェクトはpythonの辞書にかなり似ています。

```js
const person = {name:'太郎', age:18};
console.log(person);
```

>{ name: '太郎', age: 18 }

次のようにして値を取り出すこともできます。

```js
const person = {name:'太郎', age:18};
console.log(person.name);
```

>太郎

配列とオブジェクトを組み合わせることもできます。

```js
const person = [
    {name:'太郎', age:18},
    {name:'次郎', age:16}];

console.log(person[1].name) ;
```

>次郎

###変数を文字列の間に埋め込む
以下のようにすることで変数を文字列に埋め込むことができます。

```js
 let name = '太郎';

 console.log(`私は${name}です`);
```

>私は太郎です

###存在しない要素について
存在しない要素を表示しようとすると、エラーは起きずにundefinedが表示されます。

```js
const food = ['バナナ', '肉', 'さかな'];

console.log(food[4]);
```

>undefined

###関数について
特定の処理をまとめるときに関数を使います。

const 定数名 = function(引数){まとめた処理}という構文です。

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

hello('太郎');
```

>こんにちは太郎さん


###アロー関数について
function()を用いる関数の書き方は旧式のもので、今ではアロー関数という簡略化された書き方が用いられます。

アロー関数は (引数)=>{まとめた処理}という構文です。

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

hello('太郎');
```

>こんにちは太郎さん

(引数)の後ろは、イコールが先です。ここは結構間違えてしまうので注意しましょう。

returnで戻り値を受け取ることもできます。

```js
const sum = (number1, number2, number3)=>{
    return number1 + number2 + number3;
}
console.log(sum(1, 2, 3));
```

>6

###クラスについて
Javascriptにもクラスが存在します。

pythonの\_\_init__()の初期化メソッドの代わりにconstructor()というものが存在します。

また、クラス内では自分自身のインスタンス名をthisとなります。

また、インスタンスを生成するときには newというものを必要とします。

以下の例をみてみましょう。

```js
class Person{
    constructor(name, age){
        this.name = name;
        this.age = age
    }
    walk(){
        console.log('歩きます');
    }
    run(){
        console.log('走ります');
    }
}

person = new Person('太郎', 18);
person.walk();
person.run();
console.log(person.name, person.age);
```

>歩きます
走ります
太郎 18

###継承について
class 子クラス名 extends 親クラスで継承を行うことができます。

子クラスは親クラスのメソッドをオーバーライドすることができますが、コンストラクタをオーバーライドする際はsuperを用いて親クラスのコンストラクタを呼び出す必要があります。

以下で例をみていきましょう。

```js
class Person{
    constructor(name, age){
        this.name = name;
        this.age = age
    }
    walk(){
        console.log('歩きます');
    }
    run(){
        console.log('走ります');
    }
}

class Student extends Person{
    constructor(name, age, school){
        super(name, age);
        this.school = school;
    }
    say_school(){
        console.log(`私は${this.school}学校に通っています`);
    }
}

student = new Student('次郎', 16, 'qiita');
student.walk();
student.say_school();
```

>歩きます
私はqiita学校に通っています


#終わりに
以上で今回の記事は終わりです。お疲れさまでした。