TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのparseIntメソッドでエラーが発生する際の対処方法について現役エンジニアが解説【初心者向け】
icon
icon
JavaScript

JavaScriptのparseIntメソッドでエラーが発生する際の対処方法について現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのparseIntメソッドでエラーが発生する際の対処方法について解説しています。ここではparseIntメソッドを使用したときに意図しない動作になりうる場面の例、それぞれの対処法を説明します。メソッドの基本の使い方とあわせて覚えましょう。

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

JavaScriptのparseIntメソッドでエラーが発生する際の対処方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

parseIntメソッドでエラーが発生する際の対処方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

parseIntメソッドとは

文字列を解析し数値を返すメソッドです。
平たく言うと、’（シングルクォート）や”（ダブルクォート）で囲われた数字で書かれた文字列を数値に変換するときに使うメソッドになります。

 

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

parseIntメソッドの使い方

parseIntメソッドはJavaScriptに標準で入っている関数なのでparseInt()のように直接記述して使うことができます。
引数は2つあり第1引数のみ必須です。

第1引数は整数に変換する文字列を指定します。第2引数は基数を指定する数値を指定します。基数は0と1だけで表す2進数なら2、数を数える時に使っている10進数なら10となります。

省略した場合のデフォルト値は10ではないので注意してください。また、省略した場合の動作は実装依存なので基本的には第2引数を指定して使ってください。

 

parseIntメソッドでエラーが発生する際の主な原因とその対処方法

parseIntメソッドでエラーが発生することはあまりありません。なぜならば、数値として解析する第1引数は全角でも数字以外の文字が含まれていても動作するからです。

エラーが発生するとしたら、第２引数の2〜36の整数で指定する基数を全角にしてしまうような構文エラーに近いものになるでしょう。

エラーにはならないものの意図しない動作になりうるパターンをいくつか紹介します。

第1引数の最初の1文字目が数字ではない

parseInt('あ123', 10)

この場合の戻り値は、NaN　となります。
NaNはNot-A-Numberの略で数ではないものを表すオブジェクトです。

第1引数の途中に数字以外の文字が含まれている

parseInt('123あいう456', 10)

この場合の戻り値は、123　となります。
数字以外の文字以降が無視されるためです。

第1引数が0から始まる数字で、第2引数が省略

parseInt('0123')

この場合の戻り値はブラウザによって異なる可能性があります。
0から始まる数を8進数とみなす解釈をするブラウザでは、83　が戻り値です。
10進数として扱うブラウザでは、123　が戻り値です。

第2引数に2〜36の間ではない数値が指定

parseInt('0123', 1)
parseInt('0123', 37)

この場合の戻り値はどちらも、NaN　となります。

 

まとめ

parseIntメソッドを紹介しました。
第2引数を指定することで意図しない動作の多くは防げます。
第2引数は指定するようにしましょう。

 

監修してくれたメンター

横山茂雄（よこやましげお）

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

JavaScriptの連想配列で要素を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptの連想配列で要素を削除する方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、...
JavaScript

JavaScriptのbind関数を使ってイベントハンドラに値を渡す方法を現役エンジニアが解説【初心者向け】

JavaScriptのbind関数を使ってイベントハンドラに値を渡す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心...
JavaScript

JavaScriptのインクリメント演算子の使い方を現役エンジニアが解説【初心者向け】

JavaScriptのインクリメント演算子の使い方について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、...
JavaScript

JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
JavaScript

JavaScriptのmapメソッドの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのmapメソッドの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。これが使...
JavaScript

JavaScriptで「'変数名/関数名' is not defined」というエラーが出る原因と対処法を現役

JavaScriptで「'変数名/関数名' is not defined」というエラーが出る原因と対処法について、TechAcademyのメンター（現役エンジニ...
JavaScript

あわせてよく読まれている記事

文字列を整数に変換！JavaScriptのparseInt( )の使い方【初心者向け】

JavaScriptでparseInt( )を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 文字列を数値として定義することができる関数の使い方を解説します。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、あわせてご覧ください。 目次parseIntメソッドとはparseIntメソッドの使い方parseIntメソッドでエラーが発生する際の主な原因とその対処方法まとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   parseIntとは parseIntとは、文字列の整数を数値型の整数に変換するJavaScriptの組み込み関数（最初から使える関数）です。 JavaScriptでは、文字列の"1"と数値の1は厳密には別物として扱われます。 文字列の数字で計算処理などを行おうとすると、思わぬ不具合につながることがあります。 不具合を避けるために、明示的に文字列型の整数を数値型に変換するのが、この関数の役割です。   parseIntの基礎的な使い方 parseIntの最も基礎的な文法は、以下の通りです。 parseInt(str) strはstringの略称で、文字列を意味します。   さっそく、実際の用例を見てみましょう。 const str = "123" const num = parseInt(str); console.log(num); //-> 123 ここでは文字列型の”123″をstrという名前の変数に代入し、その変数をparseIntの引数に指定し実行しています。 parseIntの実行結果は返り値として取得できるため、返り値をnumという変数に代入しています。 結果、数値型に変換された123が出力されました。   [PR] フロントエンドで副業する学習方法を動画で公開中parseIntを使わないとどうなるのか？ ここまで読んでも、いまいちparseIntでの変換を行う場合と行わない場合でどんな違いがあるのかイメージがつきませんね。 1つの大きな違いとして、足し算を行う場合の結果の違いが挙げられます。 const str1 = "3"; const str2 = "5"; console.log(str1 + str2); //-> "35" const num1 = parseInt(str1); const num2 = parseInt(str2); console.log(num1 + num2); //-> 8 str1 + str2 は、文字列の数字同士の足し算です。 ここではあくまで「文字列」として扱われるため、文字同士をそのまま結合した35が結果になります。 一方、num1 + num2 は、parseIntで数値型に変換された数字同士の足し算なので、通常の四則演算と同じく8が結果になります。 この例のように、型を意識しないプログラミングでは意図しない挙動を生んでしまうことがあります。 parseIntの用法はもちろん重要ですが、それ以上に「型を意識して開発する」ということが、長期的な観点では大事であるといえるでしょう。   parseIntの応用的な使い方（基数） parseIntには、以下のようなもう1つの記述パターンがあります。 parseInt(str, int) 第2引数intは、基数です。 基数とは、2進数や16進数の2や16の部分のことです。 基数を指定することで、変換前の数値を何進数で表現しているかについて宣言できます。 parseIntに基数を指定する用法は、数学的なロジックを扱う場合など、特殊なケースで用いることが多いため、現時点で必ず会得すべきものではありません。 しかし、parseIntと基数には1つ罠が潜んでいます。 それは、「デフォルトの基数が10進数ではないブラウザがある」ことです。 10進数は、普段用いる1,2,3…と続く数字の使い方です。 主要ブラウザの中でGoogle Chrome, Safari, Edgeでは、parseIntのデフォルトの基数が10進数であるため特に問題はないのですが、firefoxやoperaでは、このデフォルトが8進数になっています。 ブラウザによる挙動の違いによって、以下のようなレアケースでバグを引き起こす恐れがあります。 //Chrome, Safari, Edgeの場合 console.log(parseInt("08")); // -> 1 //Firefox, Operaの場合 console.log(parseInt("08")); // -> 0 8進数では”08″は0と変換されるので、このような違いが出てしまいました。 実際の開発で基数の違いによる不具合に遭遇することはまれですが、プログラミングをしていて些細な仕様の違いで悩まされることは多々あります。 上記のようなケースがあり得ることを認識していると、原因究明が素早くできるようになります。 今回の場合、ブラウザに依存せず10進数での結果を見るには、以下のように明示的に指定をしてやればよいですね。 parseInt("08", 10);   まとめ 本記事ではparseIntの基礎文法から、ブラウザによる仕様の違いまでを解説しました。 ポイントをまとめると以下の通りです。 parseIntは文字列型の数字を数値型に変換する関数 文字列のまま数字を扱うと、意図しない挙動を生むことがある parseIntのデフォルトの基数は、ブラウザによって異なる 本記事で紹介した内容をすべて覚えることは簡単ではないですが、大切なことは「こういうケースもあるのか」と新しい視点を発見し、今後の開発でその視点を活用していくことにあります。 parseIntを通じて特に会得しやすい視点は、繰り返しになりますが「型の意識」です。 自分が今扱っているのは文字列型なのか、数値型なのか？と、型を常に意識しながら開発することで、1つ上のレベルを目指すことができます！ 本記事は以上です。   JavaScriptを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい プログラミングを学習していて、このように思ったことはありませんか？ テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
JavaScript

JavaScriptのNumberとparseIntの違いを現役エンジニアが解説【初心者向け】

JavaScriptのNumberとparseIntの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 NumberとparseIntの違いについて詳しく説明していくね！ 大石ゆかり お願いします！   Numberとは Numberとは、オブジェクトの1つで、文字列や数字などの引数をNumber型に型変換するための操作です。 JavaScriptでは、文字列はString型、数値はNumber型として扱われます   Numberの使い方 引数に”123″などの数字を文字列として渡すと、123などの数値に変換されます。 また、引数に”abc”などの値を渡すと、数字ではないため「NaN」という戻り値が返され、これは変換不可能という意味です。   [PR] フロントエンドで副業する学習方法を動画で公開中parseIntとは 引数を解析することで整数を得ることができるオブジェクトです。 JavaScriptに標準で組み込まれた関数のため、いきなり使うことができます。   parseIntの使い方 引数に変換したい数字文字列をセットしましょう。 var int1 = parseInt("123") // 123 parseIntの正式な使い方 parseIntはparseInt(“123”)のように使われることが多いものの、本来は以下コードで使用可能です。 parseInt( 変換したい文字列 , 何進数かを明示 ); 例えば、通常は１０進数で整数を扱うときに以下のように記述します。 parseInt( "123" , 10 );   NumberとparseIntの違い NumberとparseIntの利用例を比較してみましょう。 利用例の比較 以下の３通りの引数を用意します。 ケース１：「7日」　（ 半角数字 + 漢字 ） ケース２：「0.1」 　（ 小数 ) ケース３：「010」　（ ゼロサプレスされていない数字 ） Number("7日") // NaN Number("0.1") // 0.1 Number("010") // 10 parseInt("7日") // 7 parseInt("0.1") // 0 parseInt("010") // 10 利用例の比較結果 ケース１では、parseIntは数字だけ解析して取り出すことが可能です。 この場合では、事前に文字列を加工してから数値変換した方がスムーズだといえます。 ケース２では、parseIntでは情報が欠落してしまいます。 parseIntは整数専用であり、この場合はparseFloat()を使いましょう。 ケース３では結果は同一であるものの、以前のバージョンでは、parseIntを使うと引数を8進数扱いされるため結果が 8 となっていました。 役割の違いを考える 通常の１０進数の取り扱いに関しては、Numberを使うことをオススメします。 しかし、２進数や８進数などの特殊な計算においては、parseIntの利用を検討すると良いでしょう。   まとめ 文字列を数値に変換したい場合には、Numberを使いましょう。 そして、時と場合によって使い分けていくことが重要です。   執筆してくれたメンター 寺谷文宏 WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。 TechAchademyではフロントエンド、Javaコースを担当。   大石ゆかり JavaScriptのNumberとparseIntの違いがよく分かったので良かったです！ 田島悠介 ゆかりちゃん、分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
JavaScript

JavaScriptのparseInt関数の使い方と扱える最大値について現役エンジニアが解説【初心者向け】

JavaScriptのparseInt関数の使い方と扱える最大値について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 parseInt関数を利用することで、文字列を整数に変換することが可能です。 実務でもpraseInt関数を利用した、値の変換処理を行うのでぜひ学習してみてくださいね。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのparseInt関数の使い方と扱える最大値について詳しく説明していくね！ 大石ゆかり お願いします！   目次 parseInt関数について parseInt関数で扱える最大値 実際に使ってみよう まとめ   parseInt関数について praseInt関数は文字列を整数に変換するJavaScriptの関数です。 parseInt関数はJavaScriptに標準で入っている関数で、グローバル関数とも呼ばれます。 使い方は、parseInt()のように直接記述して使うことができます。 引数は2つあり第1引数のみ必須です。 第1引数は整数に変換する文字列を指定します。 第2引数は基数を指定する数値を指定します。 基数は0と1だけで表す2進数なら2、数を数える時に使っている10進数なら10となります。 省略した場合の標準値は10ではないので注意してください。 また、省略した場合の動作は実装依存なので基本的には第2引数を指定して使ってください。   [PR] フロントエンドで副業する学習方法を動画で公開中parseInt関数で扱える最大値 JavaScriptで正確に扱える数は、数値を表すNumberオブジェクトに定数として保持されています。 Number.MAX_SAFE_INTEGERは最大整数値(253 – 1)となっています。 Number.MAX_SAFE_INTEGERを整数で表すと9007199254740991です。 JavaScriptで表すことが可能な最大数値はNumber.MAX_VALUEに保持されています。 Number.MAX_VALUEは、2の1024乗である値となっていて、1.7976931348623157e+308（e+308は10の308乗）です。 実際に使ってみよう 実際にparseInt関数を使って、渡した引数と結果を確認してみます。 ‘1234’という文字列を10進数の1234にする場合は下記のように記述します。 parseInt('1234', 10); //1234 ‘0123’のような0から始まる文字列を10進数にすると、整数が返されるので頭の0がなくなり123が返されます。 parseInt('0123', 10); //123 ‘一二三’のような数値ではない文字列を10進数にすると、数値ではないことを表すNan（Not-A-Number）が返されます。 parseInt('一二三', 10); //NaN ’12月と1日’のような数値以外が含まれる文字列を10進数にすると、最初の数値ではない文字以降を無視するので12が返されます。 parseInt('12月と1日', 10); //12   まとめ 今回は、parseInt関数を紹介しました。 主に使うことの多い10進数に絞った結果の違いを見ましたが、他の基数でも基本的な考え方は同様です。 詳細はMDNのリファレンスページでも確認できます。 MDNのリファレンスページ この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長 開発実績：金融・小売・製造業種の基幹システムから人工知能や機械学習開発教育まで20年以上の開発実績。経営者目線で、開発言語にとらわれない横断的なマネジメントを行うCTO業務や、新規事業開発を行う前段階のプロトタイプ開発、事業会社非IT社員向けDXプログラミング思考研修を得意とする。 ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする岡山市クラブ講座活動を行っている。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

JavaScriptのNumber.parseIntメソッドについて現役エンジニアが解説【初心者向け】

JavaScriptのNumber.parseIntメソッドについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptのNumber.parseIntメソッドについて詳しく説明していくね！ 大石ゆかり お願いします！   目次 Numberオブジェクトとは Number.parseIntメソッドの使い方 実際に使ってみよう まとめ   Numberオブジェクトとは JavaScriptに標準で入っている数値を表すオブジェクトです。 Numberオブジェクトには数値を扱う定数とメソッドを持っています。定数には、JavaScriptの数値で表せる最大値のMAX_VALUEや最小値のMIN_VALUEなどがあります。 メソッドには、今回紹介する文字列を数値に変換するperseIntや数値かどうかを判定するisIntegerなどがあります。 [PR] フロントエンドで副業する学習方法を動画で公開中Number.parseIntメソッドの使い方 NumberはJavaScriptに標準で入っているオブジェクトなので、そのままNumber.parseInt()と記述することで使えます。引数は2つあり第1引数のみ必須です。 第1引数は整数に変換する文字列を指定します。第2引数は基数を指定する数値を指定します。基数は0と1だけで表す2進数なら2、数を数える時に使っている10進数なら10となります。省略した場合のデフォルト値は10ではないので注意してください。また、省略した場合の動作は実装依存なので基本的には第2引数を指定して使ってください。 実際に使ってみよう 実際にNumber.parseIntメソッドを使って、渡した引数と結果を確認してみます。’1234’という文字列を10進数の1234にする場合は下記のように記述します。 Number.parseInt('1234', 10); //1234 ‘0123’のような0から始まる文字列を10進数にすると、整数が返されるので頭の0がなくなり123が返されます。 Number.parseInt('0123', 10); //123 ‘一二三’のような数値ではない文字列を10進数にすると、数値ではないことを表すNan（Not-A-Number）が返されます。 Number.parseInt('一二三', 10); //NaN ’12月と1日’のような数値以外が含まれる文字列を10進数にすると、最初の数値ではない文字以降を無視するので12が返されます。 Number.parseInt('12月と1日', 10); //12   まとめ Number.parseIntメソッドを紹介しました。主に使うことの多い10進数に絞った結果の違いを見ましたが、他の基数でも基本的な考え方は同様です。 詳細はMDNのリファレンスページでも確認できます。 MDNのリファレンスページ 筆者プロフィール 横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

JavaScriptのコードを難読化する方法を現役エンジニアが解説【初心者向け】

