JavaScriptで数値処理をマスター！最大値、四捨五入、小数点操作まで徹底解説

JavaScriptの基本：数値と文字列の相互変換

JavaScriptでデータを扱う際、数値と文字列は非常に頻繁に相互に変換されます。ユーザーからの入力は多くの場合文字列であり、それを計算可能な数値に変換したり、計算結果をユーザーに分かりやすく表示するために文字列に戻したりする作業は、プログラミングの基本です。

文字列から数値への変換の基本 `parseInt()` / `parseFloat()`

文字列を数値に変換する際には、`parseInt()`と`parseFloat()`の2つの主要なメソッドが役立ちます。`parseInt()`は文字列を整数として解析し、小数点以下は切り捨てられます。例えば、”123.45″は123に変換されます。また、基数（進数）を指定することも可能です。一方、`parseFloat()`は文字列を浮動小数点数として解析し、小数点以下も保持します。これらのメソッドは、文字列の先頭から数値として解釈できる部分までを変換し、数値として解釈できない文字が現れるとそれ以降は無視されます。もし先頭が数値でない場合は`NaN`を返します。

例えば、`parseInt(“123.45”)`は`123`を、`parseFloat(“123.45abc”)`は`123.45`を返します。これらはユーザーが入力したデータから数値部分を抽出するのに非常に便利です。

出典: 参考情報

数値から文字列への変換の基本 `toString()` / テンプレートリテラル

数値を文字列に変換する方法はいくつかあります。最も基本的なのは、すべてのJavaScriptのオブジェクトが持つ`toString()`メソッドです。このメソッドは、数値を文字列に変換し、必要に応じて基数を指定して10進数以外の表記にすることもできます（例: `(10).toString(2)`で”1010″）。

