icon
icon

JavaScriptでMathオブジェクトを使う方法【初心者向け】

プログラミング初心者向けに、JavaScriptの組み込み関数の1つ【Mathオブジェクト】を使って数値計算をする方法を解説した記事です。Mathオブジェクトを使うことで、円周率や最大値の取得、四捨五入などができます。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptの組み込み関数の1つ、Mathオブジェクトを使って数値計算をする方法について解説します。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

目次

1時間でできる無料体験!

 

 

組み込み関数のMathオブジェクトとは

組み込み関数とは、JavaScrip側であらかじめ用意してくれているオブジェクトのことです。Mathオブジェクトは、組み込み関数の1つで、数値計算を扱う際に使います。

 

参考までに、組み込み関数の代表的なものには次のようなものがあります。

 

<組み込み関数(代表的なもの)>

  • String 文字列を扱う
  • Number 数値を扱う
  • Boolean 論理値を扱う
  • Array 配列を扱う
  • Date 日付を扱う
  • Math 数値計算で扱う

 

はじめから関数の内容が決まっているので、こちらで定義する手間もなく、実行するだけ。非常に便利なので重宝します。

組み込みオブジェクトを使う場合、newを使って次のようにオブジェクトを生成します。

var オブジェクト名= new object(); 

 

しかし、Mathの場合は特殊で、new を使ってオブジェクトを生成しなくても、プロパティやメソッドを呼び出し、数値計算をおこなうことができます。

ただ、今記事では便宜的にMathオブジェクトと呼びます。

 

大石ゆかり

田島メンター!平方根とか円周率とか、そういった数学的な関数はありますか?

田島悠介

JavaScriptではMathオブジェクトに関数としてまとめられてるんだ。

大石ゆかり

Mathって英語で数学って意味なので、わかりやすいですねー。

田島悠介

そうだね。他のプログラミング言語でもMathとしてまとめられてたりするんだよ。さっそくMathオブジェクトを使ってみよう!

 

[PR] フロントエンドで副業する学習方法を動画で公開中

Mathオブジェクトのプロパティを呼び出してみよう

console.logを使って日付に関する様々なプロオパティやメソッドを呼び出してみましょう。

Mathオブジェクトでの数値計算の操作の仕方を、4つのプロパティを例に見ていきましょう。

 

 

プロパティ1. PI(円周率を取得する)

オブジェクトのプロパティを呼び出すときは、変数名に「.」で続けてプロパティ名を入れると、プロパティの値を呼び出すことができました。

ただ、先述したようにMathではオブジェクトを生成する必要がないので、次のように書くだけで大丈夫です。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <script>
      console.log(Math.PI);
    </script>
  </body>
</html>

PI3.14からはじまるおなじみの円周率が取得されました。

 

 

プロパティ2. sqrt()(指定した数値の√を取得する)

sqrt() の( )内に入れた数値の√(ルート)を取得します。

64の √ は……

<script>
  console.log(Math.sqrt(64));
</script>

8

8ですね。

 

 

プロパティ3. max(a,b,c,…….,z)(最大値を取得する)

sqrt() の( )内に入れた数値のなかから、最も大きい値を取得します。

<script>
  console.log(Math.max(1,9,3,5,6,4));
</script>

9
1,9,3,5,6,4のなかの最大値「9」が取得されました。

反対に、min (a,b,c,…….,z)を使うと最小値を取り出すことができます。

 

 

プロパティ4. round() (四捨五入した値を取得する)

round() の( )内に入れた数値の、四捨五入した値を取り出します。

<script>
  console.log(Math.round(57.712134782005423));
</script>

58

四捨五入された値「58」が取り出されました。

 

JavaScriptの組み込み関数の1つ、Mathオブジェクトを使って数値計算をする方法については以上です。

今回は4つのみのご紹介になりますが、Mathにはほかにも様々な計算をおこなうプロパティ・メソッドがたくさんあります。必要に応じて調べ、使ってみてくださいね。

 

JavaScriptの組み込み関数の記事は、JavaScriptでDateオブジェクトを使って日付を表示する方法もあるので合わせてご覧ください。

 

大石ゆかり

Mathオブジェクトで計算することが出来ました。ただ、Mathはnewしなくても良いんでしょうか?

田島悠介

そうなんだ。正確な意味は、どうしてもJavaやC#、C言語のような低級言語を使ってみないとわかりにくいんだけど、staticなオブジェクトなんだよね。

大石ゆかり

staticってどんな感じでしょうか?

田島悠介

newしてオブジェクトを生成すると、その都度、メインメモリを使って保存されていくんだよね。staticなオブジェクトの場合、1つで済むんだ。数学の関数って不変なので、1つでいいよね。

 

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」

こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する