JavaScript学び直し。応用編！

ドットインストールで、JavaScriptの学び直しを行いました。
大切だと思ったことをメモに残していきます。✍🏻

# 数値操作編

## `Math.ceil`
どの値でも、切り上げ整数。
「自分より大きい方向」へ進んで、最も近い整数を見つけます。

- `Math.ceil(5.1)` は 6 
- `Math.ceil(5.8)` は 6
- `Math.ceil(5.0)` は 5
- `Math.ceil(-5.1)` は -5（-5.1の天井は-5、より大きい方向へ）
- `Math.ceil(-5.8)` は -5

## `Math.floor`
どの値でも、切り捨て整数。
「自分より小さい方向」へ進んで、最も近い整数を見つけます。

- `Math.floor(5.1)` は 5 
- `Math.floor(5.8)` は 5 
- `Math.floor(5.0)` は 5
- `Math.floor(1.7)` は 1
- `Math.floor(-5.1)` は -6 （-5.1の床は-6、より小さい方向へ）
- `Math.floor(-5.8)` は -6

## `Math.round`
1.6以上だったら切り上げ整数。
1.6未満だったら切り捨て整数。

## `.toFixed(桁数)`
桁数で四捨五入した値を算出。
戻り値は**文字列**となる。
```JavaScript
(n / 138.91).toFixed(2);
```
## `.toLocaleString()`
３桁ごとにカンマを入れてくれる。
数値にしか使用できない。

## `Math.random()`
0以上1未満のランダムな少数を生成してくれる。

上限の値を変えたい場合はかける。
以下だと、0以上3未満となる。
```JavaScript
Math.random() * 3
```

## `Math.max() / Math.min()`

### `Math.max()`
与えられた複数の数値の中から、最も大きい（最大の）数値を見つけて返すメソッドです。

```JavaScript
console.log(Math.max(10, 5, 20, 3)); // 20
console.log(Math.max(100, 50));     // 100
console.log(Math.max(-1, -5, -2));  // -1 (負の数でも最大値を見つける)
console.log(Math.max(0, 0, 0));     // 0
```

### `Math.min()`
与えられた複数の数値の中から、最も小さい（最小の）数値を見つけて返すメソッドです。

```JavaScript
console.log(Math.min(10, 5, 20, 3)); // 3
console.log(Math.min(100, 50));     // 50
console.log(Math.min(-1, -5, -2));  // -5 (負の数でも最小値を見つける)
console.log(Math.min(0, 0, 0));     // 0
```

### それぞれのポイント
配列の中に含まれる数値の最大値を見つけたい場合は、スプレッド構文 (...) を使うと便利です。

```JavaScript
const numbers = [15, 8, 30, 2];
console.log(Math.max(...numbers)); // 30
```

:::note info
- 引数がない場合:
`Math.max()`を引数なしで呼び出すと、`-Infinity` (負の無限大) を返します。これは、比較対象がないので「どんな数よりも小さい」という状態を表します。

- 非数値が含まれる場合: 
引数の中に数値に変換できないもの（例: `NaN`、文字列など）が含まれていると、結果は` NaN `になります。
:::

# 文字列操作編
- `文字列.length`で長さを取得できる
- `[x]`で文字へのアクセスができる（読み取り専用）

## `toLowerCase()`
文字列を全て小文字にする。
## `toUpperCase()`
文字列を全て大文字にする。
## `trim()`
前後の空白を除去する。
## `includes()`
ある**文字列や配列**の中に、特定の文字列や要素が「含まれているかどうか」を調べるメソッドです。
結果は `true`（含まれている）または `false`（含まれていない）の真偽値で返されます。
```JavaScript
元の配列.includes(検索したい要素, [検索開始位置]);
```

:::note info
大文字・小文字を区別します。
:::

## `indexOf()`
ある文字列や配列の中に、特定の文字列や要素が「どこにあるか（最初の位置）」を調べるメソッドです。
見つかった場合はそのインデックス（位置番号）を、見つからなかった場合は -1 を返します。
```JavaScript
元の配列.indexOf(検索したい要素, [検索開始位置]);
```
- 検索開始位置 は省略可能で、デフォルトは 0 です。

:::note info
大文字・小文字を区別します。
:::

## `startsWith() `
ある文字列が、特定の文字列で「始まっているかどうか」を調べるメソッドです。
結果は `true` または `false` で返されます。

:::note info
- このメソッドは文字列にのみ使えます。配列には使えません。
- 大文字・小文字を区別します。
:::

## `slice()`
元の文字列や配列の一部を「切り出して」、新しい文字列や配列を作成するためのメソッドです。
元のデータは変更されません。
```JavaScript
元のデータ.slice(開始インデックス, [終了インデックス]);
```
- 開始インデックス (startIndex):
    - 切り出しを開始したい位置のインデックス（番号）を指定します。
    - 負の数を指定すると、末尾からの位置を示します。
（例: -1 は最後尾の要素/文字、-2 は最後から2番目）
- 終了インデックス (endIndex):
    - 切り出しを終了したい位置のインデックスの直前を指定します。
    - このインデックスの要素/文字は含まれません。
    - 省略した場合、開始インデックスからデータの最後までが切り出されます。
    - 負の数を指定すると、末尾からの位置を示します。

