フロントエンドを学び直す#3（Javascript）

フロントエンドを学び直す#3（Javascript）

コメント 0件のコメント

今回はJavascriptについて学んでいきます。

基礎

  • NaN
    • Not a Number （非数）のこと
    • 0 / 0 のように計算できないものを表現する
    • NaNの型はNumber
  • 変数の命名規則
    • 数字から始めることはできない
    • キャメルケースが一般的
  • インデックスとlength
    • 配列だけで文字0番目などを取ることもできる
      • 'hoge'[0] → h
      • 'hoge'.length → 4
  • Stringのメソッド
    • toUperCase() : 大文字の文字列を新しく返す
    • toLowerCase() : 小文字の文字列を新しく返す
    • trim() : 両端の空白を消す
    • indexOf() : 引数にとった値が何番目のインデックスかを返す。ない場合は、-1を返す。
    • slice() : 元の文字列は変えずに文字列を切り取る。負の数から始めると、文字列の後ろから切り取る。
    • replace() : 1つ目の引数を2つ目の引数に置き換える。
    • parseInt() : 文字列を数字に変換する。
  • Nullとundefined
    • Nullは意図的に値がないことを示すもの。javascript的にはないことがわかっている状態。
    • undefinedは変数に値を代入していない状態だったり、javascriptがわからないと困っている状態。
    • Nullは変数に代入する時はあるが、undefinedを代入することはない。
  • Mathオブジェクト
    • 数学的な定数と関数を提供する、組み込みオブジェクト。
      • floor() : 小数点以下を切り捨て。
      • ceil() : 小数点以下を切り上げ。
  • prompt
    • alert() と同じようにモーダルが表示されるが、入力するフォームも一緒に表示される。
  • Truthy / Falsy な値
    • falsyな値 : false, 0, ”(空文字), null, undefined, NaN
    • truthyな値 : falsyな値以外
  • 文字列は不変なので1文字目だけ代入で変更するなどはできない。

配列

  • 元の配列自体を変更する関数
    • push, pop, shift, unshift, reverse, splice
      • shift : 配列の最初から除外
      • unshift : 配列の最初に追加
      • splice : 配列から要素を取り除いたり、追加したりできる
  • 元の配列を変更しない関数
    • concat, slice, sort
      • concat : 配列を結合する、phpだと + で配列結合できるがjavascriptだとできない
      • slice : 配列から要素を切り取る
      • sort : 配列をソートする
  • 配列の等価性
    • 配列は参照しているアドレスを比較するので、中身を比較しているわけではない
    • constで作成した配列も、参照したアドレスが変わらないので、中身は変更できる

オブジェクト

  • オブジェクトのキーはstringに変更される
    • アクセスするときは object['hoge'] のようにシングルクオートで囲う必要がある

繰り返し処理

  • break
    • ループ文の中ならどこでも使える
    • ループを終わらせる
  • for…of
    • Internet Explorerでは使えない
    • 配列だけでなく列挙可能なオブジェクトなら何でも使える
      • オブジェクトはそのままだと列挙可能なオブジェクトではない

関数

  • レキシカルスコープ
    • 変数はJavascriptが書かれた時点での直近の変数を参照する
      • 実行時ではない
let x = 'あいうえお'

const hoge = (() => {
    console.log(x)
})

const moge = (() => {
    let x = 'かきくけこ'
    hoge()
})

// moge() を実行した時、'あいうえお'が表示される
// console.log(x) の直前の変数宣言は let x = 'あいうえお' のため

  • 高階関数
    • 引数として関数を受け取る関数
    • 戻り値に関数を指定している関数
  • メソッド
    • オブジェクトに定義される関数のこと
const myMath = {
    PI: 3.14,
    square: function (num) {
        return num * num
    },
    cube(num) {
        return num ** 3
    }
}

// myMath.square(3) のように呼び出すことができるようになる
// cubeの方は省略記法、やっていることはメソッドを定義しているだけ
// オブジェクトなのでカンマは忘れないこと

コールバックを使ったメソッド

  • foreach
const movies = [
    {
        title: 'hoge',
        score: 100
    },
    {
        title: 'fuga',
        score: 65
    },
    {
        title: 'moja',
        score: 70
    }
]

