JavaScript を触ってみた記録　〜基本文法とクラス〜

# この記事
ほぼ初めてJavaScriptを学習したので、その記録を残します。


## コメントアウト

```
　// 　console.log("hello java");
　console.log("hello javascript");
```
※下だけ実行される

## 計算
他の言語同様に算術演算子が使用できる

```
　console.log(12/3);
　console.log(12%3);
```
↓

```
4
0
```

## 文字列と数値
文字列はシングルクォーテーション、ダブルクォーテーションで囲んで使用
合わせて中で使うのはダメ

```
console.log(12+3);
console.log('12+3');
console.log('12' + '3');
```
↓

```
15
12+3
123
```
文字列→数値へ変換など(16進数)


```
parseInt('aa', 16));
```
↓

```
170
```

## 変数

```
　// 定義
　let name = 'U.S.';
　console.log('出身：' + name);
```
↓

```
出身：U.S.
```
letでの定義なら更新できる

```
name = 'California';
console.log('出身：' + name);
```
↓

```
出身：California
```
数値の更新方法

```
i = 30;
i = i + 5;
i += 5
console.log(i);
```
↓

```
40
```

## 定数
※更新はできない

```
const TIME_ZONE = 'Asia/Tokyo';
console.log(TIME_ZONE);
TIME_ZONE = 'JST';
console.log(TIME_ZONE);
```
↓

```
Asia/Tokyo
TIME_ZONE = 'JST';
          ^
TypeError...(Error文
```

## テンプレートリテラル
ES6(2015)で使えるようになった構文
埋め込みが可能（バッククォートであることに注意）

```
const job = 'エンジニア';
console.log(`仕事は${job}です`);
```
↓

```
仕事はエンジニアです
```


## 真偽値
こちらもtrue/falseのBoolean型を使える
if文で判定後の中身はこの値が入っている

```
//　Penguinであれば挨拶
if(LoginName === "Penguin"){
  console.log("ペンギンさんこんにちは");
}

if(LoginName !== "Penguin"){
  console.log('どなたでしょうか…？');
}
```
もちろんelseも使える

## Switch

```
const score = 2;
// scoreに値によって文を返す
switch (score) {
  case 1:
    console.log("残念賞");
    break;

  case 2:
    console.log("参加賞");
    break;
  
  case 3:
    console.log("優秀賞！");
    break; 

  default:
    console.log("No Award");
    break;
}
```
↓

```
//　scoreが2だと
参加賞
```

## 繰り返し処理
for文の中の記載方法はいくつかある

```
// 1から30まで加えて出力もする
for(let number = 1 ; number <= 100 ; number +=){
  console.log(number);
}

for(let number = 1 ; number <= 100 ; number ++){
  console.log(number);
}
```
両方とも同じ処理

## 配列

```
const food = ["apple", "banana", "grape", "cherry"];

// 配列の要素数を用いて、全て展開
for (let i = 0; i < food.length; i++) {
  console.log(animals[i]);
}
```
↓

```
apple
banana
grape
cherry
```

## オブジェクトと配列
配列はデータ型によらず様々なデータを格納できる
オブジェクトはプロパティとメソッドを使えるため、２つペアで格納できる


```
const FruitsBox = [
  {name: "Apple", num: 100},
  {name: "Banana", num: 15},
  {name: "Grape", num: 20},
];

for (let i=0; i<FruitsBox.length ; i++) {
  const fruits =  FruitsBox[i];
  console.log(`${fruits.name}は、残り${fruits.num} 個です`);
}
```
↓

```
Appleは、残り100個です
Bananaは、残り15個です
Grapeは、残り20個です
```

## for文を使った配列展開

```
const profile = {
  name: "shinon",
  Experience: { 
    AWS: "３年",
    Python: "半年",
  },
  Services: ["S3", "EC2", "CloudWatch", "Systems Manager"]
};

console.log(`名前: ${profile.name}`);
console.log(`AWS業務は${profile.Experience.AWS}、Pythonは${profile.Experience.Python}`);
console.log("好きなAWSサービス");

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

```
名前: shinon
AWS業務は３年、Pythonは半年
好きなAWSサービス
S3
EC2
CloudWatch
Systems Manager
```

## 関数と引数、アロー関数

```
const fruits = (fav) => {
  console.log(`好きな果物は、${fav}です。`);
};

fruits("りんご");
```
↓

```
好きな果物は、りんごです。
```

## 戻り値
```
const check = (num) => {

  return num%13 === 0;
};

// ※if ( check(117) === true )でなくて良い
if ( check(117) ) {
  console.log("13の倍数です");
} else {
  console.log("13の倍数ではありません");
}
```
↓

```
13の倍数です
```

## スコープ
if,whileなど{}を使った中での定数定義内容は、外では使用できない


## クラス
設計書として使用出来る
オブジェクトを使用したテンプレート

```
class Self {
　// constructorは必ず書く
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  // メソッド
  hello() {
    console.log("はじめまして");
  }
  // メソッド内でメソッドを呼び出せる  
  myself() {
    this.hello();
    console.log(`${this.name}です`);
    console.log(`インフラは${this.year}年目です`);
  }
}
// コンストラクタに引数を渡す
const intro = new Self("shinon", 4);
intro.myself();
```
↓

```
はじめまして
shinonです
インフラは4年目です
```




## 継承
親クラスから子クラスにメソッドは継承されるため、
再度定義しなくても使用できる
また、同メソッドを定義すると子クラスが優先される（オーバーライド）
コンストラクタも同様だが、その場合はsuper()が必要
親クラスの引数を使用する場合は、super()内に記載すれば可能

```
class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  hello() {
    console.log("こんにちは");
  }  
  myself() {
    this.hello();
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
  }
}

// 継承
class Cat extends Animal {
  // オーバーライド
  myself(){
    this.hello();
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);

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

const cat = new Cat("銀", 3);
cat.myself();
```
↓

```
こんにちは
名前は銀です
3歳です
人間年齢で21歳です
```

# 感想

まずは動かしてみて、どんな要素があるのかを少しだけ知れました。
ここからさらに使っていく過程で理解していきたいです。


使用したツール/ドキュメント
・Progate
https://prog-8.com/

・MDN web docs - JavaScriptリファレンス
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference