JavaScript基礎 - Node.jsの学習

Node.js

UdemyでNode.jsの学習を始めました。 www.udemy.com

VSCodeのショートカット

操作概要 Windows macOS
行の削除 Ctrl+Shift+K ⇧⌘K
次を検索 F3 ⌘G

JavaScript基礎

コールバック関数について

  • コールバック関数とは
    関数の引数に渡す関数
function print(callback) {
  const result = callback(2)
  console.log(result)
}

function fn(number) {
  return number * 2
}

// デバッグのために処理を止める記述
debugger
// 開発者ツールのソースでステップインを押すと処理が進む
print(fn) // 4

console.log(fn(2)) // 4

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

  • DOMとは
    HTMLをJavaScript内から操作するためのオブジェクト
// # DOM
// # DOM
const h1Element = document.querySelector("h1")

// 要素の内容を書き換えることができる
h1Element.textContent = "変更後のタイトル"
console.log(h1Element.textContent)

console.dir // -> 要素の実態をJSON 状のツリーとして出力します。
{
  /*
<h1>
  ...
  innerHTML: "開始時点コード"
  innerText: "開始時点コード"
  inputMode: ""
  isConnected: true
  isContentEditable: false
  lang: ""
  lastChild: #text "開始時点コード"
  lastElementChild: null
  localName: "h1"
  namespaceURI: "http://www.w3.org/1999/xhtml"
  nextElementSibling: <button><200b>
  nextSibling: #text "\n    "
  nodeName: "H1"
  ...
</h1>
*/
}

// addEventListener
// クリックした時にコールバック関数が渡される例
const btnElement = document.querySelector("button")
btnElement.addEventListener("click", (e) => {
  console.log(e) // イベントの発火に伴う情報
  console.log(e.target) // クリックした要素の情報プロパティ
  console.log("hello")
})

// コールバック関数に予め定義したものを渡すことも可能
const callbackFn = (e) => {
  console.log(e)
}
btnElement.addEventListener("click", callbackFn)

Arrayオブジェクトのメソッドの使い方

mapメソッドの使い方

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

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

// 同様の記述がmapメソッドで可能
const newArry2 = arry.map((val) => val * 2)
const newArry3 = newArry2.filter((val) => val > 50)

// mapメソッドのコールバック関数に渡される引数
const newArry4 = arry.map((val, index, array) => {
  console.log(val, index)
  return val * 3
})

分割代入

// const [a, b, c] = ["配列1", "配列2", "配列3"]
//   下記のようにカンマで省略することが可能
const [a, , c] = ["配列1", "配列2", "配列3"]
console.log(a, c) // 配列1, 配列3


// オブジェクトはプロパティで管理されているので、
// 分割代入で格納する順番は関係ない
const { x, z } = { x: "オブジェクト1", y: "オブジェクト2", z: "オブジェクト3" }
console.log(x, z) // オブジェクト1, オブジェクト3


// 関数でも同じように扱える
const fnArr = (country, state, city) => {{
  ...
}
fnArr(arr)

const fnObj = ({ country, state, city }) => {
  ...
}
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 result = Math.max(...nums)
console.log(result) // 10

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let newArrA = [...arr1]
let newArrB = arr1

console.log(newArrA === arr1) // false
console.log(newArrB === arr1) // true

// newArrAではarr1を参照しているから、newArrBとは違う出力になる
// newArrAは、新しい配列が定義されている
newArrA.push(4)
console.log(newArrA, arr1)
// [1, 2, 3, 4] [1, 2, 3, 4] <- 元の配列に追加されて同じ結果になる

// 展開したものを連結することもできる
newArrMerged = [...arr1, ...arr2, 10]
console.log(newArrMerged) // [1, 2, 3, 4, 5, 6, 10]


// オブジェクトも同様
const obj = {
  name: "Tom",
  age: 22,
}
const newObj = { ...obj } // 
newObj.name = 'John'

console.log(newObj, obj)
// { name: "Tom", age: 22 }
// { name: "John", age: 22 }

const restA = (...argA) => console.log(argA)
restA(1, 3, 4) // [1, 3, 4]

const restB = (n, ...argB) => console.log(argB)
restB(1, 3, 4) // [3, 4]

三項演算子

const a = true
let resultA = a ? "true" : "false"

console.log(resultA) // true

truthyとfalsy

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

falsyな値の一覧

  • false
  • 0 (数字)
  • 0n (big int)
  • "" (空文字)
  • null
  • undefined
  • NaN (Not a Number)
const falsy = 0
const truthy = 1
console.log(Boolean(truthy)) // true
console.log(Boolean(falsy)) // false

// 論理積 (&&) について
const resultA = "" && "foo"
console.log(resultA) // false

// 理論和 (||) について
const resultB = "" || "foo"
console.log(resultD) // false

非同期処理 (Promise)

  • 非同期処理とは
    コードが記述された順番通りに行われない処理
let a = 0

setTimeout(function () {
  a = 1
  console.log(a)
}, 2000)

new Promise((resolve, reject) => {
  setTimeout(() => {
    a = 1
    if (a === 1) {
      // 解決できた時にコールバック関数を登録するもの
      resolve(a)
    } else {
      // エラーが発生した時にコールバック関数を登録するもの
      reject(a)
    }
  }, 2000)
})
  .then((b) => {
    // bには解決したaの値が渡ってくる
    console.log(b)
    return b
  })
  .then((b) => {
    // thenメソッドは繋げて書ける
    console.log(b)
  })
  .catch((c) => {
    console.log("catchが実行", c)
  })

非同期処理 (await / async)

let a = 0

init()
// awaitが書かれた関数の前方にasyncをつける
async function init() {
  // resolveが呼ばれるまで、awaitが書かれた行で待機する
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      a = 1
      resolve(a)
    }, 2000)
  })
  console.log(a) // 1
}