movies.forEach(function (movie) {
    console.log(`${movie.title} - ${movie.score}`)
})

// 結果
// hoge - 100
// fuga - 65
// moja - 70

  • map
    • 各要素に関数を適用して新しい配列を返す
const texts = ['hoge', 'fuga', 'moja']
const caps = texts.map(function (t) {
    return t.toUpperCase()
})

console.log(texts) // ['hoge', 'fuga', 'moja']
console.log(caps) // ['HOGE', 'FUGA', 'MOJA']

  • filter
    • 条件に当てはまる要素だけの新しい配列を返す
  • setInterval
    • 一定の時間待ってから処理を行うのを繰り返す
      • 止めるには clearInterval を使う
const id = setInterval(() => {
  console.log(Math.random())
}, 2000) // 2秒間待ってconsole.log出力

clearInterval(id) // setIntervalの処理を止める

  • every
    • すべて条件に当てはまるならtrue
  • some
    • 1つでも条件に当てはまるならtrue
  • reduce
    • 各要素に対して反復処理をし、単一の値を返す
const numList = [24, 56, 100, 1, 820, 222, 35]

const sum = numList.reduce((accum, currentNum) => accum + currentNum)
// accum = 24, currentNum = 56 からスタート (24 + 56 の結果 80 が 次のaccum に入る) 
// accum = 80, currentNum = 100 （80 + 100 の結果 180 が accum に入る）
// accum = 180, currentNum = 1 ...
// のように、 反復処理を繰り返す
console.log(sum) // 1258 （numListの合計値）


const sumInitial100 = numList.reduce((accum, currentNum) => {
    return accum + currentNum
}, 1000) // 初期値に1000
// accum= 1000, currentNum = 24 からスタート
// 後の反復処理はsumと同じ
console.log(sumInitial100) // 2258 (初期値の1000とnumListの合計値)


const maxNum = numList.reduce((accum, currentNum) => {
    if (accum > currentNum) {
        return accum
    }
    return currentNum
})
// numListのうち最大値を返す
console.log(maxNum) // 820

  • アロー関数とthis
    • アロー関数と通常の関数では this の挙動が違う
    • 通常の関数では、thisで受け取る値は「呼び出し元」 が基準になる
    • アロー関数では、宣言された時点で、thisが受け取る値が確定する

モダンなjavascript

  • デフォルトパラメータ
function greet(message='こんにちは', person='匿名', suffix='。') {
    console.log(`${message}, ${person}さん${suffix}`)
}

// greet()
// こんにちは、匿名さん。

// greet('ヤッホー', '山田', '!!')
// ヤッホー、山田さん!!

// greet(undefined, '鈴木')
// こんにちは、鈴木さん。

  • スプレッド構文
    • ...nums のようにすることで、列挙可能なオブジェクトを展開する
const array1 = ['hoge', 'fuga', 'moja']
const array2 = [1, 2, 3]

const array3 = [...array1, ...array2]
console.log(array3) // ['hoge', 'fuga', 'moja', 1, 2, 3]

  • レスト構文
    • ...nums のようにすることで、複数の要素を集約する
function raceResults(gold, silver, ...rest) {
    console.log(`金: ${gold}`)
    console.log(`銀: ${silver}`)
    console.log(`その他: ${rest}`)
}

raceResults('太郎', '次郎', '三郎', '四郎', '五郎', '六郎')
// 金: 太郎
// 銀: 次郎
// その他: 三郎,四郎,五郎,六郎

// ...rest に 三郎,四郎,五郎,六郎 が集約される

  • 分割代入
    • 配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入すること
// オブジェクトの分割代入
const color = { r: 0, g: 122, b: 204, a: 1 };

// r → red のように新しい変数名を指定できる
// = 0.5 はデフォルト値の設定
const { r: red, g: green, b: blue, a: alpha = 0.5 } = color; 
console.log(green); // 122



// パラメータの分割代入
function foo({ a, b }) {
    console.log(a, b);
}
foo({ a: 1, b: 2, c: 3 }); // 1 2

以上です。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です