## 対象読者

- プログラミング初心者
- JavaScript の基本構文を学びたい方
- 今すぐ JavaScript の文法を思い出さないといけない方

## 関数応用

### 関数の定義方法

関数の定義方法は以下の4つがある。

一番オーソドックスな定義方法

```javascript
function 関数名(引数1, 引数2, ...) {
    処理
}
```

```javascript
function add(a, b) {
    return a + b
}
```

アロー関数を使用した定義方法(ES6)
最近のJavaScriptでは、アロー関数を使用した定義方法が主流。

```javascript
const 関数名 = (引数1, 引数2, ...) => {
    処理
}
```

```javascript
const add = (a, b) => {
    return a + b
}
```

戻り値が1つの場合、処理が1行の場合は、以下のようにreturn文を省略することができる。

```javascript
const 関数名 = (引数1, 引数2, ...) => 処理
```

```javascript
const add = (a, b) => a + b
```

functionキーワードを使用した定義方法
現場ではあまり使わない

```javascript
const 関数名 = function(引数1, 引数2, ...) {
    処理
}
```

Functionコンストラクタを使用した定義方法(引数を文字列で指定)
現場ではあまり使わない

```javascript
const 関数名 = new Function('引数1', '引数2', '...', '処理')
```

### 関数の戻り値

関数の戻り値は、return文を使用して指定する。

```javascript
function 関数名(引数1, 引数2, ...) {
    return 戻り値
}
```

戻り値は呼び出し元で受け取ることができる。

```javascript
const add = (a, b) => {
    return a + b
}
const result = add(1, 2)
console.log(result) // 3
```

## 関数の応用

### 標準組み込みオブジェクト

String, Number, Array, Objectなどのオブジェクトは、JSの標準組み込みオブジェクトと呼ばれる。

各詳細については以下を参照

<https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/GlobalObjects>

### Stringオブジェクト

Stringオブジェクトの詳細は以下を参照
<https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/GlobalObjects/String>

Stringオブジェクトのプロパティ

- length: 文字列の長さを取得する(プロパティ)

```javascript
const str = "Hello"
console.log(str.length) // 5
```

Stringオブジェクトのメソッド

JSのStringオブジェクトには、文字列を操作するためのメソッドがある。

- toUpperCase: 文字列を大文字に変換する

```javascript
const str = "Hello"
console.log(str.toUpperCase()) // HELLO
```

- toLowerCase: 文字列を小文字に変換する

```javascript
const str = "Hello"
console.log(str.toLowerCase()) // hello
```

- charAt: 指定した位置の文字を取得する

```javascript
const str = "Hello"
console.log(str.charAt(0)) // H
```

- indexOf: 指定した文字列が最初に現れる位置を取得する

```javascript
const str = "Hello World"
console.log(str.indexOf("o")) // 4
```

- substring: 指定した位置の文字列を取得する

```javascript
const str = "Hello World"
console.log(str.substring(0, 5)) // Hello
```

## Numberオブジェクト

Numberオブジェクトの詳細は以下を参照
<https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/GlobalObjects/Number>

Numberオブジェクトのプロパティ

- MAXVALUE: JSで表現できる最大の数

```javascript
console.log(Number.MAXVALUE) // 1.7976931348623157e+308
```

- MINVALUE: JSで表現できる最小の数

```javascript
console.log(Number.MINVALUE) // 5e-324
```

Numberオブジェクトのメソッド

- toFixed: 指定した桁数で数値を丸める

```javascript
const num = 1.234
console.log(num.toFixed(2)) // 1.23
```

- parseInt: 文字列を整数に変換する

```javascript
const str = "123"
console.log(parseInt(str)) // 123
```

- parseFloat: 文字列を浮動小数点数に変換する

```javascript
const str = "123.45"
console.log(parseFloat(str)) // 123.45
```

- isNaN: 数値がNaNかどうかを判定する

NaNはNot a Numberの略で、数値ではないことを表す特殊な値。

```javascript
console.log(isNaN(1)) // false
console.log(isNaN(10 / "abc")) // true
```

### Arrayオブジェクト

Arrayオブジェクトの詳細は以下を参照
<https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/GlobalObjects/Array>

Arrayオブジェクトのプロパティ

- length: 配列の要素数を取得する(プロパティ)

```javascript
const arr = [1, 2, 3]
console.log(arr.length) // 3
```

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

- push: 配列の末尾に要素を追加する

```javascript
const arr = [1, 2, 3]
arr.push(4)
console.log(arr) // [1, 2, 3, 4]
```

- pop: 配列の末尾の要素を削除する

```javascript
const arr = [1, 2, 3]
arr.pop()
console.log(arr) // [1, 2]
```

- shift: 配列の先頭の要素を削除する

```javascript
const arr = [1, 2, 3]
arr.shift()
console.log(arr) // [2, 3]
```

- unshift: 配列の先頭に要素を追加する

```javascript
const arr = [1, 2, 3]
arr.unshift(0)
console.log(arr) // [0, 1, 2, 3]
```

- splice: 配列の要素を追加または削除する

```javascript
const arr = [1, 2, 3]
arr.splice(1, 0, 4)
console.log(arr) // [1, 4, 2, 3]
```

- slice: 配列の一部を取得する

```javascript
const arr = [1, 2, 3]
arr.slice(1, 2)
console.log(arr) // [2]
```

- concat: 配列を結合する

```javascript
const arr1 = [1, 2]
const arr2 = [3, 4]
console.log(arr1.concat(arr2)) // [1, 2, 3, 4]
```

- join: 配列を結合して文字列に変換する

```javascript
const arr = [1, 2, 3]
console.log(arr.join("-")) // 1-2-3
```

- reverse: 配列を逆順にする

```javascript
const arr = [1, 2, 3]
console.log(arr.reverse()) // [3, 2, 1]
```

- sort: 配列をソートする

```javascript
const arr = [3, 1, 2]
console.log(arr.sort()) // [1, 2, 3]
```

### Callback関数

Callback関数とは、関数を引数として渡す関数のこと。

```javascript
const add = (a, b) => {
    return a + b
}
const sub = (a, b) => {
    return a - b
}
const calc = (a, b, callback) => {
    return callback(a, b)
}
console.log(calc(1, 2, add)) // 3
console.log(calc(1, 2, sub)) // -1
```

Callback関数の例

- map: 各要素に対してCallback関数を適用する

```javascript
const arr = [1, 2, 3]
arr.map((value) => {
    return value * 2
})
console.log(arr) // [2, 4, 6]
```

- filter: 配列の要素をCallback関数でフィルタリングする

```javascript
const arr = [1, 2, 3]
arr.filter((value) => {
    return value > 1
})
console.log(arr) // [2, 3]
```

- reduce: 配列の要素をCallback関数で集計する

```javascript
const arr = [1, 2, 3]
arr.reduce((accumulator, value) => {
    return accumulator + value
}, 0)
console.log(arr) // 6
```

### 再帰関数

再帰関数とは、関数内で自分自身を呼び出す関数のこと。
再帰関数を使用する場合は、無限ループにならないように終了条件を設定する必要がある。

以下は再帰関数を使用して、階乗を求める例。

```javascript
const factorial = (n) => {
    if (n === 0) {
        return 1
    }
    return n * factorial(n - 1)
}
console.log(factorial(5)) // 120
```

### クロージャ

クロージャとは、関数とその関数が定義されたスコープの組み合わせのこと。

以下はクロージャを使用して、カウンターを実装する例。

```javascript
const counter = () => {
    let count = 0
    return () => {
        count++
        console.log(count)
    }
}
const c = counter()
console.log(c()) // 1
console.log(c()) // 2
console.log(c()) // 3
```

## クラス

クラスとは、オブジェクト指向プログラミングにおいて、オブジェクトの設計図のこと。
クラスは抽象的な概念であり、クラスを作成する際には、その概念が共通している属性、動作を定義する。

用語集

- オブジェクト指向プログラミング: プログラムをオブジェクト(データ)とそのオブジェクトの操作(メソッド)によって構成するプログラミング手法
- プロパティ: クラスの属性を表すもの(変数)
- メソッド: クラスの動作を表すもの(関数)
- クラス: オブジェクトの設計図
- インスタンス(=オブジェクト): クラスを実体化したもの
- インスタンス変数: インスタンスに紐づく変数
- インスタンスメソッド: インスタンスに紐づくメソッド
- コンストラクタ: インスタンスを作成する際に呼び出される特別なメソッド
- this: インスタンス変数にアクセスするためのキーワード
- new: インスタンスを作成するためのキーワード

車を例にクラスを作成する。

```javascript
class Car {
    constructor(color, price) {
        // インスタンス変数
        this.color = color
        this.price = price
        this.brand = "Toyota"
        this.model = "Prius"
    }
    run() {
        // インスタンスメソッド
        console.log("走る")
    }
    staus() {
        console.log(`色: ${this.color}, 価格: ${this.price}, ブランド: ${this.brand}, モデル: ${this.model}`)
    }
}
```

上記のように、色や価格などの属性はプロパティとして定義し、走るという動作はメソッドとして定義している。

クラスを使用する際は、インスタンスを作成する。
インスタンスとは、クラスを実体化したもの。
つまり、設計書(クラス)を基に作成された車1台分のこと。

以下のように、newキーワードを使用してインスタンスを作成する。
以下の例では、プリウス、アクア、フィットの3台の車を作成している。

```javascript
const prius = new Car("white", 2000000, "Toyota", "Prius")
const aqua = new Car("blue", 1500000, "Toyota", "Aqua")
const fit = new Car("red", 1000000, "Honda", "Fit")
```

### コンストラクタ

コンストラクタとは、クラスをインスタンス化する際に呼び出される特別なメソッド。

コンストラクタは、インスタンス変数を初期化するために使用される。

以下のように、constructorメソッドを使用してコンストラクタを定義する。

```javascript
class Car {
    constructor(color, price, brand, model) {
        this.color = color
        this.price = price
        this.brand = brand
        this.model = model
    }
}
```

コンストラクタを使用してインスタンス変数に値を設定する場合は、this.プロパティ名 = 値とする。

```javascript
this.color = color
this.price = price
this.brand = brand
this.model = model
```

### プロパティへのアクセス方法

クラスの外では、以下のようにインスタンス変数.プロパティ名でプロパティの値を取得することができる。

```javascript
console.log(prius.color) // white
console.log(prius.price) // 2000000
console.log(prius.brand) // Toyota
console.log(prius.model) // Prius
console.log(aqua.color) // blue
console.log(aqua.price) // 1500000
console.log(aqua.brand) // Toyota
console.log(aqua.model) // Aqua
console.log(fit.color) // red
console.log(fit.price) // 1000000
console.log(fit.brand) // Honda
console.log(fit.model) // Fit
```

クラスの内では、以下のようにthis.プロパティ名でプロパティの値を取得することができる。

```javascript
this.color
this.price
this.brand
this.model
```

### プロパティへの値の設定方法

コンストラクタで指定した引数を使用して、プロパティに値を設定する。

```javascript
class Car {
    constructor(color, price, brand, model) {
        this.color = color
        this.price = price
        this.brand = brand
        this.model = model
    }
}
```

thisキーワードを使用して、インスタンス変数にアクセスする。

```javascript
class Car {
    constructor(color, price, brand, model) {
        this.color = color
        this.price = price
        this.brand = brand
        this.model = model
    }
    status() {
        console.log(`色: ${this.color}, 価格: ${this.price}, ブランド: ${this.brand}, モデル: ${this.model}`)
    }
}
```

thisキーワードはクラス内(class クラス名{}の中)でのみ使用できるキーワード。

値を代入する場合は、クラスのメソッド内で以下のようにthis.プロパティ名 = 値とする。

```javascript
this.color = color
```

値を取得する場合は、クラスのメソッド内で以下のようにthis.プロパティ名でアクセスする。

```javascript
this.color
```

