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(桁数)

桁数で四捨五入した値を算出。
戻り値は文字列となる。

(n / 138.91).toFixed(2);

.toLocaleString()

３桁ごとにカンマを入れてくれる。
数値にしか使用できない。

Math.random()

0以上1未満のランダムな少数を生成してくれる。

上限の値を変えたい場合はかける。
以下だと、0以上3未満となる。

Math.random() * 3

Math.max() / Math.min()

Math.max()

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

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()

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

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

それぞれのポイント

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

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

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

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

文字列操作編

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

toLowerCase()

文字列を全て小文字にする。

toUpperCase()

文字列を全て大文字にする。

trim()

前後の空白を除去する。

includes()

ある文字列や配列の中に、特定の文字列や要素が「含まれているかどうか」を調べるメソッドです。
結果は true（含まれている）または false（含まれていない）の真偽値で返されます。

元の配列.includes(検索したい要素, [検索開始位置]);

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

indexOf()

ある文字列や配列の中に、特定の文字列や要素が「どこにあるか（最初の位置）」を調べるメソッドです。
見つかった場合はそのインデックス（位置番号）を、見つからなかった場合は -1 を返します。

元の配列.indexOf(検索したい要素, [検索開始位置]);

• 検索開始位置 は省略可能で、デフォルトは 0 です。

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

startsWith()

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

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

slice()

元の文字列や配列の一部を「切り出して」、新しい文字列や配列を作成するためのメソッドです。
元のデータは変更されません。

元のデータ.slice(開始インデックス, [終了インデックス]);

• 開始インデックス (startIndex):
  • 切り出しを開始したい位置のインデックス（番号）を指定します。
  • 負の数を指定すると、末尾からの位置を示します。
    （例: -1 は最後尾の要素/文字、-2 は最後から2番目）
• 終了インデックス (endIndex):
  • 切り出しを終了したい位置のインデックスの直前を指定します。
  • このインデックスの要素/文字は含まれません。
  • 省略した場合、開始インデックスからデータの最後までが切り出されます。
  • 負の数を指定すると、末尾からの位置を示します。

実行例をみてみましょう。

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"] (配列全体のシャローコピーを作成)
// これは、元の配列を変更せずに新しい配列のコピーを作りたい場合によく使われます。

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

replace()

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

元の文字列.replace(検索パターン, 置換する文字列);

• 検索パターン: 置き換えたい文字列、または正規表現を指定します。
• 置換する文字列: 置き換え後の文字列を指定します。

replaceのポイント

• 大文字・小文字を区別します。
• 「最初に見つかったものだけ」を置換します。
• 元の文字列は変更しない。

replaceAll()

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

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()

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

元の文字列.repeat(繰り返す回数);

繰り返す回数: 文字列を繰り返したい回数を整数で指定します。

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

repratのポイント

• 元の文字列は変更しない。
• 負の数を指定すると RangeError というエラーが発生します。

padStart()/padEnd()

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

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

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

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

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 とはならず、必要な分だけ埋められる)

repratのポイント

• このメソッドは文字列にのみ使えます。
• 元の文字列は変更しない。