Articles
JavaScript入門
JavaScriptにおける組み込み関数

JavaScriptにおける組み込み関数

この記事ではJavaScriptにおける組み込み関数について説明します。

YouTube Video

JavaScriptにおける組み込み関数

JavaScriptにはさまざまな組み込み関数が用意されており、これらはプログラムの作成を効率的に行うための強力なツールです。ここでは、JavaScriptにおける代表的な組み込み関数について詳しく解説します。

組み込み関数とは？

組み込み関数（Built-in Functions）とは、JavaScriptに標準で用意されている関数のことです。これらの関数は、特定のタスクを簡潔に実行するために設計されています。プログラマがわざわざ独自に実装しなくてもよいので、コードの可読性と保守性が向上します。

代表的な組み込み関数

parseInt() 

1// Convert string to integer
2console.log(parseInt("42"));      // Output: 42
3console.log(parseInt("42px"));    // Output: 42
4console.log(parseInt("0xF", 16)); // Output: 15
5console.log(parseInt("0xF"));     // Output: 15
6console.log(parseInt("px42"));    // Output: NaN

  • parseInt()は、文字列を解析して整数に変換するための関数です。文字列の先頭に数値が含まれている場合、その部分を整数として返します。オプションで基数（進数）を指定することもできます。

  • 文字列の先頭に数値が含まれていない場合、NaN（Not-a-Number）を返します。また、基数を指定しない場合、デフォルトでは10進数とみなされますが、文字列が"0x"で始まる場合は16進数と解釈されます。

parseFloat() 

1// Convert string to float
2console.log(parseFloat("3.14"));      // Output: 3.14
3console.log(parseFloat("3.14abc"));   // Output: 3.14
4console.log(parseFloat("42"));        // Output: 42

  • parseFloat()は、文字列を解析して浮動小数点数に変換します。小数点を含む数値を扱いたい場合に使用されます。

  • parseInt()と同様、文字列の先頭が数値でない場合はNaNを返します。また、整数部だけでなく小数部も正しく解析される点が特徴です。

isNaN() 

1console.log(isNaN(NaN));         // Output: true
2console.log(isNaN(42));          // Output: false
3console.log(isNaN("hello"));     // Output: true

  • isNaN()は、渡された値がNaNかどうかを判定します。NaN（Not-a-Number）は、数値として無効な値を表します。

  • isNaN()は、数値型以外のデータ型に対しても有効で、例えば文字列が数値に変換できない場合もtrueを返します。

Number() 

1console.log(Number("42"));        // Output: 42
2console.log(Number("3.14"));      // Output: 3.14
3console.log(Number("0xff"));      // Output: 255
4console.log(Number("abc"));       // Output: NaN
5
6console.log(parseFloat("3.14abc"));  // Output: 3.14
7console.log(Number("3.14abc"));      // Output: NaN

  • Number()は、文字列や他のデータ型を数値に変換する関数です。数値以外の文字列が与えられるとNaNを返します。

  • parseInt()やparseFloat()とは異なり、Number()は文字列内に数値以外の文字が含まれていると、無効な変換とみなしてNaNを返します。

String() 

1console.log(String(42));           // Output: "42"
2console.log(String(3.14));         // Output: "3.14"
3console.log(String(true));         // Output: "true"
4console.log(String(null));         // Output: "null"
5console.log(String(undefined));    // Output: "undefined"
  • String()は、数値や他のデータ型を文字列に変換する関数です。String(42)は"42"という文字列を返します。
  • 変換対象がnullやundefinedの場合、それぞれ文字列の"null"や"undefined"を返します。
  • 数値、論理値、オブジェクトなど、あらゆるデータ型を文字列型に統一して扱う際に便利です。

Array 

1const arr = Array(3);
2console.log(arr); // Output: [ <3 empty items> ]
3
4const arr2 = Array(1, 2, 3);
5console.log(arr2); // Output: [1, 2, 3]
  • Array は、新しい配列を作成するためのコンストラクタです。
  • 引数が1つの場合、その値を配列の長さとみなし、空の配列を作成します。
  • 引数が複数の場合、それらの値を要素として持つ配列を作成します。

Array.isArray() 

1console.log(Array.isArray([1, 2, 3])); // Output: true
2console.log(Array.isArray("not an array")); // Output: false
  • Array.isArray() は、引数が配列であるかどうかを判定するメソッドです。
  • 配列であれば true を、配列でなければ false を返します。

isFinite() 

1console.log(isFinite(42));         // Output: true
2console.log(isFinite(Infinity));   // Output: false
3console.log(isFinite(NaN));        // Output: false

  • isFinite()は、渡された値が有限かどうかを判定します。有限な数値の場合はtrue、それ以外（無限大やNaNなど）の場合はfalseを返します。

  • JavaScriptでは、Infinityと-Infinityが無限大を表し、これらは数値型ですが、isFinite()では無限大は無効な値と見なされます。

eval() 

1let expression = "2 + 2";
2console.log(eval(expression));    // Output: 4
3
4console.log(eval("var x = 10; x * 2"));  // Output: 20

  • eval()は、文字列として与えられたJavaScriptコードを評価して実行する関数です。動的にJavaScriptコードを実行することができます。

  • eval()は非常に強力ですが、セキュリティリスクを伴うため、実際の開発では使用を避けるべきです。外部から提供されるコードをeval()で実行すると、意図しない動作やセキュリティ脆弱性を引き起こす可能性があります。

encodeURI() / decodeURI() 

1let url = "https://example.com/?name=John Doe&age=25";
2let encodedUrl = encodeURI(url);
3console.log(encodedUrl);
4// Output: https://example.com/?name=John%20Doe&age=25
5
6let decodedUrl = decodeURI(encodedUrl);
7console.log(decodedUrl);
8// Output: https://example.com/?name=John Doe&age=25

  • encodeURI()は、URL内で使用できない文字をエンコード（変換）するための関数です。一方、decodeURI()はエンコードされたURLをデコードして元に戻します。

  • エンコードは主に特殊文字を扱う際に重要です。例えば、スペースや&などの文字はエンコードされないと正しくURLに含められないため、encodeURI()を使って適切に処理する必要があります。

setTimeout() / setInterval() 

 1// Execute a function after 2 seconds
 2setTimeout(() => {
 3    console.log("This runs after 2 seconds");
 4}, 2000);
 5
 6// Execute a function every 1 second
 7let intervalId = setInterval(() => {
 8    console.log("This runs every 1 second");
 9}, 1000);
10
11// Stop the interval after 5 seconds
12setTimeout(() => {
13    clearInterval(intervalId);
14}, 5000);

  • setTimeout()は指定された時間後に一度だけ関数を実行するためのタイマー関数です。setInterval()は指定した間隔で繰り返し関数を実行します。

  • setTimeout()やsetInterval()は非同期に実行され、指定された時間が経過すると、関数が呼び出されます。clearTimeout()やclearInterval()を使用して、実行をキャンセルすることも可能です。

まとめ

JavaScriptの組み込み関数を活用することで、プログラムをシンプルかつ効率的に記述できます。ここで紹介した関数は基本的なものであり、さまざまな状況で役立ちます。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

JavaScriptにおけるNull合体演算子