javascript入門

javascriptを勉強した内容をまとめます

# ブラウザで使う場合

### htmlのscriptタグ内に書く

```html:index.html
<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script>
      const a = 50
      const b = 17
      const c = a * b
      console.log(c)
    </script>
  </body>
</html>
```

### jsファイルに書いておいてscriptタグでインポートする

以下はindex.htmlと同じディレクトリにtest.jsを置いた場合です

```html:index.html
<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="text/javascript" src="test.js"></script>
  </body>
</html>
```

```javascript:test.js
const a = 50;
const b = 17;
const c = a * b;
console.log(c);
```



# 変数と定数

動的型付言語なので型を明示的に宣言しなくても動きます

```javascript:定数
const a = 'hoge';
const b = 300;
const c = 2.9;
console.log(a);
console.log(b);
console.log(c);
```

```javascript:変数
var d = 'hoge';
var e = 300;
var f = 2.9;
console.log(d);
console.log(e);
console.log(f);

d = 'fuga';
e = 123;
f = 1.8;
console.log(d);
console.log(e);
console.log(f);
```

# 配列

```javascript:javascript
var arr = [1, 2, 3];
console.log(arr);
console.log(arr[1]);

arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
console.log(arr);
console.log(arr[1][1]);
```

# 論理演算

等号が「==」、NOTが「!」、ANDが「&&」、ORが「||」になります。

```javascript:javascript
const a = true && true;
const b = true && false;
console.log(a);
console.log(b);

const c = true || false;
const d = false || false;
console.log(c);
console.log(d);

console.log(!c);
console.log(!d);
```


# if文

```javascript:javascript
const flag = true
if(flag){
  console.log('input value:' + flag + ' is True');
}else{
  console.log('input value:' + flag + ' is False');
}

const value = 300
if(value < 200){
  console.log('input value:' + value + ' is less than 200');
}else{
  console.log('input value:' + value + ' is more than 200');
}
```

# for文

```javascript:javascript
for(i=0; i<10; i++){
  console.log(i);
}
```

# switch文

```javascript:javascript
const place = '東京'
switch (place)
{
    case "東京":
        console.log('Tokyo');
        break;
    case "大阪":
        console.log('Osaka');
        break;
    default:
        console.log("不明");
        break;
}
```

# 関数の書き方

３つ書き方があるみたいです。
python勢的には１つに統一してほしいですが、いろんな書き方が出来ることを是とするカルチャーなんでしょうか。

```javascript:返り値のない関数
function normalFunc1(x) {
    console.log(x);
}

let normalFunc2 = function(x){
    console.log(x);
}

let arrowFunc = (x) => {
    console.log(x);
}

normalFunc1('ふつうの関数１');
normalFunc2('ふつうの関数２');
arrowFunc('アロー関数式');
```

```javascript:返り値のある関数
function normalFunc3(x) {
    console.log(x);
    return x * 2;
}

let normalFunc4 = function(x){
    console.log(x);
    return x * 2;
}

let arrowFunc2 = (x) => {
    console.log(x);
    return x * 2;
}

console.log(normalFunc3(3));
console.log(normalFunc4(3));
console.log(arrowFunc2(3));
```

# sleep動作

javascriptはsleep関数が用意されていないようです。これはそもそもjavascriptではsleep()をするべきでないという事みたいなんですが、待機後に実行するsetTimeout()を使えばできます。第2引数ミリ秒待機してから第1引数の内容を実行しますので、例えば2秒待ってから「2秒待機しました」と表示する場合は以下で出来ます。

```javascript:javascript
setTimeout(() => {
    console.log('2秒待機しました');
}, 2000);
```


# async/awaitによる非同期処理

以下のような仕組みで非同期処理を実施します
1. async functionを定義する (async function内ではすべての処理を非同期で実行される)
2. async function内でfunctionを呼ぶと非同期処理を開始し、返り値としてPromiseを受け取る
3. 受け取ったPromiseをawaitすると発行元のfunctionが終了するまで待機して本来の返り値を受け取る

複数の関数を非同期で開始しておいて、最後にまとめてPromiseをawaitするような使い方になります。最初からawaitをつけて実行すると普通に同期処理します。

以下のコードを実行すると、f1()では毎回awaitしているので2秒待機を3回やって6秒かかりますが、f2()では非同期処理を3つ開始しておいて、まとめてawaitしているので2秒で終了します。

```javascript:javascript
// 2秒後に値を返す
function getNum(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(num);
        }, 2000);
    });
}

// 6秒後に出力
async function f1(value) {
    const n1 = await getNum(value*1);
    const n2 = await getNum(value*2);
    const n3 = await getNum(value*3);
    console.log(n1, n2, n3);
}

// 2秒後に出力
async function f2(value) {
    const p1 = getNum(value*1);
    const p2 = getNum(value*2);
    const p3 = getNum(value*3);
    const n1 = await p1;
    const n2 = await p2;
    const n3 = await p3;
    console.log(n1, n2, n3);
}

f1(1);
f2(2);

```

上記はこちらのコードをお借りしました。
https://webbibouroku.com/Blog/Article/js-async-await