### プロパティの変更方法

クラス外では、以下のようにインスタンス変数.プロパティ名 = 値でプロパティの値を変更することができる。

```javascript
prius.color = "black"
aqua.price = 1800000
```

クラス内で以下のようにthis.プロパティ名 = 値でプロパティの値を変更することができる。

```javascript
this.color = "black"
```

### メソッドの呼び出し方法

以下のように、インスタンス変数.メソッド名()で呼び出すことができる。

```javascript
prius.status() // 色: white, 価格: 2000000, ブランド: Toyota, モデル: Prius
aqua.status() // 色: blue, 価格: 1500000, ブランド: Toyota, モデル: Aqua
fit.status() // 色: red, 価格: 1000000, ブランド: Honda, モデル: Fit
```

また、以下のようにクラスの中にクラスを格納することも可能。

```javascript
class CreditCard {
    constructor() {
        this.creditCardNumber = "1234567890";
        this.cvv = "123";
        this.expirationDate = "12/2022";
    }
}


class User {
    constructor(name, age, email, password) {
        this.name = name;
        this.age = age;
        this.email = email;
        this.password = password;
        this.credit = new CreditCard();
    }
    register() {
        insertdb(this.name, this.age, this.email)
    }
    login() {
        getdb(this.email, this.password)
    }
}
```

### 継承

継承とは、あるクラスを基にして新しいクラスを作ること
継承をすることで、既存のクラスのメソッドやプロパティを再利用できる
継承元のクラスを親クラス、継承先のクラスを子クラスと呼ぶ

```javascript
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log("Some generic sound");
  }
}

class Lion extends Animal {
  roar() {
    console.log("Roar!");
  }

  makeSound() {
    console.log("Roar sound");
  }
}
```

### ポリモーフィズム

ポリモーフィズムとは、同じ名前のメソッドを複数のクラスで定義すること

```javascript
class Animal {
    constructor(name) {
        this.name = name;
    }

    bark() {
        console.log("Generic bark");
    }

    // ポリモーフィズムの例
    makeSound() {
        console.log(`${this.name} make some generic sound`);
    }
}

class Lion extends Animal {
    roar() {
        console.log("Roar!");
    }

    // ポリモーフィズムの例
    makeSound() {
        console.log("Roar sound");
    }
}

class Dog extends Animal {
    bark() {
        console.log(`${this.name} make a woof sound`);
    }

    // ポリモーフィズムの例
    makeSound() {
        console.log("Bark sound");
    }
}

// ラッパー関数
const performSound = (animal) => {
    animal.makeSound();
}

const animal = new Animal("Generic animal");
const lion = new Lion("Simba");
const dog = new Dog("Buddy");

performSound(animal); // "Some generic sound"
performSound(lion); // "Roar sound"
performSound(dog);  // "Bark sound"

class CreditCard {
    constructor(name, number, expirationDate) {
        this.name = name;
        this.number = number;
        this.expirationDate = expirationDate;
    }
}

class Visa extends CreditCard {
    dbconnect() {
        // connectVisaDB()
        console.log("connectVisaDB")
    }
}

class MasterCard extends CreditCard {
    dbconnect() {
        // connectMasterDB()
        console.log("connectMasterDB")
    }
}

class User {
    constructor(name, age, email, credit) {
        this.name = name;
        this.age = age;
        this.email = email;
        this.creditCard = credit
    }

    pay() {
        this.creditCard.dbconnect()
    }
}

let johnvisa = new User("John", 30, "john@example.com", new Visa("rakuten", "111", "12/2022"))
let johnmaster = new User("John", 20, "bob@example.com", new MasterCard("amazon", "222", "12/2022"))
let bobmaster = new User("Bob", 20, "bob@example.com", new MasterCard("amazon", "222", "12/2022"))

johnvisa.pay()
johnmaster.pay()
```


JavaScriptの関数、クラスの応用について学ぶ

脱・人海戦術

Author

Ryo Arai

Jobs

AI Engineer

Full Stack Engineer

SNS

カテゴリ

タグ

PlayGround