アロー関数

function fn(number) {
  return number * 2;
}

上記をアロー関数に変換する

・引数の表示

引数が2つなら
const fn = (number1, number2,...) => {
  return number * 2;
}
引数が一つなら
const fn = number => {
  return number * 2;
}

・関数ないの記述
関数記述が1行なら
const fn = number => return number * 2;

関数記述が２行なら
const fn = number => {
  console.log(2);
  return number * 2;
}

関数記述が1行でオブジェクトを返すなら
()で括る
const fn = number =>({result:number*2});

ESモジュールについて

Javascriptのファイルを一つのモジュールという単位にして、このファイルごとに機能を管理する。
使う際にはexportして利用する

main.js

import { hello } from "./module.js";
// モジュールバンドル（webpack)を使う際にはjs拡張子が補完されるが、
// htmlファイルについては、jsまで記載
import { User } from "./module.js";

// 同じファイルからであれば、1行にまとめることも可能(export)
import {hello,User } from "./module.js"

import funcB from "./module.js"
// default が一つしかないので、
//{}は不要
// 好きな名前を記載できる

//上記全て同じファイルの場合
import funcB, {hello,User} from "./module.js"


hello();

const user = new User('Tom');
user.hello();
//

module.js

export const hello = () => {
  console.log("hello!");
};

const funcB = () => {
  console.log("funcB output");
};

export default funcB;

class User {
  constructor(name) {
    this.name = name;
  }
  hello() {
    console.log(this.name);
  }
}

export { User }
// 外部からアクセスさせたくない関数を定義した場合には、先頭にexportせずに

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>開始時点コード</title>
  </head>
  <body>
    <h1>開始時点コード</h1>
        <script type="module" src="main.js"></script>
        <!-- es moduleを使うにはtype moduleを使う必要がある -->
        <!-- reactではesモジュールのコードをjaavascriptに変換する処理が入っている。 -->
        <!-- 直接index.htmlから読み込む際には type="module"が必要-->
  </body>
</html>

コールバック関数

コールバック関数とは引数に渡された関数を指す

function print(callback) {
 const result = callback();//これ
 console.log(result);
}

function fn(number = 3) {
// 初期値として3を設定する。
// 初期値がないとコールバック関数を使った場合にはnumberがundefinedとして定義される。
 return number * 2;
  }

debugger;
// デバッガーにてコンソールにてフローが確認可能
print(fn);
// ここでは引数numberがなし(undefined)のため、結果としてNaNとなる。

DOMとイベントリスナーについて

DOMとはHTMLのタグをJSから操作するときに使用するもの

const h1Element = document.querySelector('h1');

console.log(h1Element);
console.dir(h1Element);
// DOMオブジェクトの実態
// プロパティの形式

console.log(h1Element.textContent);
h1Element.textContent = "変更後のタイトル"
// オブジェクトの形式でHTMLにアクセスする
// ノード、エレメントとも呼ぶ

const btnEl = document.querySelector('button');



//イベントリスナーに設定されている場合
btnEl.addEventListener('click', (e) => {
 // 第一引数：イベント名
 // 第２引数：実行する関数（コールバック関数）

 console.dir(e.target.text);
 // e:イベントのオブジェクト
 // 発火に伴うオブジェクトが参照可能 .dir
 console.log('hello');
})




// 関数を別に定義した場合

const fn = (e) => {
// fnを下記にてコールバック関数として定義
// eは関数が実行されるときにセットされて渡される。
 console.dir(e.target.text);
 // e:イベントのオブジェクト
 // 発火に伴うオブジェクト
 console.log('hello');
}
btnEl.addEventListener('click', fn);
// fnが実行可能な状態になる。

配列のmap,filter

for文などを使うことによって記述量が長くなり、ごちゃごちゃしてしまうため、
map,filterを使うことにより、記述量を減らし可読性をあげることができる。

const arry = [10, 20, 30, 40];
const newArry = [];


for (let i = 0; i < arry.length; i++){

 newArry.push(arry[i]*2)
}

console.log(newArry)

// 上記をmapメソッドで

const newArry2 = arry.map(val => {
 console.log(val)
 // arryの値が順番に格納されている。
 return val * 3;
});

console.log(newArry2);


const newArry3 = arry.map((val, i, arry) => {
 // (val,i,arry):実際に定義できる
 console.log(val)
 return val * 3;
});


// filterメソッド

for (let i = 0; i < arry.length; i++){
 const val = arry[i] * 2;
 if (val > 50) {
  newArry.push(arry[i]*2)
 }
}

const newArry4 = newArry2.filter(val => {
 return val > 50
});
// コールバックする関数がリターンする値がtrueであれば条件が追加される
console.log(newArry4)


// filtrとマップを一緒に使う場合には
const newArry5 = arry.map(val => val * 2).filter(val => val > 50);

console.log(newArry5)

分割代入

分割代入というのは、配列やオブジェクトの特定の要素を変数として抽出する


const arry = ["配列1", "配列2", "配列3"];
console.log(arry[0]);
console.log(arry[2]);


const [a, b, c] = ["配列1", "配列2", "配列3"];
// 下記のように取り出したい部分だけ定義でもOK
const [d,  , e] = ["配列1", "配列2", "配列3"];
const [d] = ["配列1", "配列2", "配列3"];
console.log(a);
console.log(b);

const obj = { x: "オブジェクト1", y: "オブジェクト2", z: "オブジェクト3" };
console.log(obj.x);
console.log(obj.y);

const {x,z} = { x: "オブジェクト1", y: "オブジェクト2", z: "オブジェクト3" };
// const {z,x}〜としても、オブジェクトの分割代入はプロパティ名と一致させる必要がある。
console.log(x);
console.log(z);

const arr = ["Japan", "Tokyo", "Shinjuku"];
const objAddress = { state: "Tokyo", country: "Japan",  city: "Shinjuku" };

const fnArr = (arry) => {
  console.log("---配列---");
  console.log(`country: ${arry[0]}`);
  console.log(`state: ${arry[1]}`);
  console.log(`city: ${arry[2]}`);
};
const fnArr2 = ([country, state, city]) => {
 // 配列は順番に気をつける
  console.log("---配列---");
  console.log(`country: ${country}`);
  console.log(`state: ${state}`);
  console.log(`city: ${city}`);
};

const fnObj = (objAddr) => {
  console.log("---オブジェクト---");
 console.log(`country: ${objAddr.country}`);
  console.log(`state: ${objAddr.state}`);
  console.log(`city: ${objAddr.city}`);
};

// 分割代入パターン
const fnObj2 = ({country,state,city}) => {
  console.log("---オブジェクト---");
  console.log(`country: ${country}`);
  console.log(`state: ${state}`);
  console.log(`city: ${city}`);
};

fnArr(arr);
fnObj(objAddress);

スプレッド演算子、レストパラメータ

スプレッドを使う場合には、使わない場合に比べて意味合いが変わるので注意する。
スプレッドの場合には、あくまで新規配列に要素を展開するために内容が異なる。

const nums = [3, 1, 4, 1, 5, 10, 2, 6];

const result = Math.max(3, 1, 4, 1, 5, 10, 2, 6);
// スプレッドを使う場合には、使わない場合に比べて意味合いが変わるので注意する。

// スプレッド演算子を利用した場合
// 配列の要素を展開する場合
const result2 = Math.max(...nums);
console.log(result);


let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = [...arr1];// 要素が展開されて、新しい配列となる。
console.log(newArr);
// スプレッド演算子で展開した場合、等価演算子で確認するとfalseになる。>別物
console.log(newArr === arr1);
newArr.push(5);
// 参照先が異なるので、
console.log(newArr, arr1)


let newArr1 = arr1
// 通常代入した場合で展開した場合、等価演算子で確認するとtureになる。
console.log(newArr1 === arr1)
// 代入した場合には参照している配列が同じ
// 通常代入はあくまで参照先を同じにしている。
newArr1.push(4);
console.log(newArr1,arr1)


let newArr3 = [...arr1, 10, ...arr2];// 要素が展開されて、新しい配列となる。

console.log(newArr3);





const obj = {
  name: "Tom",
  age: 22,
};
const newObj = { ...obj };
newObj.name = 'John';

console.log(newObj);
console.log(obj);
// スプレッド演算子を用いた場合には元の配列に影響を及ぼさない。


// レストパラメータ、残よ引数:(...argA)
// 可変数の引数に利用する場合
const restA = (...argA) => console.log(argA);
restA(1, 5, 4)

const restB = (n, ...argB) => console.log(argB,n);
restB(1, 3, 4)

三項演算子

条件変数 ? trueの場合 : falseの場合

// 三項演算子（ ? : ）

const a = false;

let resultA = a ? "true": -10;
// 条件変数/ trueの場合/falseの場合
console.log(resultA);
if(a) {
  resultA = "true";
} else {
  resultA = "false";
}
console.log(resultA);

function getResult() {
  return a ? "true" : "false";
}

console.log(getResult());

truthy falthy 論理話　論理積

// falsy → 真偽値に変換した際に"偽(false)"とみなされる値のこと。
// truthy → それ以外

/* falsyな値の一覧
false
0 (数字)
0n (big int)
"" (空文字)
null
undefined
NaN (Not a Number)
*/

const a = 0;
let result = a ? 10 : -10;
console.log(result);

const falsy = 0;
const truthy = 1;
// 確認する手段
console.log(Boolean(truthy));
console.log(Boolean(falsy));

// 論理積 (&&) について
const resultA = "" && "foo"; //""が格納
const resultB = 2 && 1 && 0 && 3; //0を返す
const resultC = "foo" && 4;　//4（右側を返す)

// console.log(resultA);
console.log(resultB);
console.log(resultC);

// 理論和 (||) について
const resultD = "" || "foo";
const resultE = 0 || 2 || 0; //truthyが見つかったものを返す(2)
const resultF = "foo" || 4; //truthyが見つかったものを返す(foo)

console.log(resultD);
console.log(resultE);
console.log(resultF);

非同期処理　Promise

非同期処理が終わった後に特定の処理をつなげるときに使うのがPromise

let a = 0;

console.log(a);


new Promise((resolve, reject) => {
 // 引数には上記2つの関数が渡る。
 setTimeout(() => {
  a = 2;
  resolve(a);
  reject(a);//エラー時に使う
  // 順番通りに動かない：非同期処理
 }, 2000);
}).then((b) => {
 // resolve()が呼ばれるとthenが実行される。
 console.log(b);
 return b;
 // returnで返す値が次のthenへ
}).then((b) => {
 // resolve()が呼ばれるとthenが実行される。
 console.log(b+1);
}).catch((a) => {
 // rejectが呼ばれるとcatchが実行される。
 // エラー時につながる
  console.log('error')
})



setTimeout(() => {
 a = 1;
 console.log(a)
 // 順番通りに動かない：非同期処理
}, 3000);

await async

// 非同期処理（Promise）
let a = 0;


// thenメソッドを使わないので便利になる
init();

async function init() {//awaitの使った関数の先頭にasyncをつける

 // 例外処理
 try {
   const result = await new Promise((resolve, reject) => {
  // resolveが呼ばれるまでこのawaitで書いた行で処理が待機するので終わり次第、次の行へ

    setTimeout(() => {
        a = 2;
        reject(a)
        // resolve(a)
    }, 2000);
 })
 } catch (e) {
  // 慣例的にeで引数が渡される。
  console.log('catchが実行',e)
 }

 console.log(result);
}