【JavaScript入門】グローバル関数

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

グローバル関数

　グローバル関数は、JavaScript の実行環境で最初から用意されている便利な関数群です。呼び出す際にオブジェクトを指定しなくても使えるので「グローバル」と呼ばれています。ただし、すべてのグローバル関数を頻繁に使うわけではなく、中には特定の状況でしか利用しないものもあります。ここでは、代表的なものを紹介します。

１．文字列を数値として解釈する

parseInt() と parseFloat() は、文字列をそれぞれ整数・浮動小数点数として解釈し、数値を返すグローバル関数です。

parseInt(s [, n])

第1引数 s の文字列を、第2引数 n（2～36）の進数として解釈し、整数値を返します。
解釈できない場合は NaN を返し、進数の指定が不正（2より小さいか36より大きい）な場合も NaN。
先頭の空白や改行は無視し、整数として解釈できる部分まで変換します。

parseFloat(s)

引数 s を浮動小数点数として解釈し、数値を返します。
解釈できない場合は NaN。
先頭の空白や改行は無視し、小数点を含めて解釈できる範囲だけ変換します。

２．NaN と無限大の判定

数値が NaN（Not-A-Number）なのか、あるいは有限数なのかをチェックする関数です。

`isNaN(n)`

引数 n が NaN なら true、そうでなければ false を返します。
ただし、文字列などを無理やり数値に変換して判定しようとするため、厳密判定には Number.isNaN() のほうがおすすめです。

`isFinite(n)`

引数 n が有限数であれば true、そうでなければ false を返します。
こちらも文字列などを自動で数値変換してしまう点に注意し、厳密判定には Number.isFinite() を使うのが望ましいです。

３．文字列をURLエンコードする / デコードする

　URLに含まれる文字列を「%E3%81%82」といった形式で変換するのがエンコードです。逆に、エンコードされた文字列を元に戻すのがデコードです。

encodeURI() / encodeURIComponent()

文字列をURLエンコードする関数です。
encodeURI() は、:/?&=# など一部の文字を変換せずに残し、encodeURIComponent() はこれらもエンコードする。
URL全体をエンコードするときは、encodeURIComponent() を使ったほうが安全です。

decodeURI() / decodeURIComponent()

エンコードされた文字列を元に戻す（デコードする）関数です。
encodeURI() でエンコードした文字列は decodeURI()、encodeURIComponent() でエンコードした文字列は decodeURIComponent() で戻す。

４．eval()

引数の文字列を JavaScript のコードとして評価・実行します。
強力な反面、セキュリティリスクが極めて高く、かつパフォーマンス上の問題もあるため、通常は使うべきではありません。

５．サンプルHTMLコード

　次の例を「myGlobalFunctions.html」というファイル名で保存し、ブラウザで開いてコンソール出力を確認してください。

【myGlobalFunctions.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myGlobalFunctions.html</title>
</head>
<body>
  <h1>グローバル関数の例</h1>
  <p>コンソールを開いて、実行結果を確認してください。</p>

  <script>
    // 1. parseInt, parseFloat の例
    console.log('parseInt("42"):', parseInt("42"));
    console.log('parseInt("1010", 2):', parseInt("1010", 2)); // 2進数解釈
    console.log('parseFloat("3.14"):',
                parseFloat("3.14"));
    console.log('parseInt("abc"):', parseInt("abc")); // => NaN
    console.log('parseFloat("15.5円"):',
                parseFloat("15.5円")); // => 15.5

    // 2. isNaN, isFinite の例
    console.log('isNaN("123"):', isNaN("123"));     // => false（内部で数値変換）
    console.log('isNaN("あいう"):', isNaN("あいう")); // => true
    console.log('isFinite("99"):', isFinite("99")); // => true
    console.log('isFinite(Infinity):', isFinite(Infinity)); // => false
                          // グローバルプロパティ Infinity は無限大を表す数値です。

    // 3. encodeURI, encodeURIComponent
    const url = 'https://example.com/search?q=関数';
    console.log('encodeURI(url):',
                encodeURI(url));
    console.log('encodeURIComponent(url):',
                encodeURIComponent(url));

    // 4. decodeURI, decodeURIComponent
    const encodedUri = 'https://example.com/search?q=%E9%96%A2%E6%95%B0';
    console.log('decodeURI:', decodeURI(encodedUri));
    const encodedComponent = 'https%3A%2F%2Fexample.com%2Fsearch%3Fq%3D%E9%96%A2%E6%95%B0';
    console.log('decodeURIComponent:', decodeURIComponent(encodedComponent));

    // 5. eval の例（通常は非推奨）
    const strCode = "3 * 4 + 2";
    const result = eval(strCode);
    console.log('eval("3 * 4 + 2"):', result); // => 14
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

parseInt("42"): 42
parseInt("1010", 2): 10
parseFloat("3.14"): 3.14
parseInt("abc"): NaN
parseFloat("15.5円"): 15.5
isNaN("123"): false
isNaN("あいう"): true
isFinite("99"): true
isFinite(Infinity): false
encodeURI(url): https://example.com/search?q=%E9%96%A2%E6%95%B0
encodeURIComponent(url): https%3A%2F%2Fexample.com%2Fsearch%3Fq%3D%E9%96%A2%E6%95%B0
decodeURI: https://example.com/search?q=関数
decodeURIComponent: https://example.com/search?q=関数
eval("3 * 4 + 2"): 14

まとめ

グローバル関数 は、オブジェクト名を付けなくても直接呼び出せる便利な関数群。
文字列 → 数値変換の parseInt, parseFloat、数値の NaN や Infinity 判定をする isNaN, isFinite などがある。
URL エンコード/デコードの encodeURI() / decodeURI()、encodeURIComponent() / decodeURIComponent() は外部との通信や検索パラメータ操作で役に立つ。
eval() は文字列を直接コードとして実行できるが、セキュリティ面やパフォーマンス面でリスクが高いため、実務ではほぼ使われない。

　必要なときにこれらのグローバル関数を活用すると、変換やチェック処理をシンプルに書けます。使いどころを正確に把握し、注意点（特に eval()）を踏まえた上で利用しましょう。

【JavaScript入門】グローバル関数