実行例をみてみましょう。
```JavaScript
const colors = ["red", "green", "blue", "yellow", "purple"];
// インデックス:    0       1       2         3         4

// 例1: 開始インデックスのみ指定 (そこから最後まで)
console.log(colors.slice(2));      // ["blue", "yellow", "purple"] (インデックス2 'blue' から最後まで)

// 例2: 開始インデックスと終了インデックスを指定
console.log(colors.slice(0, 3));   // ["red", "green", "blue"] (インデックス0 'red' からインデックス3 'yellow' の直前まで)
console.log(colors.slice(1, 4));   // ["green", "blue", "yellow"]

// 例3: 負のインデックスを使用 (末尾から数える)
console.log(colors.slice(-3));     // ["blue", "yellow", "purple"] (最後から3番目 'blue' から最後まで)
console.log(colors.slice(-4, -1)); // ["green", "blue", "yellow"] (最後から4番目 'green' から最後から1番目 'purple' の直前まで)

// 例4: 引数なし
console.log(colors.slice());       // ["red", "green", "blue", "yellow", "purple"] (配列全体のシャローコピーを作成)
// これは、元の配列を変更せずに新しい配列のコピーを作りたい場合によく使われます。
```

:::note info
引数なしで呼び出すと、元の配列や文字列の完全なコピーが作成されます。
:::

## `replace()`
文字列の中から「最初に見つかった」指定のパターン（文字列または正規表現）を、別の文字列に置き換えるメソッドです。

```JavaScript
元の文字列.replace(検索パターン, 置換する文字列);
```
- 検索パターン: 置き換えたい文字列、または正規表現を指定します。
- 置換する文字列: 置き換え後の文字列を指定します。

:::note info
`replace`のポイント
- 大文字・小文字を区別します。
- 「最初に見つかったものだけ」を置換します。
- 元の文字列は変更しない。
:::

## `replaceAll()`
文字列の中から指定のパターン（文字列または正規表現）に一致する「すべて」の箇所を、別の文字列に置き換えるメソッドです。

```JavaScript
const sentence2 = "Hello World! Hello JavaScript!";

// 例1: すべての"Hello"を"Hi"に置き換える
console.log(sentence2.replaceAll("Hello", "Hi"));
// 出力: "Hi World! Hi JavaScript!" (すべての"Hello"が置き換わる)

// 例2: 見つからない場合
console.log(sentence2.replaceAll("Goodbye", "See you"));
// 出力: "Hello World! Hello JavaScript!" (元の文字列がそのまま返される)
```

## `repeat()`
文字列を「指定した回数だけ繰り返して」、新しい文字列を作成するメソッドです。

```JavaScript
元の文字列.repeat(繰り返す回数);
```
繰り返す回数: 文字列を繰り返したい回数を整数で指定します。

```JavaScript
const star = "*";
const dash = "-";
const greeting = "Hello ";

// 例1: 5回繰り返す
console.log(star.repeat(5));     // "*****"

// 例2: 3回繰り返す
console.log(greeting.repeat(3)); // "Hello Hello Hello "

// 例3: 0回繰り返す
console.log(dash.repeat(0));     // "" (空文字列 - 繰り返さないので何も表示されない)

// 例4: 小数点以下の回数を指定した場合 (切り捨てられる)
console.log(star.repeat(3.8));   // "***" (3回繰り返される)

// 例5: 負の数を指定した場合 (エラーになる)
// console.log(star.repeat(-1)); // RangeError: Invalid count value
```

:::note info
`reprat`のポイント
- 元の文字列は変更しない。
- 負の数を指定すると RangeError というエラーが発生します。
:::

## `padStart()/padEnd()`

`padStart()` は、文字列の「先頭」に、指定した文字を挿入して、文字列全体の長さを特定の長さにするメソッドです。

`padEnd()` は、文字列の「末尾」に、指定した文字を挿入して、文字列全体の長さを特定の長さにするメソッドです。

```JavaScript
元の文字列.padStart(目標の長さ, [埋める文字]);
```

- 目標の長さ (targetLength):
    - 新しく作りたい文字列の最終的な長さを数値で指定します。
    - もし元の文字列の長さがこの 目標の長さ 以上であれば、パディングは行われず、元の文字列がそのまま返されます。
- 埋める文字 (padString): （省略可能）
    - パディングに使う文字を文字列で指定します。
    - 省略した場合、デフォルトで半角スペース (' ') が使われます。

```JavaScript
const num = "42";
const id = "123";
const word = "hello";

// 例1: 先頭を0で埋めて5桁にする
console.log(num.padStart(5, '0'));   // "00042"
console.log(id.padStart(5, '0'));    // "00123"

// 例2: 目標の長さが元の文字列より短いか同じ場合
console.log(num.padStart(2, '0'));   // "42" (元の長さと同じなので変化なし)
console.log(num.padStart(1, '0'));   // "42" (目標の長さが短いので変化なし)

// 例3: 埋める文字を省略 (デフォルトで半角スペース)
console.log(word.padStart(10));      // "     hello" (5つの半角スペースで埋められる)

// 例4: 埋める文字が複数文字の場合 (足りない分だけ繰り返し使用)
console.log(num.padStart(7, 'abc')); // "abc0042" (abcabc0042 とはならず、必要な分だけ埋められる)
```

:::note info
`reprat`のポイント
- このメソッドは文字列にのみ使えます。
- 元の文字列は変更しない。
:::