JavaScriptのコードを難読化する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次parseIntメソッドとはparseIntメソッドの使い方parseIntメソッドでエラーが発生する際の主な原因とその対処方法まとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 コードを難読化する方法について詳しく説明していくね！ 大石ゆかり お願いします！   難読化とは その言葉通り、コードを読み難くする行為のことをいいます。読み難くするだけで、コードの動きには影響を与えません。今まで通り動くことが大事です。 また、パズルの様な扱いで難読化コードを公開すような場合もあります。良かったら、挑戦してみて下さい。   難読化するメリット 普通にプログラムを勉強していると、プログラムは読みやすくするように習うかと思います。実際、その方が良いばいいが多いです。しかし、では何故あえて「難読化」などをするのでしょうか？ 読みやすくするのは、他の人が再利用したり問題点を見つけやすくしたりする為に行います。その逆に他の人が再利用したり、内容を理解出来ない様にするのが目的です。 主にJavaScriptはブラウザーで動くため、必ず公開されるプログラムとなってしまいます。そのため、苦労して考えたコードも誰でもマネできてしまう状況になっています。これらを簡単にさせないために、「難読化」が必要になりました。 最近では、JavaScriptだけでなく様々な言語でも利用される技術となっています。   [PR] フロントエンドで副業する学習方法を動画で公開中難読化と暗号化の違い ここで、暗号化とは違うの？という疑問が湧くかもしれません。暗号化と違うのは、「読み難いが読めるもの」と、「完全に読むことができないもの」の違いとなります。 暗号化された状況では、プログラムが動くことができません。また、圧縮や最適化といったプログラムの変換作業もあります。圧縮はプログラムを軽くするもので、最適化はプログラムを早くするものです。   難読化する方法 難読化には、ツールを使うのが一般的です。Javascriptで利用できるツールを幾つか紹介します。 ■Javascript Obfuscator 恐らく、一番普及していると思われるツールです。初心者でも利用しやすくなっています。 ■Closure Compiler Googleが提供しているものです。圧縮や最適化がメインと思われます。 ■jjencode デコーダーがあるので、元に戻すことも容易です。一度は試してみるのもいいかと思います。   コード難読化の実行方法 ここでは実際にJavascript Obfuscatorを使ってコードを難読化してみましょう。 Javascript Obfuscatorは Node.js などでも利用可能ですが、今回は簡単に利用するために CDN 経由で利用します。 <script src="https://cdn.jsdelivr.net/npm/javascript-obfuscator/dist/index.browser.js"></script> <script> const obfuscationResult = JavaScriptObfuscator.obfuscate( ` (function(){ const answer = 10 / 2;
JavaScript

【開発現場で使える！】Ruby on RailsでのValidationの使い方

普段サイトなどで会員登録をする際に「パスワードは最低8文字以上でなければなりません」といった文言をよく見るかと思います。 こういった制約をRubyのフレームワークのRuby on Railsではバリデーション(Validation)という仕組みで用意することができます。 ここではValidationの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次parseIntメソッドとはparseIntメソッドの使い方parseIntメソッドでエラーが発生する際の主な原因とその対処方法まとめ監修してくれたメンター Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回はバリデーションについて説明するよ。 大石ゆかり 田島メンター！！バリデーションというのは何ですか〜？ 田島悠介 バリデーションは、ある値に対して指定した条件に当てはまるかどうかというのを検証するものだよ。例えばメールアドレスが正しく入力されているかとか、パスワードの文字は8文字以上であるかとかだね。 大石ゆかり なるほど、実際によく見るやつですね。ぜひ覚えておきたいです！   バリデーションとは Ruby on Railsには、ユーザが入力した値を検証する為にバリデーション(Validation)という仕組みがあります。 例えば入力必須の項目や、最低何文字以上入力必須などの制約を設ける際に利用します。 この仕組みを利用すれば、データベースに不正なデータが登録されることを防ぐことができます。 例えば、あるWEBサイトで年齢を入力する欄があったとします。 何も対策していない状態で-1を入力して登録ボタンを押してしまうと、-1が年齢としてデータベースに登録されてしまいます。 このような不正な状態が起きないようにするため、バリデーションを利用します。 おかしい値が入力された場合は「年齢に不正な値が入力されています」といったエラーメッセージを表示し、登録されないようにします。 これがバリデーションの役割です。 バリデーションの構文 バリデーションはモデルに対応するファイルに記載していきます。 例えばUserモデルのnameに対して、必須入力であることを表すバリデーションを設定する場合は以下のように書きます。 class User < ApplicationRecord validates :name, presence: true end これでnameの入力は必須になりました。 nameの入力がない状態でUserを保存しようとするとこのようなエラーになります。 Validation failed: Name can't be blank (ActiveRecord::RecordInvalid) nameが空白の状態だというメッセージが表示されていますね。 バリデーションにはいくつか種類がありますので、のちほど説明します。 バリデーションがトリガーされるメソッド バリデーションがトリガー(実行)されるメソッドがいくつかあるので紹介します。 create データベースに登録するときに使用するメソッドです。 User.create(name: "tarou") バリデーションで不正なデータが見つかった場合はデータベースに保存されません。 create! createメソッドと同じくデータベースに登録するときに使用するメソッドです。 User.create!(name: "tarou") createメソッドと異なるのは、バリデーションで不正なデータが見つかった場合は例外エラーとして処理されます。 前述でも紹介した Validation failed: Name can't be blank (ActiveRecord::RecordInvalid) このようなエラーが表示され、実行中の処理は止まります。 save データベースに登録するときに使用するメソッドです。 User.new(name: "tarou").save 正常に保存できた場合はtrue、保存できなかった場合はfalseを返します。 save! saveメソッドと同じくデータベースに登録するときに使用するメソッドです。 User.new(name: "tarou").save! saveメソッドと異なるのは、バリデーションで不正なデータが見つかった場合は例外エラーとして処理されます。 実行中の処理は止まります。 update すでに存在するデータを更新するときに使用するメソッドです。 User.update(name: "tarou") 正常に更新できた場合はtrue、更新できなかった場合はfalseを返します。 update! updateメソッドと同じくデータを更新するときに使用するメソッドです。 User.update!(name: "tarou") updateメソッドと異なるのは、バリデーションで不正なデータが見つかった場合は例外エラーとして処理されます。 実行中の処理は止まります。 valid?メソッド valid?メソッドはバリデーションの結果を確認できます。 user = User.first user.name = "tarou" user.valid? valid?メソッドを実行したときのモデルの状態でバリデーションを実行します。 不正なデータが見つかった場合はfalseを、問題なければtrueを返します。 データベースへの保存はしません。 バリデーションがスキップされるメソッド 逆にバリデーションがスキップされる(実行されない)メソッドもありますので注意してください。 バリデーションはスキップしますが、データベース上の制約に引っかかる場合はデータベース側での保存時にエラーになりますのでご注意ください。 increment! increment!メソッドはある数値項目をいくつか増分して、保存するメソッドになります。 以下の例はユーザーのidを1増やして、データベースに保存しています。 user = User.first user.increment!(:id, 1) また増分ではなく減算をするdecrement!メソッドもあります。 こちらもバリデーションはスキップします。 increment_counter increment_counterメソッドもある数値項目を増分させるメソッドですが、複数のデータを対象に更新できます。 以下の例はユーザーのageが25であるユーザーのageを1増やして、データベースに保存しています。 User.increment_counter(:age, 25) また増分ではなく減算をするdecrement_counterメソッドもあります。 こちらもバリデーションはスキップします。 toggle! toggle!メソッドは真偽値(true/false)を反転させて、データベースに保存します。 以下の例はユーザーのanswered(アンケートなどの回答有無)を反転させています。 user = User.first user.toggle!(:answered) touch touchメソッドはupdated_at(更新日時)を更新して、データベースに保存します。 user = User.first user.touch update_all update_allメソッドは複数のデータに対して、項目を更新し、データベースに保存します。 以下の例はすべてのユーザーのnameをtarouに更新しています。 User.update_all(name: "tarou") update_attribute update_attributeメソッドは指定した項目を更新し、データベースに保存します。 以下の例はユーザーのnameをtestに更新しています。 user = User.first user.update_attribute(:name, "test") update_column update_columnメソッドは指定した項目のみを更新し、データベースに保存します。 update_attributeメソッドと異なる点は、updated_atの更新はされないということです。 以下の例はユーザーのnameをtestに更新しています。 user = User.first user.update_column(:name,"test") update_columns update_columnsメソッドは複数項目を更新し、データーベースに保存します updated_atは更新されません。 以下の例はユーザーのidを100に、nameをtestに更新しています。 user = User.first user.update_columns(id: 100, name: "test") update_counters update_countersメソッドは条件に合致したユーザーの項目を増分させて、データベースに保存します。 以下の例はidが1～100のユーザーのageを1増分しています。 User.where(id: 1..100).update_counters(age:
Ruby

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptのparseIntメソッドでエラーが発生する際の対処方法について現役エンジニアが解説【初心者向け】