より現代的な方法としては、テンプレートリテラルを使用する方法があります。バッククォート（`）で囲まれた文字列内で `${変数}` の形式を使うことで、数値を含む変数を簡単に文字列に埋め込むことができます。例えば、`const num = 10; console.log(\`数値は${num}です。\`);` のように使います。また、小数点以下の桁数を指定して文字列化する`toFixed()`も数値から文字列への変換の一種ですが、こちらは数値の丸め処理も兼ねています。

注意点と型の厳密なチェック `Number()` / `typeof`

JavaScriptは動的型付け言語であり、型変換が自動的に行われることがありますが、予期せぬ結果を避けるためには型の厳密なチェックと変換が重要です。`Number()`関数を使用すると、文字列全体を数値として解釈しようとします。文字列全体が有効な数値でない場合、`parseInt()`や`parseFloat()`と異なり`NaN`を返します（例: `Number(“10px”)`は`NaN`）。

変数の型を確認するには`typeof`演算子を使用します（例: `typeof 123`は”number”）。特に数値として期待する値が`NaN`（Not-a-Number）であるかを判定するには、`isNaN()`関数が有効です。`NaN`は`number`型に属しますが、通常の数値演算結果とは異なるため、このチェックは非常に重要です。

四則演算と商：JavaScriptで計算をマスターしよう

JavaScriptにおける数値処理の基本は、やはり四則演算にあります。プログラムで何らかの計算を行う際には、これらの演算子を正確に理解し、使いこなすことが不可欠です。日常生活で使う計算と同様に、加算、減算、乗算、除算はプログラミングでも基礎中の基礎となります。

基本的な四則演算子 `+`, `-`, `*`, `/`

JavaScriptでは、基本的な四則演算を行うために以下の演算子を使用します。

• `+` (加算): 2つの数値を足します。例: `10 + 5` は `15`
• `-` (減算): 左の数値から右の数値を引きます。例: `10 – 5` は `5`
• `*` (乗算): 2つの数値を掛けます。例: `10 * 5` は `50`
• `/` (除算): 左の数値を右の数値で割ります。例: `10 / 5` は `2`

特に注意が必要なのは、`+`演算子です。文字列と数値を`+`で結合すると、数値も文字列に変換されて結合されます（例: `”Hello” + 5` は `”Hello5″`）。数値の加算を行いたい場合は、両方のオペランドが数値であることを確認しましょう。

剰余算とべき乗 `%、**`

四則演算以外にも、便利な算術演算子がいくつかあります。

• `%` (剰余算): 割り算の余りを計算します。偶数/奇数の判定や、ある周期で処理を行う場合などに活用されます。例: `10 % 3` は `1`、`10 % 2` は `0`。
• `**` (べき乗): ES2016で導入された演算子で、左の数値を右の数値で累乗します。以前は`Math.pow()`関数を使う必要がありましたが、より簡潔に記述できるようになりました。例: `2 ** 3` は `8` (2の3乗)。

これらの演算子を理解することで、より複雑な計算もスムーズに記述できます。

複合代入演算子とインクリメント/デクリメント `+=`, `++` など

変数に対して計算を行い、その結果を同じ変数に再代入する場合、JavaScriptでは「複合代入演算子」を使うことでコードを簡潔に記述できます。

• `+=`, `-=`, `*=`, `/=`, `%=`: 例えば、`x = x + 5;` は `x += 5;` と同じ意味になります。

また、数値を1だけ増減させる場合には「インクリメント演算子」と「デクリメント演算子」が非常に便利です。

• `++` (インクリメント): 数値を1加算します。例: `x++` または `++x`
• `–` (デクリメント): 数値を1減算します。例: `x–` または `–x`

これらの演算子には前置（`++x`）と後置（`x++`）があり、その違いは、式全体の評価時に元の値が使われるか、変更後の値が使われるかという点にあります。

小数点以下の処理：四捨五入、切り捨て、切り上げを使いこなす

数値を扱う上で、小数点以下の処理は避けて通れません。特に金融計算やデータ分析などでは、正確な丸め処理が求められます。JavaScriptには、小数点以下の値をコントロールするための強力な`Math`オブジェクトが用意されています。

切り捨てと切り上げ `Math.floor()` / `Math.ceil()`

`Math`オブジェクトは、数値を特定のルールに基づいて丸めるためのメソッドを提供します。

• `Math.floor()`: 与えられた数値を常に小数点以下で切り捨て、それ以下の最大の整数を返します。正の数では小数点以下が単純に削除されるように見えますが、負の数ではより小さい整数（0から遠い方）に丸められます。例: `Math.floor(3.9)` は `3`、`Math.floor(-3.1)` は `-4`。
• `Math.ceil()`: 与えられた数値を常に小数点以下で切り上げ、それ以上の最小の整数を返します。こちらも負の数で挙動を理解しておくことが重要です。例: `Math.ceil(3.1)` は `4`、`Math.ceil(-3.9)` は `-3`。

これらのメソッドは、特に「余りを出さない整数」や「常に上方/下方への丸め」が必要な場面で活躍します。

出典: 参考情報

一般的な四捨五入 `Math.round()`

`Math.round()`メソッドは、与えられた数値を最も近い整数に四捨五入します。小数点以下が0.5以上の場合は切り上げ、0.5未満の場合は切り捨てられます。多くの人が期待する一般的な四捨五入の動作です。

ただし、負の数で小数点以下がちょうど0.5の場合の挙動には注意が必要です。多くのプログラミング言語では負の無限大の方向（つまり、より小さい整数）に丸められることが多いですが、JavaScriptの`Math.round(-3.5)`は`-3`を返します。これは正の無限大の方向（0に近い方）に丸められるためです。この点を理解しておくことで、予期せぬバグを防ぐことができます。

例: `Math.round(3.4)`は`3`、`Math.round(3.5)`は`4`、`Math.round(-3.5)`は`-3`。

出典: 参考情報

指定した桁数での丸めと文字列化 `toFixed()`

`Math`オブジェクトのメソッドは整数に丸めますが、特定の小数点以下の桁数で丸めたい場合は、数値型の`toFixed()`メソッドが便利です。このメソッドは、数値を指定された小数点以下の桁数に丸め、その結果を文字列として返します。

指定した桁数に満たない場合は末尾にゼロが追加され、反対に多すぎる場合は四捨五入されます。注意点として、返り値は文字列であるため、数値として計算に利用したい場合は`Number()`関数などで再度数値に変換する必要があります。また、非常に大きな数値では指数表記になることもあります。

例: `let num = 123.456789; num.toFixed(2)` は `”123.46″` を返します。

出典: 参考情報

配列操作の基本：最大値の取得、重複削除、空配列の判定

JavaScriptにおける配列は、複数のデータをまとめて管理するための非常に強力なツールです。数値の配列を扱う際には、その中から特定の情報を効率的に抽出したり、データを整理したりする技術が求められます。ここでは、配列を操作する上で特に役立つ基本的なテクニックを見ていきましょう。

配列の最大値を取得する `Math.max()`とスプレッド構文

数値の配列から最大値を見つけ出すには、`Math.max()`メソッドが非常に有効です。このメソッドは、引数として与えられた複数の数値の中から最も大きい値を返します。ただし、`Math.max()`は引数を個別の値として受け取るため、配列をそのまま渡すことはできません。

ここで登場するのが「スプレッド構文 (`…`)」です。スプレッド構文を使うと、配列の要素を`Math.max()`に個別の引数として展開して渡すことができます。例えば、`const numbers = [10, 25, 5]; Math.max(…numbers);` とすることで、配列`numbers`の中から`25`という最大値を取得できます。引数に数値に変換できない値が含まれる場合は`NaN`を返します。

出典: 参考情報

配列から重複する値を取り除く `Set`オブジェクト

配列内に重複する値が含まれている場合、それらを取り除き、一意な値のみのリストを作成したいことがあります。JavaScriptの`Set`オブジェクトは、重複しない値のコレクションを格納できるため、この目的に非常に適しています。

配列から重複を削除する手順は簡単です。まず、既存の配列を引数として新しい`Set`オブジェクトを作成します。`Set`は自動的に重複を取り除きます。次に、その`Set`オブジェクトを再度スプレッド構文か`Array.from()`を使って配列に変換し直せば、重複が削除された新しい配列が完成します。例: `const arr = [1, 2, 2, 3]; const uniqueArr = […new Set(arr)];` で `[1, 2, 3]` が得られます。

配列が空かどうかを判定する `length`プロパティ

プログラムの実行中に、配列が空であるかどうかを確認する必要がある場面はよくあります。例えば、空の配列に対して処理を行おうとするとエラーが発生したり、予期せぬ結果になったりする可能性があります。配列が空であるかどうかを判定するには、配列の`length`プロパティを利用するのが最もシンプルで効率的な方法です。

`length`プロパティは、配列に含まれる要素の数を返します。したがって、`array.length === 0` という条件式を用いることで、配列が一つも要素を持たない（つまり空である）ことを正確に判定できます。この簡単なチェックによって、堅牢なコードを書くことができます。例えば、`if (myArray.length === 0) { console.log(“配列は空です”); }` のように使用します。

より高度な配列操作：ソートや多次元配列の扱い

配列の基本を理解したら、次はより複雑なデータの並べ替えや構造化されたデータの扱い方を見ていきましょう。ソートはデータを特定の順序に並べ替えるのに不可欠であり、多次元配列はテーブル状のデータを効率的に管理するための強力な手段です。これらの高度なテクニックを習得することで、データ処理能力が格段に向上します。

配列を並べ替える `sort()`メソッド

配列の要素を特定の順序に並べ替えるには、配列の組み込みメソッドである`sort()`を使用します。デフォルトでは、`sort()`は配列の要素を文字列として扱い、辞書順（Unicodeのコードポイント順）にソートします。このため、数値の配列をそのままソートすると、予期せぬ結果になることがあります（例: `[1, 10, 2]`が`[1, 10, 2]`のまま、または`[1, 2, 10]`ではなく`[1, 10, 2]`となる）。

数値配列を正しくソートするには、`sort()`メソッドに「比較関数」を引数として渡す必要があります。この比較関数は2つの引数を受け取り、その戻り値によってソート順を決定します。例えば、昇順にソートするには `(a, b) => a – b` を、降順には `(a, b) => b – a` を比較関数として渡します。

多次元配列の基礎とその操作

多次元配列とは、「配列の中に配列がある」という構造を持つ配列のことです。これにより、表形式のデータ（行と列を持つデータ）やゲームのマップ情報などを効率的に表現できます。最も一般的なのは2次元配列ですが、必要に応じて3次元以上の配列も作成できます。

多次元配列の要素にアクセスするには、複数のインデックス（添字）を使用します。例えば、`matrix[row][col]` のように記述し、特定の行と列の要素にアクセスします。多次元配列の要素を処理する際には、ネストされたループ（forループの中にforループ）を用いるのが一般的です。これにより、すべての要素に対して順番に操作を行うことができます。

配列の便利な繰り返し処理 `map()`, `filter()`, `reduce()`

現代のJavaScriptでは、配列の要素を反復処理するための高階関数（メソッド）が非常に充実しています。これらを活用することで、コードをより簡潔に、そして読みやすく記述することができます。

• `map()`: 配列の各要素に対して指定された関数を適用し、その結果から新しい配列を生成します。元の配列は変更されません。例えば、すべての数値を2倍にした新しい配列を作成する、といった場合に利用します。
• `filter()`: 配列の各要素に対して指定された条件（関数）を適用し、条件を満たす要素のみを集めて新しい配列を生成します。これも元の配列を変更しません。例えば、10より大きい数値だけを抽出する、といった場合に便利です。
• `reduce()`: 配列のすべての要素を処理して、単一の値を生成します。例えば、配列内の数値の合計を計算したり、配列から一つのオブジェクトを作成したりする際に使用されます。

これらのメソッドは、データを変換、抽出、集計する際に非常に強力なツールとなります。