輝昌2017/5/262019/4/5こんにちは!Webコーダー・プログラマーの貝原(@touhicomu)です。今日は、JavaScriptの数値のチェック方法について解説したいと思います。変数が数値かどうかチェックしたい!うまい正規表現とかないの?小数点、カンマ、+符号、-符号、0始まりも考慮してチェックして欲しい数値の範囲や桁数をチェックしたい!うまい方法はないの?などの疑問が浮かぶのもうなづけます。数値の範囲や桁数のチェック方法について、解説したいと思います。Number)メソッドによる方法があります。isNaNがどういう値の時trueを返し(値が数値でない)、どういう値の時falseを返す(値が数値)のか、以下、実際のコードで確認してみましょう。true以上のように、明らかに数値でない文字列と、undefined、配列とオブジェクト、それにNaNの場合にisNaN()はtrueを返し、数値でないと判断しています。nullの場合はisNaN()はfalseを返し、数値であると判断しています。これは、nullは数字上0と扱われるためです。数値と解釈できる文字列、8進数の数値リテラル(0から始まる数値)と、16進数の数値リテラル(0xで始まる数値)の場合や、無限大を表す数値リテラルInfintyの場合、Boolean型の値の場合は、isNaN()はfalseを返し、数値であると判断しています。NaNについてはこちらの記事で解説しているので、ぜひ確認してください。値が数値であるかどうかチェックする方法として「有限の数値であるにtrueとなる」isFiniteメソッドによる方法があります。isFiniteがどういう値の時trueを返し(値が有限の数値)、どういう値の時falseを返す(値が有限の数値でない)のか、以下、実際のコードで確認してみましょう。false以上のように、明らかに数値でない文字列と、undefined、配列とオブジェクト、それに無限大Infinityと非数値NaNの場合にisFinite()はfalseを返し、有限の数値でないと判断しています。nullの場合はisFinite()はtrueを返し、有限の数値であると判断しています。これは、nullは数字上0と扱われるためです。数値と解釈できる文字列、8進数の数値リテラル(0から始まる数値)と、16進数の数値リテラル(0xで始まる数値)の場合、Boolean型の値の場合、isFinite()はtrueを返し、有限の数値であると判断しています。数値変換後のチェックについてこれまでご紹介したチェック方法は、数値を変換したあとに正しく処理が行われたかどうかを確認するときによく使われます。そこで、簡単なサンプル例をもとに変換後のチェック例を解説しておきます!例えば、「300px」という値をそのまま数値変換した場合を見てみましょう。数値ではありませんこの例では、数値変換するためにNumberオブジェクトの引数として「300px」という文字列を代入しています。「px」という文字列が含まれているので変換後の値は「NaN」の扱いになります。false」を返すようにしているわけです。このように記述すれば、数値として変換されなかった場合には事前に何らかのアクションを起こすことが可能なので、不明なバグに時間を費やすこともなくなるでしょう。正規表現に数値を表す文字列がマッチするかどうかで、数値のチェックを行ってみましょう。指定した正規表現に含まれる値をチェックするためには、searchメソッドを使用します。これは、「0~9の数字が行頭から行末まで並んでいる」文字列とマッチします。このように今節で使用する正規表現は簡潔なもので、まずは正規表現での数値チェックの流れを確認するためのものです。詳細な、カンマつき、小数点つきの数字などのチェックは次章で解説します。-1以上のように、明らかに数字である変数n01は0文字目から正規表現とマッチするので、返値が0でした。明らかに数字でない変数n02は正規表現とマッチしないので、返値が-1(マッチなしの意味)でした。小数点カンマ区切り0始まりの数字+符号-符号を考慮してみましょう。以上を考慮した正規表現は、'^(\\+|\\-)?(0[1-9]{0,2}|\\d{0,3}*)(,\\d{3})*(\\.[0-9]+)?$'となります。+符号、-符号それでは、実際にコードで確認してみましょう。-1小数点、カンマ、0埋め、+符号、-符号が正しくついている数字を表す文字列は、正規表現検索のsearch()メソッドの返値が0(正規表現が文字列の0文字目からと一致)となっています。明らかに数字でない変数n05と、0埋めの数字が4桁になっていてカンマの位置が違ってしまっている変数n06は正規表現検索のsearch()メソッドの返値が-1(一致なし)となっています。小数点・カンマ変換後のチェック小数点・カンマ区切りの数値に関して、正規表現でチェックする方法を学習しましたが、実践的な例として数値変換したあとにチェックする方法も身につけておきましょう!まず最初に、先ほど学習した正規表現でのチェックを関数化していつでも使えるようにしておきます。}}「check()」関数を新しく作成し、中身は先ほど学習した正規表現をそのまま代入しているだけです。false」で返すようにIF文で条件分岐させています。処理が正しくありませんこの例では、「1234567.890」という小数点に正規表現を使ってカンマ区切りを挿入しているのですが、グローバルフラグを付け忘れています。そのため、最初にマッチした箇所だけカンマ区切りが挿入されているので「1,234567.89」となり、正しく処理が行われていません。この時に、先ほど作成した「check()」関数を使って条件分岐させてみると、正しく処理がされていないのが実行結果を見ても分かりますね。数値の範囲チェック方法JavaScriptで数値の範囲チェックを行うには、自分で実装する必要があります。値が有限の範囲であるかをチェックするコードを見てみましょう。数値型でさまざまな値を取得する方法」の章を参考にしてください。valid.以上のように、変数nは有限の数字です。任意の最大値、最小値の範囲内であるかどうかをチェックするコードも見てみましょう。range.以上のように、変数n(==100)は、範囲110~120の間にはありませんでした。最後に、数値の桁数をチェックする方法について学習をしていきましょう!まず最初に、JavaScriptでは桁数をチェックするメソッドが用意されていないので、自分で実装する必要がある点に注意しましょう。);実行結果5この例では、与えられた数値を文字列に変換したうえで文字数を数えるという処理を行っています。」も含めて数えてしまうため、Math.abs()を使って絶対値を取得するのを忘れないようにしましょう。(ドット)」を活用して数値を2つに分割するという点です。「123.45」という小数点があった場合に、「123」と「45」の2つに分割すれば「45」が2桁の数値であることは先ほどの例からも明らかですよね。(ドット)」の前後で2つに分割しています。このようにすることで配列化されるわけですが、1番目の要素に小数点以下の数値が格納されているので、lengthを使って文字数を数えれば良いわけです。今回自作した「check()」関数は、第1引数にチェックしたい小数点を当てはめて、第2引数に桁数を指定しています。3)」であれば、「123.456」が小数点以下3桁であるかどうかをチェックするという意味になるわけです。最後に、小数点以下の桁数変換を行った際に、先ほど自作した関数を使ってチェックする方法をご紹介しておきます。JavaScriptでは小数点以下の桁数変換に「toFixed()」を使うのが一般的です。);実行結果12.35この例では、「toFixed(2)」とすることで小数点以下の桁数を2桁に指定できているのが実行結果からも確認できますね。);実行結果trueこの例では、指定の桁数を「digit」に代入し、toFixed()関数で小数点以下の桁数変換を行っています。その後に、check()関数を使い目的の桁数に正しく変換されたことをチェックしているのが実行結果からも確認できますね。数値や小数点の桁数変換は一般的なプログラムにもよく出てくるので、このようなチェック方法をぜひ参考にしてみてください!まとめいかがでしたでしょうか。簡単に変数値が数値であるかどうかを確認するのは、isNaN()やisFinite()を使う方が便利でした。文字列が数値であるかどうかを確認するのは、正規表現を用いることが適切でした。文字列を正規表現でマッチさせる処理はよく使われるコードなので、ぜひ、ここで使い方を覚えておいてください。数値の範囲チェックや桁数チェックをするためには、自分でコードを実装する必要がありました。不便と感じるかもしれませんが、自分で実装する分自由に応用が利きますので、ぜひ、覚えておいてください。JavaScriptの数値のチェックについて忘れてしまったら、またこのページをご覧になってください!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。輝昌こんにちは!貝原(@touhicomu)と申します。現在は、Web業界のフリーランスとして、主にPHP/WordPress/BuddyPress/VPSサーバー構築などの業務を受注しています。現住所は、日本の西海岸、長崎県は波佐見町です。ボランティアでほたる撮影会やそば塾などのスタッフとして参加させて頂いています。以下の活動も行っています。